问题
I'm using bootstrap datetimepicker, how do I add one day in datetimepicker bootstrap minDate
?
I want to filter the minDate
for more 1 day. For example my checkIn
datetimepicker is 02/16/18 then the the date to 02/16/18 is disabled in checkOut
datetimepicker.
<script>
$(function () {
$('#CheckIn').datetimepicker({
format: 'MM/DD/YYYY'
});
$('#CheckOut').datetimepicker({
useCurrent: false,//Important! See issue #1075
format: 'MM/DD/YYYY'
});
$("#CheckIn").on("dp.change", function (e) {
$('#CheckOut').data("DateTimePicker").minDate(e.date);
});
$("#CheckOut").on("dp.change", function (e) {
$('#CheckIn').data("DateTimePicker").maxDate(e.date);
});
});
</script>
回答1:
As the docs says, dp.change:
Fired when the date is changed.
Parameters:
e = { date, //date the picker changed to. Type: moment object (clone) oldDate //previous date. Type: moment object (clone) or false in the event of a null }
since e.date
is a moment object you can use add method.
Here a live example:
$(function () {
$('#CheckIn').datetimepicker({
format: 'MM/DD/YYYY'
});
$('#CheckOut').datetimepicker({
useCurrent: false,//Important! See issue #1075
format: 'MM/DD/YYYY'
});
$("#CheckIn").on("dp.change", function (e) {
if( e.date ){
e.date.add(1, 'day');
}
$('#CheckOut').data("DateTimePicker").minDate(e.date);
});
$("#CheckOut").on("dp.change", function (e) {
$('#CheckIn').data("DateTimePicker").maxDate(e.date);
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id="CheckIn">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id="CheckOut">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
回答2:
Thanks for the great help. It works for me too. But I need to add 3 days. if anyone need my code then use it.
$(function (){
$('#datetimepicker1_1').datetimepicker({
minDate: new Date(),
date: new Date()
});
var endDate = new Date();
endDate.setDate(endDate.getDate()+4);
$('#datetimepicker2_1').datetimepicker({
minDate:endDate,
date: endDate
});
$("#datetimepicker1_1").on("dp.change", function (e){
if (e.date){
e.date.add(4,'day');
}
$('#datetimepicker2_1').data("DateTimePicker").minDate(e.date);
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<input onkeyup="first_step_val()" maxlength="100" id='datetimepicker1_1' type="text" name="start_date" required="required" class="form-control" />
<input onkeyup="first_step_val()" maxlength="100" type="text" id='datetimepicker2_1' name="end_date" required="required" class="form-control" />
来源:https://stackoverflow.com/questions/48815270/bootstrap-datetimepicker-add-1-day-to-mindate