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

标签 javascript html reactjs date calendar

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

我可以使用一些 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;

最佳答案

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

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

enter image description here

完整的工作示例:

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

关于javascript - 如何让我的 HTML 表单日期输入仅允许使用 JavaScript、React 和 HTML 选择一周中的特定日期?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68660450/

相关文章:

javascript - 使用 Cordova、javascript 增强现实

html - anchor 标记在 IE7 中不起作用

html - 为日期创建范围 slider

reactjs - 连接路由器类型错误: Cannot read property 'dispatch' of undefined

javascript - ReactJS,更改存储在状态数组中的img src

angular - 像 AngularJS 中的作用域注入(inject),用于更现代的库

javascript - 如何使用 ES6 和 Node Js 删除 txt 文件中的重复项?

javascript - 使用ajax刷新谷歌地图标记和infoBubbles

javascript - ReactKonva不支持类型 "div"

html - 我怎样才能让这段代码只在我想要的地方应用样式?