在当天的时间选取器中禁用时间无法正常工作

Disabling times in a timepicker on current day doesn't work properly

本文关键字:时间 常工作 工作 选取      更新时间:2023-09-26
<body>
    <p id="datepairExample">
        <input type="text" id="date" class="date start" /> <input id="time"
        type="text" class="time start" />
    </p>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/datepair.js"></script>
<script type="text/javascript" src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/jquery.datepair.js"></script>
<script type="text/javascript" src="js/jquery.timepicker.js"></script>
<script type="text/javascript" src="js/site.js"></script>

<script>
    $(document).ready(function() {
        $('#datepairExample .time').timepicker({
        'showDuration' : true,
        'timeFormat' : 'g:ia'
    });
    $('#datepairExample .date').datepicker({
        startDate : "0d"
    });
    $('#datepairExample .date').datepicker().on('changeDate', function(ev) {
        var x = new Date();
        var s = document.getElementById("date").value + "";
        if (s.charAt(0) == '0') {
            s = s.substring(1, s.length);
        }
        if (x.toLocaleDateString() == s) {
            alert("abc");
            $('#datepairExample .time').timepicker({
                'disableTimeRanges' : [ [ '12am', x ] ]
            });
        }
        /* else{
            alert("pqr");
            $('#datepairExample .time').timepicker({
                'showDuration' : true,
                'timeFormat' : 'g:ia'
            });
        } */
    });
    //$("#datepairExample .date").datepicker("option", "startDate", -1);
    /*$(function() {
        $("#datepairExample .date").datepicker({
            numberOfMonths : 3,
            showButtonPanel : true,
            minDate : x
        });
    }); */
    // initialize datepair
    $('#datepairExample').datepair();
    });
  // initialize input widgets first
  </script>
如果在日期选取器中仅首先选择当前日期,则禁用时间

工作正常,如果在任何日期之后选择当前日期,则禁用时间不起作用。

所以基本上,只有当时间是要选择的第一项时,才会禁用时间,即使选择的日期不是当前日期,禁用后也不会启用日期。

我使用了"alert"语句,以便通过再次选择日期来检查块是否正在执行,它们正在执行,但输出没有变化。提前感谢任何将在这方面帮助我的人。

试试这个

function getCurrentTime(date) {
        var hours = date.getHours(),
            minutes = date.getMinutes(),
            ampm = hours >= 12 ? 'pm' : 'am';
      hours = hours % 12;
      hours = hours ? hours : 12; // the hour '0' should be '12'
      minutes = minutes < 10 ? '0'+minutes : minutes;
      return hours + ':' + minutes + ' ' + ampm;
    }
    var timeOptions = {
            'timeFormat': 'h:i A',
            'disableTimeRanges': [['12am', getCurrentTime(new Date())]]
        };

你可以使用它

 var timeOptions = {
        'timeFormat': 'h:i A',
        'minTime': getCurrentTime(new Date())
    };