如何让我的 HTML 表单日期输入仅允许使用 JavaScript、React 和 HTML 选择一周中的特定日期？

Question

我正在尝试让我的表单日期输入只允许选择星期四、星期五和星期六。但我似乎找不到办法。

是否有一些 JavaScript 或 HTML 代码可以用来解决这个问题？

这是我当前的代码

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;

Answer 1

你可以试试这个吗？

您还需要在 cmd 中安装：npm install react-datepicker --save

() => {
 const [startDate, setStartDate] = useState(null);
 const isWeekday = (date) => {
  const day = getDay(date);
  return day !== 0 && day !== 6;
};
return (
  <DatePicker
     selected={startDate}
     onChange={(date) => setStartDate(date)}
     filterDate={isWeekday}
     placeholderText="Select a weekday"
  />
 );
};

使用此代码，您可以更改日期

return day !== 0 && day !== 6;

Select_weekday_Img

Answer 2

<input type="date" /> 不允许禁用一周中的特定日期。参见 here (MDN docs)。

在这种情况下，您可以

阻止表单提交并显示无效日期选择的正确验证消息。
或者，使用第三方反应日期 picker/calendar 库（或者，如果你有时间，实现一个日期选择器）。

我建议 react-dates(Github link)，以防您选择选项 2。不过请记住导入的大小。

<SingleDatePickerWrapper isDayBlocked={isDayBlocked} autoFocus />

Here(Storybook) is a variant/example which blocks day selection for Fridays. Link to the corresponding code(Gtihub) .

Answer 3

如果你会用datepicker js就很简单了

 $("#datepicker").datepicker({
      beforeShowDay: function (d) {
         var day = d.getDay();
         return [day != 0 && day != 1 && day != 2 && day != 3];
     },
});

完整的工作示例：

<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>

如何让我的 HTML 表单日期输入仅允许使用 JavaScript、React 和 HTML 选择一周中的特定日期？

How do I get my HTML form date input to only allow specific days of the week to be chosen using JavaScript, React and HTML?

javascript

html

reactjs

date

calendar