DateTimePicker

DateTimePicker:

DatePickerDemo/Index.cshtml


@Html.Awe().DateTimePicker(new DateTimePickerOpt{ Name = "DateTime1", Value = DateTime.UtcNow, ClearBtn = true})

DateTimePicker with seconds:

DatePickerDemo/Index.cshtml


@Html.Awe().DateTimePicker(new DateTimePickerOpt { Name = "DateTimeSeconds1", Value = DateTime.UtcNow, ShowSeconds = true })

DatePicker:

DatePickerDemo/Index.cshtml

@Html.Awe().DatePicker(new DatePickerOpt{ Name = "Date", Value = new DateTime(2017, 11, 1)})

Date range picker:

DatePickerDemo/Index.cshtml

@Html.Awe().DatePicker(new DatePickerOpt{ Name = "DateRange1", SelectRange = true })

Inline Calendar

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

DatePickerDemo/Index.cshtml

@Html.Awe().DatePicker(new DatePickerOpt { Name = "DateInline", InlineCalendar = true })
@Html.Awe().DatePicker(new DatePickerOpt
{
    Name = "DateRangeInline",
    InlineCalendar = true,
    SelectRange = true
})

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

Date:

DatePickerDemo/Index.cshtml

@(Html.Awe().DatePicker(
    new DatePickerOpt
{
    Name = "Date3",
    NumberOfMonths = 2,
    MinDate = DateTime.Now.AddDays(1),
    MaxDate = DateTime.Now.AddMonths(2),
    DefaultDate = DateTime.Now.AddDays(4),
    ClearBtn = true,
    ShowTodayBar = false
}))

Date range

Date range using 2 datepickers and js to call datepicker api and set the min and max values for the other datepicker on value change.

From:

To:

DatePickerDemo/Index.cshtml

<div class="elabel">
    From:
</div>
<div class="einput">
    @(Html.Awe().DatePicker(new DatePickerOpt { Name = "DateFrom", NumberOfMonths = 2 }))
</div>
<div class="elabel">
    To:
</div>
<div class="einput">
    @(Html.Awe().DatePicker(new DatePickerOpt { Name = "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(new DatePickerOpt{ Name = "DateWeekend", DayFunc = "dayf"})
    </div>
</div>

Right to left

DatePickerDemo/Index.cshtml

<div class="einput" style="direction: rtl;">
    @Html.Awe().DatePicker(new DatePickerOpt { Name = "Date4" })
</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 aweUtils.init | Html.Awe().Init())

DatePickerDemo/Index.cshtml

<div class="einput">
    @Html.Awe().DatePicker(new DatePickerOpt{ Name =  "DateApi" })
</div>
<br />
<br />
<div>
    <button type="button" class="awe-btn" onclick="dapi.setToday()">set today</button>
    <button type="button" class="awe-btn" onclick="dapi.nextDay()">next day</button>
    <button type="button" class="awe-btn" onclick="dapi.getDate()">get date</button>
    <button type="button" class="awe-btn" onclick="dapi.formatNow()">format now as dd-MM-yyyy</button>
    <button type="button" class="awe-btn" onclick="dapi.parseToDate()">parse 31-01-2012 to date</button>

    <div id="apilog"></div>
</div>
<script>
    var dapi = {};
    $(function () {
        var log = $('#apilog');
        var dtp = $('#DateApi');

        dapi.getDate = function () {
            var date = dtp.data('api').getDate();
            var sval = date ? dtp.data('api').getDate().toString() : '';
            awe.flash(log.html(sval));
        }

        dapi.setToday = function () {
            dtp.data('api').setDate(new Date());
        }

        dapi.nextDay = function () {
            var date = dtp.data('api').getDate() || new Date();
            date.setDate(date.getDate() + 1);
            dtp.data('api').setDate(date);
        }

        dapi.formatNow = function () {
            var str = awem.dateToStr(new Date(), 'dd-MM-yyyy');
            awe.flash(log.html(str));
        }

        dapi.parseToDate = function () {
            var date = awem.parseToDate('dd-MM-yyyy', '31-01-2012');
            awe.flash(log.html(date.toString()));
        }
    });
</script>

TimePicker

DatePickerDemo/Index.cshtml

@(Html.Awe().TimePicker(new TimePickerOpt
{
    Name = "TimePicker1",
    Caption = "time please",
    Step = 15,
    ClearBtn = true,
    Value = DateTime.UtcNow
}))

TimePicker with seconds

DatePickerDemo/Index.cshtml

@(Html.Awe().TimePicker(new TimePickerOpt
{
    Name = "TimePickerSeconds",
    Caption = "time please",
    Step = 15,
    ClearBtn = true,
    Value = DateTime.UtcNow,
    ShowSeconds = true
}))

The timepicker will use 12h am/pm or 24h format depending on the current culture.

Native timepicker

Combo timepicker

Comments