在日期時間選擇器中為當前時間增加4個小時

Question

如何從日期時間選擇器的startDate到endDate增加4小時？

$(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);
    });
});

Answer 1

您的e.date對象是Moment實例。 如您在文檔中所見，可以在它們上使用.add和.subtract函數：

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

---

至於評論：

要設置默認日期，請使用defaultDate選項。 它適用於Moment和本機Date ：

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

也擺脫了dp.change事件處理程序，您不需要那些回調即可設置默認日期。 除非您當然要保持它們的鏈接，否則請使用dp.change但要使用date函數而不是setMinDate和setMaxDate ：

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

如果你想給他們這樣的雙向鏈接，呼吁謹防無限循環date用不同的日期將引發新dp.change 。 盡管這在您的設置中不應該發生，但是如果您稍加調整，它可能會開始。

Answer 2

您是否嘗試過：要添加分鍾：

$('#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();
    });

希望這可以幫助。 謝謝