Implementar una caja de texto y un calendario en una página web

Para implementar la funcionalidad de una caja de texto y la selección de la fecha con un control de calendario se puede hacer de lo siguiente:

• Crear la caja de texto y el control de calendario en la forma y asignarles el atributo ClientInstanceName para poder nombrarlos con javascript en el lado del cliente.
• Agregar el atributo ClientVisible al control de calendario y ponerlo en false para que no esté visible en el cliente.
• Agregar el evento GotFocus a la caja de texto .
• Agregar el evento OnSelectionChanged para el control de calendario.

El markup de estos controles debe quedar así:

<dx:ASPxTextBox ID="txtRequiredDate" runat="server" Width="170px" ClientInstanceName="txtRequiredDate">
     <ClientSideEvents GotFocus="OnGotFocus" />
</dx:ASPxTextBox>

<dx:ASPxCalendar ID="calRequiredDate" runat="server" ClientInstanceName="calRequiredDate" ClientVisible="false">
     <ClientSideEvents SelectionChanged="OnSelectionChanged" />
</dx:ASPxCalendar>

• Luego hay que agregar el código javascript necesario para mostrar el calendario, para obtener la fecha y ponerla en la caja de texto y para volver a esconderlo. Esto debe quedar de la siguiente manera:

<script language="javascript" type="text/javascript">

    function OnGotFocus(s, e) {

        calRequiredDate.SetVisible(true);

    }

    function OnClick(s, e) {

        calRequiredDate.SetVisible(false);

    }

    function OnSelectionChanged() {

        var date = calRequiredDate.GetSelectedDate();

        txtRequiredDate.SetText(date.toDateString());

        calRequiredDate.SetVisible(false);

    }

</script>