Otro par de controles muy útiles incluidos en la suite de controles Kendo UI, son los controles Kendo UI DatePicker y TimePicker con estos controles se logra que las interfaces web tengan una apariencia intuitiva y muy profesional como si se tratase de una aplicación de escritorio (Desktop).
Kendo UI DatePicker
Este control proporciona una manera muy intuitiva para la selección de una fecha, tiene un campo de texto en donde puedes teclear la fecha deseada o bien seleccionarla de un calendario dropdown que aparece al momento de activar el control, como muestro en la siguiente imagen.
Kendo UI DateTimePicker
Este control es similar al DateTimePicker, permite teclear horas y segundos o bien seleccionarlo de una lista de las horas del día, como muestro en la siguiente imagen.Ahora como ejemplo del uso de estos controles pondré el código de un formulario que tiene un control DatePicker, un DateTimePicker y unos radiobuttons que configuran la fecha y la hora de los controles según la opción seleccionada. La configuración de este ejemplo es igual a la configuración utilizada para el ejemplo de este post.. Aquí el código fuente JavaScript (dateTimeSample.js):
Aquí el código fuente de la página HTML:
Al ejecutarlo en el navegador lo veremos como en la siguiente imagen
Observamos como los controles datePicker y dateTimePicker cambian sus valores según la opción seleccionada en los radiobuttons. En la imagen al seleccionar la opción “yesterday”
Al seleccionar la opción “Last 24 hours” vemos el resultado en la siguiente imagen
Enlaces relacionados:
