Gijgo DateTimePicker 过去日期禁用

Question

我在我的 meteor 应用程序中通过 React 使用了 Gijgo DateTimePicker。它运作良好。现在我试图禁用所有过去的日期。我在这个 docs 中找到了 disableDates 选项。但是有一个选项可以禁用特定日期。如何使用 datetimepicker 禁用所有过去的日期？因为我需要日期和时间。

Gijgo 示例：1

<input id="datepicker" width="312" />
 <script>
    $('#datepicker').datepicker({
        value: '11/10/2017',
        disableDates: [new Date(2017,10,11), '11/12/2017']
    });
 </script>

Gijgo 示例：2

 <script>
    $('#datepicker').datepicker({
        value: '11/11/2017',
        disableDates:  function (date) {
            var disabled = [10,15,20,25];
            if (disabled.indexOf(date.getDate()) == -1 ) {
                return true;
            } else {
                return false;
            }
        }
    });
 </script>

我的代码：

 $("#dateTime").datetimepicker({
            format: "ddd, mmm d, yyyy h:MM TT",
            uiLibrary: "bootstrap4",
            iconsLibrary: "fontawesome",
            modal: true,
            footer: true,
            //value: "03/01/2019",
            disableDates: function(date) {
                const currentDate = new Date();
                return date > currentDate ? true : false;
            }
        });

Answer 1

您可以通过像

这样的操作来禁用过去的日期

        $('#datetimepicker').datetimepicker({
        datepicker: { 
         disableDates:  function (date) {
            const currentDate = new Date();
            return date > currentDate ? true : false;
        }
        }

    });

dateDisable 函数将比较当前日期选择器 window 中显示的每个日期，并通过检查 return 值来决定是否禁用。

如果您想要允许当前日期，请执行以下操作

    $('#datepicker').datetimepicker({
    datepicker: {
    disableDates:  function (date) {
    // allow for today
     const currentDate = new Date().setHours(0,0,0,0);
     return date.setHours(0,0,0,0) >= currentDate ? true : false;
    }},

});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Example</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://unpkg.com/gijgo@1.9.11/js/gijgo.min.js" type="text/javascript"></script>
    <link href="https://unpkg.com/gijgo@1.9.11/css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>
<body style="padding: 8px;">
 <input id="datetimepicker" width="312" />
 <script>
    $('#datetimepicker').datetimepicker({
        datepicker: {
        disableDates:  function (date) {
            const currentDate = new Date();
     return date > currentDate ? true : false;
        }
        }
    });
 </script>
</body>
</html>

Gijgo DateTimePicker 过去日期禁用

Gijgo DateTimePicker past date disable

javascript

date

datepicker

meteor

reactjs