DateTimePicker

DateTimePicker:
DatePickerDemo/Index.cshtml
@Html.Awe().DateTimePicker(new DateTimePickerOpt{ Name = "DateTime1", Value = DateTime.UtcNow })
DateTimePicker with seconds:
DatePickerDemo/Index.cshtml
@model AweCoreDemo.ViewModels.Input.DatePickerDemoInput
@{
ViewData["Title"] = "DateTimePicker";
}

<div class="efield">
<div class="elabel">
Date and time:
</div>
<div class="einput">
@*begindt*@
@Html.Awe().DateTimePicker(new DateTimePickerOpt{ Name = "DateTime1", Value = DateTime.UtcNow })
@*enddt*@
</div>

@Html.Source("DatePickerDemo/Index.cshtml", "dt")
</div>

<div class="efield">
<div class="elabel">
Date:
</div>
<div class="einput">
@*begindate*@
@Html.Awe().DatePicker(new DatePickerOpt{ Name = "Date", Value = new DateTime(2017, 11, 1)})
@*enddate*@
</div>

@Html.Source("DatePickerDemo/Index.cshtml", "date")
</div>

<div class="efield">
<div class="elabel">
Date range:
</div>
<div class="einput">
@*beginrg1*@
@Html.Awe().DatePicker(new DatePickerOpt{ Name = "DateRange1", SelectRange = true })
@*endrg1*@
</div>

@Html.Source("DatePickerDemo/Index.cshtml", "rg1")
</div>

<h2>Inline Calendar</h2>
<div class="efield" style="min-height: 430px">
<div class="einput">
@*begininl*@
@Html.Awe().DatePicker(new DatePickerOpt { Name = "DateInline", InlineCalendar = true })
@Html.Awe().DatePicker(new DatePickerOpt
{
Name = "DateRangeInline",
InlineCalendar = true,
SelectRange = true
})
@*endinl*@
</div>
<br />
<br />
<div class="expl">
Inline Datepicker and DateRangePicker, the text input can be hidden.
</div>
<br />
@Html.Source("DatePickerDemo/Index.cshtml", "inl")
</div>

<h2>Number of months, Min, max, default date, clear button </h2>
<div class="efield">
<div class="elabel">
Date:
</div>
<div class="einput">
@*begin2*@
@(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
}))
@*end2*@
</div>
@Html.Source("DatePickerDemo/Index.cshtml", "2")
</div>

<h2>Date range</h2>
<div class="expl">
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.
</div>
<br />
<div class="efield">
@*beginrange*@
<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>
@*endrange*@
@Html.Source("DatePickerDemo/Index.cshtml", "range", true)
</div>

<h2>Disable certain dates, change weekend days color</h2>
<div class="expl">
If you need to disable certain dates, for example holidays, weekends, or just a specific period, you can use the <code>DayFunc</code>
to set a custom js function where you can set <code>opt.dsb</code> to disable a date or add an additional css class to <code>opt.cls</code>.
</div>
@*beginw*@
<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>
@*endw*@
@Html.Source("DatePickerDemo/Index.cshtml", "w", true)

<h2>Right to left </h2>

@*begin3*@
<div class="einput" style="direction: rtl;">
@Html.Awe().DatePicker(new DatePickerOpt { Name = "Date4" })
</div>
@*end3*@

@Html.Source("DatePickerDemo/Index.cshtml", "3")

<h2>Datepicker Api</h2>
<div class="efield">
<div class="elabel">
Datepicker:
</div>
@*beginapi*@
<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>
@*endapi*@
<br />
@(Html.Awe().Tabs().Add("description",
@<text>
DatePicker api can be called to get or set date, or if you just need to parse or format a date.<br />
<code>$('#id').data('api')</code> - get datepicker api<br />
<code>api.getDate()</code> - get datepicker value as Date object<br />
<code>api.setDate(date)</code> - set datepicker value with a Date type parameter<br />
<code>awem.formatDate(format, val)</code> - format Date value to string using provided format<br />
<code>awem.parseDate(format, strval)</code> - parse string value to Date type<br />
<code>awem.toDate(strval)</code> - parse string value to Date type, using default format used by the datepicker ( the one set in <code>utils.init</code> | <code>Html.Awe().Init()</code>)
</text>, "expl")
.Add("view", Html.Source("DatePickerDemo/Index.cshtml", "api")))
</div>

<div class="example">
<h2>TimePicker</h2>
@*begintm*@
@(Html.Awe().TimePicker(new TimePickerOpt
{
Name = "TimePicker1",
Caption = "time please",
Step = 15,
ClearBtn = true,
Value = DateTime.UtcNow
}))
@*endtm*@
@Html.Source("DatePickerDemo/Index.cshtml", "tm")
</div>

<div class="expl">
The timepicker will use 12h am/pm or 24h format depending on the current culture.
</div>
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())

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
@model AweCoreDemo.ViewModels.Input.DatePickerDemoInput
@{
ViewData["Title"] = "DateTimePicker";
}

<div class="efield">
<div class="elabel">
Date and time:
</div>
<div class="einput">
@*begindt*@
@Html.Awe().DateTimePicker(new DateTimePickerOpt{ Name = "DateTime1", Value = DateTime.UtcNow })
@*enddt*@
</div>

@Html.Source("DatePickerDemo/Index.cshtml", "dt")
</div>

<div class="efield">
<div class="elabel">
Date:
</div>
<div class="einput">
@*begindate*@
@Html.Awe().DatePicker(new DatePickerOpt{ Name = "Date", Value = new DateTime(2017, 11, 1)})
@*enddate*@
</div>

@Html.Source("DatePickerDemo/Index.cshtml", "date")
</div>

<div class="efield">
<div class="elabel">
Date range:
</div>
<div class="einput">
@*beginrg1*@
@Html.Awe().DatePicker(new DatePickerOpt{ Name = "DateRange1", SelectRange = true })
@*endrg1*@
</div>

@Html.Source("DatePickerDemo/Index.cshtml", "rg1")
</div>

<h2>Inline Calendar</h2>
<div class="efield" style="min-height: 430px">
<div class="einput">
@*begininl*@
@Html.Awe().DatePicker(new DatePickerOpt { Name = "DateInline", InlineCalendar = true })
@Html.Awe().DatePicker(new DatePickerOpt
{
Name = "DateRangeInline",
InlineCalendar = true,
SelectRange = true
})
@*endinl*@
</div>
<br />
<br />
<div class="expl">
Inline Datepicker and DateRangePicker, the text input can be hidden.
</div>
<br />
@Html.Source("DatePickerDemo/Index.cshtml", "inl")
</div>

<h2>Number of months, Min, max, default date, clear button </h2>
<div class="efield">
<div class="elabel">
Date:
</div>
<div class="einput">
@*begin2*@
@(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
}))
@*end2*@
</div>
@Html.Source("DatePickerDemo/Index.cshtml", "2")
</div>

<h2>Date range</h2>
<div class="expl">
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.
</div>
<br />
<div class="efield">
@*beginrange*@
<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>
@*endrange*@
@Html.Source("DatePickerDemo/Index.cshtml", "range", true)
</div>

<h2>Disable certain dates, change weekend days color</h2>
<div class="expl">
If you need to disable certain dates, for example holidays, weekends, or just a specific period, you can use the <code>DayFunc</code>
to set a custom js function where you can set <code>opt.dsb</code> to disable a date or add an additional css class to <code>opt.cls</code>.
</div>
@*beginw*@
<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>
@*endw*@
@Html.Source("DatePickerDemo/Index.cshtml", "w", true)

<h2>Right to left </h2>

@*begin3*@
<div class="einput" style="direction: rtl;">
@Html.Awe().DatePicker(new DatePickerOpt { Name = "Date4" })
</div>
@*end3*@

@Html.Source("DatePickerDemo/Index.cshtml", "3")

<h2>Datepicker Api</h2>
<div class="efield">
<div class="elabel">
Datepicker:
</div>
@*beginapi*@
<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>
@*endapi*@
<br />
@(Html.Awe().Tabs().Add("description",
@<text>
DatePicker api can be called to get or set date, or if you just need to parse or format a date.<br />
<code>$('#id').data('api')</code> - get datepicker api<br />
<code>api.getDate()</code> - get datepicker value as Date object<br />
<code>api.setDate(date)</code> - set datepicker value with a Date type parameter<br />
<code>awem.formatDate(format, val)</code> - format Date value to string using provided format<br />
<code>awem.parseDate(format, strval)</code> - parse string value to Date type<br />
<code>awem.toDate(strval)</code> - parse string value to Date type, using default format used by the datepicker ( the one set in <code>utils.init</code> | <code>Html.Awe().Init()</code>)
</text>, "expl")
.Add("view", Html.Source("DatePickerDemo/Index.cshtml", "api")))
</div>

<div class="example">
<h2>TimePicker</h2>
@*begintm*@
@(Html.Awe().TimePicker(new TimePickerOpt
{
Name = "TimePicker1",
Caption = "time please",
Step = 15,
ClearBtn = true,
Value = DateTime.UtcNow
}))
@*endtm*@
@Html.Source("DatePickerDemo/Index.cshtml", "tm")
</div>

<div class="expl">
The timepicker will use 12h am/pm or 24h format depending on the current culture.
</div>
The timepicker will use 12h am/pm or 24h format depending on the current culture.



Comments