Awesome ASP.net Core and MVC Controls
DatePicker
Date:
DatePickerDemo/Index.cshtml
@Html.Awe().DatePickerFor(o => o.Date).Value(new DateTime(2017, 11, 1))
Inline Calendar
Date inline:
DatePickerDemo/Index.cshtml
@Html.Awe().DatePickerFor(o => o.DateInline).InlineCalendar(true, true)
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').p.min = from.val();
});
to.change(function () {
from.data('o').p.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 apiapi.getDate()
- get datepicker value as Date objectapi.setDate(date)
- set datepicker value with a Date type parameterawem.formatDate(format, val)
- format Date value to string using provided formatawem.parseDate(format, strval)
- parse string value to Date typeawem.toDate(strval)
- parse string value to Date type, using default format used by the datepicker ( the one set in utils.init
| Html.Awe().Init()
)
DatePickerDemo/Index.cshtml
<div class="einput">
@Html.Awe().DatePicker("DateApi")
</div>
<br />
<br />
<div>
<button type="button" class="awe-btn" onclick="setToday()">set today</button>
<button type="button" class="awe-btn" onclick="nextDay()">next day</button>
<button type="button" class="awe-btn" onclick="getDate()">get date</button>
<button type="button" class="awe-btn" onclick="formatNow()">format now as dd-mm-yy</button>
<button type="button" class="awe-btn" onclick="parseToDate()">parse 31-01-2012 to date</button>
<div id="apilog"></div>
</div>
<script>
var log = $('#apilog');
var dtp = $('#DateApi');
function getDate() {
var date = dtp.data('api').getDate();
var sval = date ? dtp.data('api').getDate().toString() : '';
awe.flash(log.html(sval));
}
function setToday() {
dtp.data('api').setDate(new Date());
}
function nextDay() {
var date = dtp.data('api').getDate() || new Date();
date.setDate(date.getDate() + 1);
dtp.data('api').setDate(date);
}
function formatNow() {
var str = awem.formatDate('dd-mm-yy', new Date());
awe.flash(log.html(str));
}
function parseToDate() {
var date = awem.parseDate('dd-mm-yy', '31-01-2012');
awe.flash(log.html(date.toString()));
}
</script>
TimePicker
DatePickerDemo/Index.cshtml
@Html.Awe().TimePicker("tmp1")
Comments