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 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
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

By accessing this site, you agree to the use of cookies and other technologies to process your personal data (e.g. IP address) to enhance and personalise your experience across our websites. Additionally, third-party companies, may store cookies on your device and use similar technologies to collect and use certain information. For more information, refer to our privacy policy and cookie policy.