2

我的表单中有两个字段。一个是使用 jQuery 日期选择器的日期字段，另一个是 jQuery 时间选择器。现在的问题是，如果我在日期字段中选择今天的日期，那么时间选择器不应该显示过去的时间。例如。如果现在的时间是 17:00，则时间选择器不应将 17:00 之前的时间显示为可选。这是我的代码，

$(function() {
    $( ".datepicker" ).datepicker({minDate:'0'});
    $('.timepicker').timepicker();
});

$("#date").click(function(){
    if($("#date").val()=='04/17/2012')
    {
        updatetimefortoday();
    }
});![enter image description here][1]

function updatetimefortoday()
{
    $('.timepicker').timepicker({
        onHourShow: timepickerRestrictHours
    });

    function timepickerRestrictHours(hour)
    {
        if ((hour > 17))
        {
            return true;
        }
        return false;
    }
}

现在的问题是，如果我们调用updatetimefortoday()on函数document.ready，它会正确显示时间选择器。但是，如果我们在点击代码中显示的日期字段时执行此操作，则它不起作用。

在此处输入图像描述

这是选择日期后的预期输出。

4

5 回答 5

5

在对它进行了更多工作之后，我得出的结论是，最好的方法是始终调用 onHourShow 函数并验证该函数中选定的日期。我认为这更好，因为禁用的时间仍然对用户可见，而不是空白单元格。

$('#date').datepicker({
    minDate: 0
});
$('#time').timepicker({
    onHourShow: function( hour ) { 
        var now = new Date();
        // compare selected date with today
        if ( $('#date').val() == $.datepicker.formatDate ( 'mm/dd/yy', now ) ) {
            if ( hour <= now.getHours() ) {
                return false;
            }
        }
        return true;
    }
});​

这是一个工作示例：http: //jsfiddle.net/fgelinas/kUFgT/4/

至于Aymad Safadi报告的开始和结束时间问题，我会看看我能做什么，这绝对是一个错误。

于 2012-04-18T23:11:11.590 回答
0

时间选择器已附加到文档就绪功能的输入。我认为您可以通过这种方式更改 onHourShow 属性：

$('.timepicker').timepicker( 'option', 'onHourShow', timepickerRestrictHours);
于 2012-04-17T12:49:16.437 回答
0

尝试@FrancoisGelinas 的方法（这是标准的 jQuery UI 方法），只使用库的选项。在这种情况下：“小时”。

就像是：

$('.datepicker').datepicker({
    minDate:'0',
    onSelect: function()
    {

        if($("#date").val()=='04/18/2012')
        {
            $('.timepicker').timepicker( 'option', 'hours', {starts: 05, ends: 23});
        }
        else
        {
            $('.timepicker').timepicker( 'option', 'hours', {starts: 0, ends: 23});
        }
    }
});
$('.timepicker').timepicker();​

在这里演示：http: //jsfiddle.net/JbjLg/

也就是说，timepicker 库本身似乎存在一个错误。如果您选择大于 11 的“开始”小时，则所有小时都将消失。我强烈建议您对此进行调查，并通过电子邮件或他的GitHub网站上的问题通知作者。

于 2012-04-18T13:31:28.380 回答
0 
    <script>
        $(function() {
        $( ".datepicker" ).datepicker({
          changeMonth: true,
          changeYear: true,
          minDate: 0
        });
        });

        $(function() {
        $( ".timepicker" ).timepicker({
            minTime: { hour: new Date().getHours(), minute: new Date().getMinutes() },
        });
        });

    </script>

不要忘记这些：

    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
    <script src="https://raw.githubusercontent.com/fgelinas/timepicker/master/jquery.ui.timepicker.js"></script>
于 2016-08-02T09:02:46.883 回答
0

你可以用这个——

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>

        <div id="example">
            <div class="demo-section k-content">

                <h4>Start time</h4>
                <input id="start" value="8:00 AM" style="width: 100%;" />

                <h4 style="margin-top: 2em;">End time</h4>
                <input id="end" value="8:30 AM" style="width: 100%;" />

            </div>
            <script>
                $(document).ready(function() {
                    function startChange() {
                        var startTime = start.value();

                        if (startTime) {
                            startTime = new Date(startTime);

                            end.max(startTime);

                            startTime.setMinutes(startTime.getMinutes() + this.options.interval);

                            end.min(startTime);
                            end.value(startTime);
                        }
                    }

                    //init start timepicker
                    var start = $("#start").kendoTimePicker({
                        change: startChange
                    }).data("kendoTimePicker");

                    //init end timepicker
                    var end = $("#end").kendoTimePicker().data("kendoTimePicker");

                    //define min/max range
                    start.min("8:00 AM");
                    start.max("6:00 PM");

                    //define min/max range
                    end.min("8:00 AM");
                    end.max("7:30 AM");
                });
            </script>

            <style>

            </style>
        </div>

</body>
</html>

于 2016-08-10T16:26:07.237 回答