0

我正在使用 datetimepicker 在表单中设置值。我一直试图限制用户选择开始时间之前的结束时间。我尝试设置mindate，hourmin，一个等于开始日期的新日期，但没有成功。根据我的看法，以下代码应该可以工作，但不能。

        <script src="../js/jquery-1.9.1.js"></script>
    <script src="../js/jquery-ui-1.10.3.custom.js"></script>
    <script src="../js/jquery-ui-timepicker-addon.js"></script>
    <script src="../js/jquery-ui-sliderAccess.js"></script>
    <script>

        $(function() 
            {

                var startDateTextBox = $('#startDate');
                var endDateTextBox = $('#endDate');
                var startTimeTextBox = $('#startTime');
                var endTimeTextBox = $('#endTime');
                startDateTextBox.datepicker(
                    {
                        minDate: ("setDate", '',new Date()),
                        hourGrid: 12,
                        minuteGrid: 15,
                        stepMinute: 15,

                        onClose: function(dateText, inst) {
                        if (endDateTextBox.val() != '') 
                        {

                            var testStartDate = startDateTextBox.datetimepicker('getDate');
                            var testEndDate = endDateTextBox.datetimepicker('getDate');
                            if (testStartDate > testEndDate)
                            endDateTextBox.datetimepicker('setDate', testStartDate);

                        }
                        else 
                        {
                            endDateTextBox.val(dateText);
                        }
                        },
                        onSelect: function (selectedDateTime){
                        endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate') );
                        }
                    }
                );
                startTimeTextBox.datetimepicker(
                {
                    timeOnly:true,
                    minuteGrid: 15,
                    stepMinute: 15,
                    minDate: ("setTime", '',new Date()),
                    timeFormat: 'hh:mm tt',
                    onClose: function(dateText, inst)
                    {
                        if (endTimeTextBox.val() != '') 
                        {
                        var testStartTime = startTimeTextBox.datetimepicker('getDate');
                        var testEndTime = endTimeTextBox.datetimepicker('getDate');
                        if(testStartTime > testEndTime)
                        endTimeTextBox.timepicker('setTime', testStartTime);
                        }
                        else
                        {
                            endTimeTextBox.val(dateText)
                        }
                    },
                    onSelect: function (selectedDateTime){
                    endTimeTextBox.datetimepicker('setDate', startTimeTextBox.datetimepicker('getDate') );
                    }
                }
                );
                endDateTextBox.datepicker(
                    {
                        hourGrid: 12,
                        minuteGrid: 15,
                        stepMinute: 15,

                        onClose: function(dateText, inst) 
                        {
                            if (startDateTextBox.val() != '') 
                            {
                                var testStartDate = startDateTextBox.datetimepicker('getDate');
                                var testEndDate = endDateTextBox.datetimepicker('getDate');
                                if (testStartDate > testEndDate)
                                startDateTextBox.datetimepicker('setDate', testEndDate);
                            }
                            else 
                            {
                                startDateTextBox.val(dateText);
                            }
                        },
                        onSelect: function (selectedDateTime){
                        startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate') );
                        }
                    }
                );
                endTimeTextBox.datetimepicker(
                {
                    timeOnly:true,
                    minuteGrid: 15,
                    stepMinute: 15,
                    timeFormat: 'hh:mm tt',

                    onClose: function(dateText, inst) 
                    {
                        if (startTimeTextBox.val() != '') 
                        {
                            var testStartTime = startTimeTextBox.datetimepicker('getDate');
                            var testEndTime = endTimeTextBox.datetimepicker('getDate');
                            if (testStartTime > testEndTime)
                            endTimeTextBox.datetimepicker('setDate', testStartTime);
                        }
                        else 
                        {
                            startTimeTextBox.val(dateText);
                        }
                    },
                    onSelect: function (selectedDateTime){
                    startTimeTextBox.datetimepicker('option', 'maxDate', endTimeTextBox.datetimepicker('getDate') );
                    }
                }
                );
            }
        );
    </script>

代码的逻辑似乎是对的，为什么它不起作用？到目前为止，我想出的是以下内容：

            $(function() 
        {
            var startDateTextBox = $('#startDate');
            var endDateTextBox = $('#endDate');
            startDateTextBox.datetimepicker(
                {
                    altField:"#startTimeALT",
                    altFieldTimeOnly: true,
                    timeFormat: "h:mm tt",
                    minDate: ("setDate", '',new Date()),
                    hourGrid: 12,
                    minuteGrid: 15,
                    stepMinute: 15,

                    onClose: function(dateText, inst) 
                    {
                        if (endDateTextBox.val() != '') 
                        {
                            var testStartDate = startDateTextBox.datetimepicker('getDate');
                            var testEndDate = endDateTextBox.datetimepicker('getDate');
                            if (testStartDate > testEndDate)
                            endDateTextBox.datetimepicker('setDate', testStartDate);
                        }
                        else 
                        {
                            endDateTextBox.val(dateText);
                        }
                        },
                        onSelect: function (selectedDateTime){
                        endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate') );
                    }
                }
                );
                endDateTextBox.datetimepicker(
                    {
                        minDate: ("setDate", '',new Date()),
                        altField:"#endTimeALT",
                        altFieldTimeOnly: true,
                        timeFormat: "h:mm tt",
                        hourGrid: 12,
                        minuteGrid: 15,
                        stepMinute: 15,

                        onClose: function(dateText, inst) 
                        {
                            if (startDateTextBox.val() != '') 
                            {
                                var testStartDate = startDateTextBox.datetimepicker('getDate');
                                var testEndDate = endDateTextBox.datetimepicker('getDate');
                                if (testStartDate > testEndDate)
                                startDateTextBox.datetimepicker('setDate', testEndDate);
                            }
                            else 
                            {
                                startDateTextBox.val(dateText);
                            }
                        },
                        onSelect: function (selectedDateTime){
                        startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate') );
                        }
                    }
                );
            }
        );

在上面的代码中，我使用 datetimepicker jquery 插件分隔了日期和时间字段。我这样做是为了更好地控制输入及其在数据库中的存储方式。我希望这将有助于我的查询，并允许更轻松的搜索和更新功能。这是用 php 编写的调度项目的一部分，jquery 支持用户交互。非常感谢您在这项工作中提供的任何帮助和建议！

4

1 回答 1

2

这个想法是对的，问题是你如何比较你的日期。我试过调用datepicker("getDate")，它返回一个字符串，我认为这在你的 datetimepicker 插件上是一样的。

您正在比较的字符串看起来像Wed Jun 12 2013 00:00:00 GMT+0200 (CEST)这里的相等性仅基于 Weekdate 的字典顺序。

但是如果你使用 JavaScript 方法 Date.parse()，你可以很容易地比较它们：

var testStartDate = startDateTextBox.datetimepicker('getDate');
var testEndDate = endDateTextBox.datetimepicker('getDate');
if (Date.parse(testStartDate) > Date.parse(testEndDate))
  endDateTextBox.datetimepicker('setDate', testStartDate);

有了这个要点，我有一个玩具网站，您可以在其中尝试验证，第一个日期已经有效：https ://gist.github.com/contradictioned/5871967

于 2013-06-26T21:45:41.903 回答