CODEWITHSUNDEEP
jquerydatetimepickereonasdan-datetimepicker
DatsunBing
DatsunBing

Reputation: 9076

Can not set both minDate and maxDate in eonasdan datetimepicker

I have an eventStartDate and eventEndDate.

When the start date is selected, I want to set min and max dates for the end date.

Below code works, with one quirk:

when you select the end date, it does not accept the date first time, instead it defaults to today's date. When you select it a second time, it works.

  $('#start_date_picker').on('dp.change', function () {

    let eventStartDate = moment($('#start_date').val(), 'DD/MM/YYYY');
    let minEventEndDate = eventStartDate.clone().add(1, 'days');
    let maxEventEndDate = eventStartDate.clone().add(30, 'days');

    $('#end_date_picker').data("DateTimePicker").clear();
    $('#end_date_picker').data("DateTimePicker").maxDate(maxEventEndDate);
    $('#end_date_picker').data("DateTimePicker").minDate(minEventEndDate);
});

Upvotes: 1

Views: 794

Answers (1)

Hikarunomemory
Hikarunomemory

Reputation: 4305

I guess there's no #start_date element in the HTML.

If you want to set end_date_picker's minDate and maxDate after selected a date in #start_date_picker, you can use the variable that dp.change() passed.

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 
}


$(function () {
  $('#start_date_picker').datetimepicker();
  $('#end_date_picker').datetimepicker();
});

$('#start_date_picker').on('dp.change', function (e) {

    let eventStartDate = moment(e.date, 'DD/MM/YYYY');
    let minEventEndDate = eventStartDate.clone().add(1, 'days').startOf('day');
    let maxEventEndDate = eventStartDate.clone().add(30, 'days').endOf('day');

    $('#end_date_picker').data("DateTimePicker").clear();
    $('#end_date_picker').data("DateTimePicker").maxDate(maxEventEndDate);
    $('#end_date_picker').data("DateTimePicker").minDate(minEventEndDate);
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<div class='input-group date' id='start_date_picker'>
  <input type='text' class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

<div class='input-group date' id='end_date_picker'>
  <input type='text' class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

Upvotes: 1

Related Questions