DatePicker

Date:
DatePickerDemo/Index.cshtml
@Html.Awe().DatePickerFor(o => o.Date).Value(new DateTime(2017, 11, 1))
Date range:
DatePickerDemo/Index.cshtml
@Html.Awe().DatePicker("DateRange1").SelectRange()

Inline Calendar



Inline Datepicker and DateRangePicker, the text input can be hidden.

DatePickerDemo/Index.cshtml
@Html.Awe().DatePickerFor(o => o.DateInline).InlineCalendar()
@Html.Awe().DatePicker("DateRangeInline").InlineCalendar().SelectRange()

With ChangeMonth and ChangeYear

Date:
DatePickerDemo/Index.cshtml
@(Html.Awe().DatePickerFor(o => o.Date2)
.ChangeMonth()
.ChangeYear())

Number of months, Min, max, default date, clear button

Date:
DatePickerDemo/Index.cshtml
@(Html.Awe().DatePickerFor(o => o.Date3)
.NumberOfMonths(3)
.MinDate(DateTime.Now.AddDays(1))
.MaxDate(DateTime.Now.AddMonths(7))
.DefaultDate(DateTime.Now.AddDays(4))
.ClearButton())

Date range

From:
To:
DatePickerDemo/Index.cshtml
<div class="elabel">
From:
</div>
<div class="einput">
@(Html.Awe().DatePickerFor(o => o.DateFrom).NumberOfMonths(2).ChangeMonth().ChangeYear())
</div>
<div class="elabel">
To:
</div>
<div class="einput">
@(Html.Awe().DatePickerFor(o => o.DateTo).NumberOfMonths(2))
</div>
<script>
$(function () {
var from = $('#DateFrom');
var to = $('#DateTo');

from.change(function () {
to.data('o').min = from.val();
});

to.change(function () {
from.data('o').max = to.val();
});
});
</script>

Disable certain dates, change weekend days color

If you need to disable certain dates, for example holidays, weekends, or just a specific period, you can use the DayFunc to set a custom js function where you can set opt.dsb to disable a date or add an additional css class to opt.cls.
Date:
DatePickerDemo/Index.cshtml
<script>
function dayf(opt) {
var date = opt.d.getDate();
var dayw = opt.d.getDay();

if (date >= 15 && date <= 20) {
opt.dsb = 1;
}

if (dayw == 0 || dayw == 6) {
opt.cls += ' weekend';
}
}
</script>

<style>
.weekend {
color: orangered;
}
</style>

<div class="efield">
<div class="elabel">
Date:
</div>
<div class="einput">
@Html.Awe().DatePicker("DateWeekend").DayFunc("dayf")
</div>
</div>

Right to left

DatePickerDemo/Index.cshtml
<div class="einput" style="direction: rtl;">
@Html.Awe().DatePickerFor(o => o.Date4).ChangeMonth().ChangeYear()
</div>

Datepicker Api

Datepicker:



DatePicker api can be called to get or set date, or if you just need to parse or format a date.
$('#id').data('api') - get datepicker api
api.getDate() - get datepicker value as Date object
api.setDate(date) - set datepicker value with a Date type parameter
awem.formatDate(format, val) - format Date value to string using provided format
awem.parseDate(format, strval) - parse string value to Date type
awem.toDate(strval) - parse string value to Date type, using default format used by the datepicker ( the one set in utils.init | Html.Awe().Init())

TimePicker



DatePickerDemo/Index.cshtml
@Html.Awe().TimePicker("tmp1")
<br />
<br />
@Html.Awe().AjaxRadioList("tmp2").TimePicker(o => o.ClearBtn())
The timepicker will use 12h am/pm or 24h format depending on the current culture.



Comments