ASPxClientCalendar.SetSelectedDate(date) Method

Sets the calendar’s selected date.

Declaration

SetSelectedDate(
    date: Date
): void

Parameters

Name	Type	Description
date	Date

A date object that specifies the calendar’s selected date.

Remarks

Use the SetSelectedDate method to specify the calendar’s selected date that is a date-time representation of the of the calendar’s value. The value edited by the calendar can also be accessed or changed via the ASPxClientEditBase.GetValue or ASPxClientEditBase.SetValue methods, respectively.

Example

This example illustrates how make the specified date visible, and then select it using the SetSelectedDate method.

JScript.js

javascript

function btn_OnClick(s, e) {
    if (!ASPxClientEdit.ValidateEditorsInContainer(null))
        return;
    var year = cmbYear.GetValue();
    var month = cmbMonth.GetValue();
    var day = spDay.GetValue(); ;
    var myDate = new Date(year, month, day);

    calendar.SetVisibleDate(myDate); // make the date visible
    calendar.SetSelectedDate(myDate); // select the date
}

function cmbMonth_OnSelectedIndexChanged(s, e) {
    var month = parseInt(cmbMonth.GetValue());
    var maxDay;
    switch (month) {
        case 1:
            maxDay = 28;
            break;
        case 3:
            maxDay = 30;
            break;
        case 5:
            maxDay = 30;
            break;
        case 8:
            maxDay = 30;
            break;
        case 10:
            maxDay = 30;
            break;
        default:
            maxDay = 31;
    }

    spDay.SetMinValue(1);
    spDay.SetMaxValue(maxDay);
}

Default.aspx

aspx

<table>
    <tr>
        <td>
            <dx:ASPxComboBox ID="cmbYear" runat="server" ClientInstanceName="cmbYear">
                <Items>
                    <dx:ListEditItem Text="2012" Value="2012" />
                    <dx:ListEditItem Text="2011" Value="2011" />
                    <dx:ListEditItem Text="2010" Value="2010" />
                    <dx:ListEditItem Text="2009" Value="2009" />
                    <dx:ListEditItem Text="2008" Value="2008" />
                    <dx:ListEditItem Text="2007" Value="2007" />
                </Items>
                <ValidationSettings RequiredField-IsRequired="true" Display="Dynamic" />
            </dx:ASPxComboBox>
        </td>
        <td>
            <dx:ASPxComboBox ID="cmbMonth" runat="server" ClientInstanceName="cmbMonth">
                <Items>
                    <dx:ListEditItem Text="January" Value="0" />
                    <dx:ListEditItem Text="February" Value="1" />
                    <dx:ListEditItem Text="March" Value="2" />
                    <dx:ListEditItem Text="April" Value="3" />
                    <dx:ListEditItem Text="May" Value="4" />
                    <dx:ListEditItem Text="June" Value="5" />
                    <dx:ListEditItem Text="July" Value="6" />
                    <dx:ListEditItem Text="August" Value="7" />
                    <dx:ListEditItem Text="September" Value="8" />
                    <dx:ListEditItem Text="October" Value="9" />
                    <dx:ListEditItem Text="November" Value="10" />
                    <dx:ListEditItem Text="December" Value="11" />
                </Items>
                <ClientSideEvents SelectedIndexChanged="cmbMonth_OnSelectedIndexChanged" />
                <ValidationSettings RequiredField-IsRequired="true" Display="Dynamic" />
            </dx:ASPxComboBox>
        </td>
        <td>
            <dx:ASPxSpinEdit ID="spDay" runat="server" MinValue="1" MaxValue="30">
                <ValidationSettings RequiredField-IsRequired="true" Display="Dynamic" />
            </dx:ASPxSpinEdit>
        </td>
        <td>
            <dx:ASPxButton ID="ASPxButton1" runat="server" Text="Select Date" AutoPostBack="false">
                <ClientSideEvents Click="btn_OnClick" />
            </dx:ASPxButton>
        </td>
    </tr>
    <tr>
        <td colspan="4">
            <dx:ASPxCalendar ID="ASPxCalendar1" runat="server" ClientInstanceName="calendar">
                <DayStyle>
                    <Paddings PaddingBottom="40px" PaddingRight="40px" />
                    <Border BorderColor="#888888" BorderWidth="1px" BorderStyle="Solid"></Border>
                </DayStyle>
            </dx:ASPxCalendar>
        </td>
    </tr>
</table>