Estoy trabajando en una aplicación web simple usando nada más que Vanilla JS, HTML y CSS.
He creado un formulario que contiene varios campos de entrada de tipo "texto". Ahora quiero agregar un selector de fechas. Intenté agregar un campo de entrada del tipo "fecha", pero realmente no me gusta el diseño de este selector de fecha y no encontré ninguna forma de diseñar el calendario que aparece al hacer clic en este campo.
Mi primera pregunta es: ¿hay alguna forma de diseñar el calendario de un campo de entrada de tipo "fecha"?
Como asumo que la respuesta a esta pregunta es "no", he buscado una alternativa. Hay varios proyectos de GitHub que diseñan un calendario. Un ejemplo es este . Este ejemplo requiere agregar el código html a mi página web. Inicialmente, no mostraría calendar-div, por ejemplo, configurando su estilo para display: none en mi archivo css. También tendría que agregar un oyente a un campo de entrada de tipo "texto" y luego, al hacer clic en este campo, mostrar el calendario. Pero esto reorganizaría los campos de entrada debajo de este "selector de fecha", que no quiero. ¿Hay alguna manera de mostrar el calendario y dejar que se superponga con su entorno, por ejemplo, los campos de entrada debajo de este campo de "selección de fecha"?
También agradecería cualquier alternativa bien conocida para diseñar los selectores de fecha con nada más que Vanilla JS, HTML y CSS, si los hay.
Has hecho tu investigación y la respuesta es: No.
<input type="date"> o <input type="datetime-local"> son entradas HTML y depende del proveedor del navegador (Google, Mozilla, Apple) decidir cómo representarlas.
Si abre sus herramientas de desarrollo y habilita el shadow DOM, incluso puede inspeccionar los nodos creados por estas entradas, pero no se recomienda diseñarlos.
Es la vida de un desarrollador front-end en 2022 (y quizás más años por venir) introducir la dependencia del selector de fecha o crear un selector de fecha usted mismo si desea tener una apariencia o funcionalidad específica. Según mi experiencia, los selectores de fechas no son tan difíciles de hacer, pero hay que tener en cuenta todos los casos de esquina y los casos de borde localizados. Así que creo que es más fácil simplemente ir con una dependencia.
Si no desea traer un marco completo solo para el selector de fecha, hay varias opciones si las busca.
Es posible que le gusten los componentes web modernos y podría buscar un selector de fechas creado con componentes web. Estos no requieren ningún marco, solo un navegador compatible. Por lo general, vienen con sus propias hojas de estilo y JS con capacidad para cierta personalización, lo probaría.