Trigger another datetimepicker using jquery

Question

I want to open datepicker once I select date in another picker. For this we can see so many suggestions and answers in datepicker but I could not find solution for datetimepicker. The default datetimepicker I have used in my project is this

$('.datepicker').datetimepicker({
    format: 'MM/DD/YYYY',
    icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-chevron-up",
        down: "fa fa-chevron-down",
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove',
        inline: true
    }
});

try

$( "#QuoteDate" ).datepicker({
    minDate: 0, 
    changeMonth: true,
    changeYear: true,
    maxDate: "+2Y",
    onSelect: function( selectedDate ) {
        $( "#DueDate" ).datepicker("option", "minDate", selectedDate );
        setTimeout(function(){
            $( "#DueDate" ).datepicker('show');
        }, 16);
    }
});
$( "#DueDate" ).datepicker({
    changeMonth: true,
    changeYear: true,
    maxDate: "+2Y",
});

If I try to code like onSelect: as in datepicker it's not accepting. Please anyone helps me to find solution for this. onSelect date in this picker will call another picker.

Answer 1

I think you are looking for change event, so when you have picked a date in one of the datepicker, you can get a callback fired that it is changed, after that in openAnotherDatePicker function, you can try to get the selected value from the event of using jquery .val() function and pass the selected date to the next datepicker

UPDATE: here is live and working example for xdan datetimepicker:

var setMinDate = function( currentDateTime ){
	this.setOptions({minDate:currentDateTime});
};

$('#QuoteDate').datetimepicker({
  format:'d-m-Y h:i',
  onChangeDateTime:openAnotherDatePicker,
  closeOnDateSelect:true
 });
$('#DueDate').datetimepicker({
  format:'d-m-Y h:i',
  onShow:setMinDate,
  closeOnDateSelect:true
 })

function openAnotherDatePicker( selectedDate ) {
	$( "#DueDate" ).val($( "#QuoteDate" ).val());
	$( "#DueDate" ).datetimepicker('show');
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.min.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/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script>

<p>
Start <br /><input id="QuoteDate" type="text" value="12-11-2017 06:24">
<br />
End <br /><input id="DueDate" type="text" value="13-11-2017 06:24">
</p>

Answer 2

If you need to have linked datetimepicker take a look at Linked Pickers example in the docs.

You have to add a listner to dp.change event since the datetimepicker has no onSelect option. Note that 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
}

You can use show() function to make the second datetimepicker open.

Here a full live example:

var icons = {
  time: "fa fa-clock-o",
  date: "fa fa-calendar",
  up: "fa fa-chevron-up",
  down: "fa fa-chevron-down",
  previous: 'fa fa-chevron-left',
  next: 'fa fa-chevron-right',
  today: 'fa fa-screenshot',
  clear: 'fa fa-trash',
  close: 'fa fa-remove',
  //inline: true
};

$('#QuoteDate').datetimepicker({
  format: 'MM/DD/YYYY',
  useCurrent: false,
  minDate: moment().startOf('day'),
  maxDate: moment().add(2, 'years'),
  icons: icons
}).on('dp.change', function(e){
  console.log('change', e.date, e.oldDate);
  if( 
    ( e.date && !e.oldDate ) ||
    ( e.date && e.oldDate && !e.date.isSame(e.oldDate, 'day') )
  ){
    setTimeout(function(){
      $('#DueDate').data("DateTimePicker").show();
    }, 16);
  }
  $('#DueDate').data("DateTimePicker").minDate(e.date);
});

$('#DueDate').datetimepicker({
  format: 'MM/DD/YYYY',
  useCurrent: false,
  minDate: moment().startOf('day'),
  maxDate: moment().add(2, 'years'),
  icons: icons
}).on('dp.change', function(e){
  $('#QuoteDate').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"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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.1/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='QuoteDate'>
      <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='DueDate'>
      <input type='text' class="form-control" />
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
  </div>
</div>

Since you are using datetimepicker, you can have minDate: moment().startOf('day') instead of minDate: 0 and maxDate: moment().add(2, 'years') instead of maxDate: "+2Y" (see moment startOf() and add() docs for more info).

As suggested in the Linked Pickers example you have to use useCurrent: false option.