CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapdatetimepicker
hendraspt
hendraspt

Reputation: 969

How to use linked DateTime using Bootstrap DateTimePicker?

I have a form which contains Departure date and return date. And I want to set the minimum date in the return date field is the date of selected departure date. I already put the id in div tag or input tag, but nothing worked. Do you know why? 

<div class="form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Departure<span class="required"> *</span></label>
    <div class="input-group date form_datetime col-md-4 col-sm-4 col-xs-12" id="res_departure1" data-link-field="dtp_input1">
        <input class="form-control pull-right" size="16" type="text" value="" readonly required>
        <input type="hidden" id="dtp_input1"  name="res_departure" value="" />
        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Return<span class="required"> *</span></label>
    <div class="input-group date form_datetime col-md-4 col-sm-4 col-xs-12" id="res_return1" data-link-field="dtp_input2">
        <input class="form-control pull-right"  size="16" type="text" value="" readonly required>
        <input type="hidden" id="dtp_input2" name="res_return" value="" />
        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
      </div>
</div>

This is my js

$('.form_datetime').datetimepicker({
    //language:  'fr',
    format: "yyyy-mm-dd hh:ii",
    autoclose: true,
    todayBtn: true,
    startDate: new Date
});

$("#res_departure1").on("dp.change", function (e) {
    $('#res_return1').data("DateTimePicker").setMinDate(e.date);
});

Upvotes: 1

Views: 1412

Answers (3)

hendraspt
hendraspt

Reputation: 969

$('#res_departure1').datetimepicker().on('changeDate', function(ev) {
    var departureDate = ev.date;
    $('#res_return1').datetimepicker('setStartDate', departureDate);
});

$('#res_return1').datetimepicker().on('changeDate', function(ev) {
    var returnDate = ev.date;
    $('#res_departure1').datetimepicker('setEndDate', returnDate);
});

Upvotes: 3

Amal Dev
Amal Dev

Reputation: 84

Try this instead of your code 

$('.form_datetime').datetimepicker({
    //language:  'fr',
    format: "yyyy-mm-dd hh:ii",
    autoclose: true,
    todayBtn: true,
    startDate: new Date()
});

$("#res_departure1").on("dp.change", function (e) {
   $('#res_return1').data('DateTimePicker').minDate(new Date(e.timeStamp));
});

Upvotes: 0

Deepak Sharma
Deepak Sharma

Reputation: 4170

Because when you are talking about date only, then better to use datepicker on jQuery ui library, and then you can use the onSelect event of the departure date and then set the min date of return field. 

  onSelect: function(selectedDate)
  {
    $('#return').datepicker('option', 'minDate', selectedDate);
  }

you can check the working fiddle here.

Upvotes: 0

Related Questions