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