在日期时间选择器中添加4小时的当前时间

时间:2015-04-08 09:25:30

标签: javascript jquery jquery-ui

如何从我的日期时间选择器中添加4小时' startDateendDate

$(function() {
    $('#startDate').datetimepicker();
    $('#endDate').datetimepicker();
    $("#startDate").on("dp.change", function(e) {
        $('#endDate').data("DateTimePicker").setMinDate(e.date);
    });
    $("#endDate").on("dp.change", function(e) {
        $('#startDate').data("DateTimePicker").setMaxDate(e.date);
    });
});

2 个答案:

答案 0 :(得分:0)

您的e.date个对象是Moment的实例。如您所见in the documentation,您可以使用.add.subtract函数:

$('#endDate').data("DateTimePicker").setMinDate(e.date.add(4, 'hours'));
// ...
$('#startDate').data("DateTimePicker").setMaxDate(e.date.subtract(4, 'hours'));

至于评论:

要设置默认日期,请使用defaultDate选项。它适用于Moment和本地Date s:

$('#startDate').datetimepicker({ defaultDate: Date() });
$('#endDate').datetimepicker({
    defaultDate: $('#startDate').data("DateTimePicker").date().add(4, 'hours')
});

除了dp.change事件处理程序之外,您不需要这些回调来设置默认日期。除非您想要将它们保持关联,否则请使用dp.change但使用date功能代替setMinDatesetMaxDate

$("#startDate").on("dp.change", function(e) {
    $('#endDate').data("DateTimePicker").date(e.date.add(4, 'hours'));
});

如果你想以两种方式链接它们,请注意无限循环,使用不同的日期调用date将触发新的dp.change。虽然这不应该在您的设置中发生,但如果您稍微调整它,可能会开始。

答案 1 :(得分:0)

你试过这个: 添加分钟:

$('#Start').data("DateTimePicker").date(e.date.add(30, 'minutes'));

添加小时数:

 $('#Start').data("DateTimePicker").date(e.date.add(4, 'hours'));

使用下面的脚本,您可以比较开始和结束日期,如果它们相等或开始日期时间是在结束日期时间之后,您可以根据用户新选择的日期时间再次设置默认日期时间,我总是设置服务器端的默认日期时间:

//Server side default setup for first run
Start = DateTime.Now;
End = DateTime.Now.AddMinutes(30);

这是js脚本:

  <script type='text/javascript'>

        $(function()
        {         
         $('#Start').datetimepicker({
                            useCurrent: false //Important! See issue #1075
                        });
         $('#End').datetimepicker({
                            useCurrent: false //Important! See issue #1075
                        });
         $('#Start').on("dp.change",
                            function(e)
                            {
                                if (dateSorter($('#End').val(), $(this).val()) === -1 || dateSorter($('#End').val(), $(this).val()) === 0)
                                    // if ($('#End').val() < $(this).val())
                                {
                                 //   console.log("End date "+$('#End').val()+ " is before start date: "+ $(this).val());
                                    $('#End').data("DateTimePicker").date(e.date.add(30, 'minutes'));
                                }
                               // add your other scripts for example update something on the page, updateAvailableSeats();
                            });
      $('#End').on("dp.change",
                            function(e)
                            {
                                if (dateSorter($('#Start').val(), $(this).val()) === 1 || dateSorter($('#Start').val(), $(this).val()) === 0)
                                    // if ($('#Start').val() > $(this).val())
                                {
                                 //   console.log("Start date " + $('#Start').val() + " is after end date: " + $(this).val());
                                    $(this).data("DateTimePicker").date(e.date.add(30, 'minutes'));
                                }
                            });
      //  updateAvailableSeats();
    });

希望这会有所帮助。 感谢