Quiero que aparezca un selector de fecha cuando hago clic en un texto o una imagen. Estoy usando reactjs. Estoy usando el input type="date" no la biblioteca React-datepicker.
Aquí está mi código:
import { useRef } from "react"; const add = () => { const interviewDateRef = useRef(); const handleInterviewDateClick = () => { interviewDateRef.current.focus(); }; return ( <> <button onClick={handleInterviewDateClick}>Change Date</button> <input type="date" ref={interviewDateRef} className="hidden" /> </> ); }; export default add;Aquí está el codeandbox .
Quiero que el selector de fechas funcione normalmente, pero también que aparezca al hacer clic en un texto o una imagen. ¿Cómo puedo hacer eso?
Gracias.
Puede lograr hacer esto abriendo el menú desplegable en el enfoque. Desde hacer clic en el botón, enfoque la entrada.
Aquí está cómo hacerlo
// Get a hook function const {useRef} = React; const Add = () => { const interviewDateRef = useRef(); const handleInterviewDateClick = () => { interviewDateRef.current.focus(); }; return ( <div> <button onClick={handleInterviewDateClick}>Change Date</button> <input type="date" ref={interviewDateRef} className="hidden" /> </div> ); }; // Render it ReactDOM.render( <Add />, document.getElementById("react") ); .input-container input { border: none; box-sizing: border-box; outline: 0; padding: .75rem; position: relative; width: 100%; } input[type="date"]::-webkit-calendar-picker-indicator { background: transparent; bottom: 0; color: transparent; cursor: pointer; height: auto; left: 0; position: absolute; right: 0; top: 0; width: auto; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>Consulte esta respuesta SO para obtener más información
Creo que no hay necesidad de reaccionar JS si está utilizando la fecha de tipo de entrada, entonces automáticamente cuando hace clic en ella, aparece la fecha en una ventana de selección que puede editar con CSS
El elemento de etiqueta puede hacer exactamente lo que está buscando sin ningún javascript adicional. Siempre que la label for ( htmlFor en React) esté vinculada a la identificación de la entrada o la entrada esté anidada en la label , debería abrir el calendario. Sin embargo, puede haber algunas diferencias entre navegadores aquí.
<> <label htmlFor="input-id">Change Date</button> <input id="input-id" type="date" /> </>