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:
<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>
- 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>
Comentarios
Publicar un comentario