0
372
Vistas¿Cómo obtengo la entrada de fecha de mi formulario HTML para permitir que solo se elijan días específicos de la semana usando JavaScript, React y HTML?
Estoy tratando de obtener la entrada de fecha de mis formularios para permitir que solo se seleccionen jueves, viernes y sábado. Pero parece que no puedo encontrar una manera de hacerlo.
¿Hay algún código JavaScript o HTML que pueda usar para resolver este problema?
Aquí está mi código actual
import React from 'react'; const CustomForm = () => { const addTwoWeeks = function () { let today = new Date(); today.setDate(today.getDate() + 14); let dd = today.getDate(); let mm = today.getMonth() + 1; let yyyy = today.getFullYear(); if (dd < 10) { dd = '0' + dd } if (mm < 10) { mm = '0' + mm } today = yyyy + '-' + mm + '-' + dd; return today; } return ( <form> <label htmlFor="date">Pick-Up Date:</label> <input type="date" id="date" name="date" min={addTwoWeeks()} required /> </form> ) } export default CustomForm;2 Respuestas
Responde la pregunta0
Es bastante simple si usa datepicker js
$("#datepicker").datepicker({ beforeShowDay: function (d) { var day = d.getDay(); return [day != 0 && day != 1 && day != 2 && day != 3]; }, }); 
Ejemplo de trabajo completo:
<html> <head> <title>HTML</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" crossorigin="anonymous" referrerpolicy="no-referrer"/> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer" ></script> <script> $(function () { $("#datepicker").datepicker({ beforeShowDay: function (d) { var day = d.getDay(); return [day != 0 && day != 1 && day != 2 && day != 3]; }, }); }); </script> </head> <body> <input type="text" id="datepicker" /> </body> </html>0
El <input type="date" /> no permite deshabilitar días específicos de la semana. Ver aquí (documentos de MDN) .
En ese caso, puede
- Evite el envío de formularios y muestre un mensaje de validación adecuado para la selección de días no válidos.
- O bien, utilice una biblioteca de calendario/selector de fecha de reacción de terceros (o, si tiene tiempo, implemente un selector de fecha).
Recomiendo las fechas de reacción (enlace de Github) en caso de que opte por la opción 2. Sin embargo, tenga en cuenta el tamaño de la importación.
<SingleDatePickerWrapper isDayBlocked={isDayBlocked} autoFocus />Aquí (Storybook) hay una variante/ejemplo que bloquea la selección de días para los viernes. Enlace al código correspondiente (Gtihub) .