如何使用jquery日期时间选择器将结束日期设置为大于开始日期

Question

Am使用jquery日期时间选择器设置事件的开始和结束日期。但是我如何防止选择事件结束日期应该大于事件开始日期。我先选择结束日期，然后开始日期应小于结束日期。

我尝试过使用以下代码，但对我不起作用：

    $('#startDate').datetimepicker({
        dayOfWeekStart : 1,
        lang:'en',
        minDate: new Date(),
        onSelect: function(dateText, inst){ 
          $("#endDate").datetimepicker('option', 'minDate', dateText);
       }  
    });
    $('#endDate').datetimepicker({
        dayOfWeekStart : 1,
        lang:'en',
        startDate:  new Date(),
        onSelect: function(dateText, inst){
          $("#startDate").datetimepicker('option', 'maxDate', dateText);
       }
    });

我的网页html是这样的：

   <form action="" method="POST">
    <div class="col-sm-2 col-lg-2">
        <div class="form-group "> 
            <input type="text" value="" id="startDate" name="startDate" class="form-control" autocomplete="off" placeholder="Start Date"/>
        </div>
        <div class="form-group "> 
            <input type="text" value="" autocomplete="off" id="endDate" name="endDate" class="form-control" placeholder="End Date"/>
        </div>
        <div class="form-group "> 
            <input type="text" value="" name="eventName" class="form-control" placeholder="Event Name"/>
        </div>
            <input type="submit" name="submit" value="Add Event" class="btn btn-primary">
    </div>
</form>

Answer 1

检查启动&选择结束日期时的结束日期，可以尝试此操作。。

$('#endDate').datetimepicker({
    dayOfWeekStart : 1,
    lang:'en',
    startDate:  new Date(),
    onSelect: function(dateText){
        var start_date = new Date($('#startDate').val()),
            end_date = new Date(dateText),
            diff  = new Date(end_date - start_date),
            days  = parseInt(diff/(1000*60*60*24), 10);
        if(days < 1){
            alert('End date should be greater than start date!')
            $(this).val('');
            return false;
        }
        //$("#startDate").datetimepicker('option', 'maxDate', dateText);
    }
});

您也可以将此日期差异脚本应用于开始日期选择。

Answer 2

创建一个js函数，并按如下方式使用该函数。

• 步骤1
• Date.prototype.DaysBetween = function () { var intMilDay = 24 * 60 * 60 * 1000; var intMilDif = arguments[0] - this; var intDays = Math.floor(intMilDif / intMilDay); if (intDays.toLocaleString() == "NaN") { return 0; } else { return intDays + 1; } }
-

在OnSelect事件中使用此函数，如下所示。

• 步骤2
• $('#startDate').datetimepicker({ dayOfWeekStart : 1, lang:'en', minDate: new Date(), onSelect: function(dateText, inst){ var tempstartDate = $('#startDate').val(); var tempEndDate = $('#endDate').val(); var dateDiff = tempstartDate.DaysBetween(tempEndDate); // use this function to find the date diff. if(dateDiff > 1 ){ alert('Your msg...'); } }
});

$('#endDate').datetimepicker({ dayOfWeekStart : 1, lang:'en', startDate: new Date(), onSelect: function(dateText, inst){ var tempstartDate = $('#startDate').val(); var tempEndDate = $('#endDate').val(); var dateDiff = tempstartDate.DaysBetween(tempEndDate); // use this function to find the date diff. if(dateDiff > 1 ){ alert('Your msg...'); } } });

Answer 3

我已经使用普通的Javascript验证解决了这个验证问题

frm = document.forms['form_name'];
var startdate = frm.startDate.value.trim();
var enddate = frm.endDate.value.trim();
var start_date = new Date(start_date);
var end_date = new Date(end_date);
if((startdate != "" && enddate == "") || (startdate == "" && enddate != ""))
    alert('Please select start & end date');
else if(end_date < start_date)
    alert('End date cannot be before start date');
else
    frm.submit();

这解决了我在任何日期时间选择器库中验证开始日期和结束日期的问题

Answer 4

 jQuery('#yourIDSelector').datetimepicker({
        format:'d.m.Y H:00',
        dayOfWeekStart: 1,
        minDate: new Date()
 });