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

zpgglvta 于 2022-11-22 发布在 jQuery

关注(0)|答案(4)|浏览(214)

我正在使用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>

jquery

来源：https://stackoverflow.com/questions/25697178/how-to-set-end-date-greater-the-start-date-using-jquery-date-time-picker

4条答案

按热度按时间

nlejzf6q1#

当选择结束日期时，检查开始和结束日期的数据差异，可以尝试此操作。

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

    }
});

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

赞(0）回复(0）举报 2022-11-22

8fq7wneg2#

创建一个 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...'); } } });

赞(0）回复(0）举报 2022-11-22

hkmswyz63#

我已经使用正常的 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();

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

赞(0）回复(0）举报 2022-11-22

11dmarpk4#

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

赞(0）回复(0）举报 2022-11-22

我来回答

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

4条答案

相关问题

热门标签

最新问答

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

4条答案

相关问题

热门标签

最新问答

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