当前位置: 动力学知识库 > 问答 > 编程问答 >

How to set end date greater the start date using jquery date time picker

问题描述:

Am using jquery date time picker set an event's start and end dates.But how can I prevent to select event end date should greater than event start date. I end date selected first then start date should be less than end date.

I have tried using the following code,but didn't worked for me:

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

}

});

And my html for the page is like:

 <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>

网友答案:

Check data difference of start & end date when end date is selected and can try this..

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

    }
});

You can also apply this date difference scripts for start date selection.

网友答案:

Create a js function and use that function as below.

  • Step 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; } }
  • -

Use this function in OnSelect event as below.

  • Step 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...'); } } });

分享给朋友:
您可能感兴趣的文章:
随机阅读: