Question

使用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();

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

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

3 个答案: