Simple DatePicker

Date:
DatePickerDemo.aspx
<% Date.DatePicker().Value(new DateTime(2017, 11, 1)); %>
<awe:Ocon runat="server" ID="Date" />

Inline Calendar

Date inline:
DatePickerDemo.aspx
<% DateInline.DatePicker().InlineCalendar(true, true); %>
<awe:Ocon runat="server" ID="DateInline" />

With ChangeMonth and ChangeYear

Date:
DatePickerDemo.aspx
<% Date2.DatePicker()
.ChangeMonth()
.ChangeYear(); %>
<awe:Ocon runat="server" ID="Date2" />

Min, max, default date, clear button

Date:
DatePickerDemo.aspx
<% Date3.DatePicker().NumberOfMonths(3)
.MinDate(DateTime.Now.AddDays(1))
.MaxDate(DateTime.Now.AddMonths(7))
.DefaultDate(DateTime.Now.AddDays(4))
.ClearButton(); %>
<awe:Ocon runat="server" ID="Date3" />

Date range

From:
To:
DatePickerDemo.aspx
<div class="elabel">
From:
</div>
<div class="einput">
<% DateFrom.DatePicker().NumberOfMonths(2).ChangeMonth().ChangeYear(); %>
<awe:Ocon runat="server" ID="DateFrom" />
</div>
<div class="elabel">
To:
</div>
<div class="einput">
<% DateTo.DatePicker().NumberOfMonths(2); %>
<awe:Ocon runat="server" ID="DateTo" />
</div>
<script>
$(function () {
var from = $('#<%=DateFrom.ClientID %>');
var to = $('#<%=DateTo.ClientID %>');

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

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

Right to left

DatePickerDemo.aspx
<div class="einput" style="direction: rtl;">
<% Date4.DatePicker().ChangeMonth().ChangeYear(); %>
<awe:Ocon runat="server" ID="Date4" />
</div>

TimePicker

DatePickerDemo.aspx
<% Tmp1.TimePicker(); %>
<awe:Ocon runat="server" ID="Tmp1" />



Comments