CODEWITHSUNDEEP
jqueryhtmlbootstrap-daterangepicker
Kieran
Kieran

Reputation: 53

Date range picker for Bootstrap, two linked calendars on page

I'm using http://www.daterangepicker.com/ to create two seperate calendars. One for the start date and one for the end date. What I want to happen is when the first date is chosen the second one will automatically have the value 7 days ahead. It currently is 7 days ahead when page loads but when the first calendar changes I can't get the second one to change.

It needs to update hidden html input fields as well when changed

Code below:

<label for="datetimepickerin" class="date-input-holder__label"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></label>

<input type="text" class="form-control datetimepicker datetimepicker--checkin" name="datetimepickerin" id="datetimepickerin">

<label for="datetimepickerout" class="date-input-holder__label"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></label>

<input type="text" class="form-control datetimepicker datetimepicker--checkout" name="datetimepickerout" id="datetimepickerout">


<script>

    // Date picker scripts (daterangepicker.com)



    // Date from vars

    var todaysdate = moment().subtract(0, 'days');

    var daterangeparams = {
        singleDatePicker: true,
        "autoApply": true,
        minDate : todaysdate,
        "startDate" : todaysdate,
        linkedCalendars: true,
        locale: {
            "format": 'DD/MM/YYYY',
            "firstDay": 1
        }
    };



    // Date from calendar init      

    jQuery('.datetimepicker--checkin').daterangepicker(daterangeparams);

    jQuery('.datetimepicker--checkin').on('apply.daterangepicker', function(ev, picker) {

        var depdate = picker.startDate.format('DD/MM/YYYY');

        jQuery('[name="datetimepickerin"]').val(depdate);

        jQuery('[name="depdate-day"]').val(picker.startDate.date());
        jQuery('[name="depdate-month"]').val(picker.startDate.month() + 1);
        jQuery('[name="depdate-year"]').val(picker.startDate.year());

        jQuery('[name="datetimepicker"]').show();
    });



    // Date to vars

    var startout = moment().add(7, 'days');

    var daterangeparamsout = {
        singleDatePicker: true,
        "autoApply": true,
        minDate : todaysdate,
        "startDate" : startout,
        linkedCalendars: true,
        locale: {
            "format": 'DD/MM/YYYY',
            "firstDay": 1
        }
    };


    // Date to calendar init

    jQuery('.datetimepicker--checkout').daterangepicker(daterangeparamsout);

    jQuery('.datetimepicker--checkout').on('apply.daterangepicker', function(ev, picker) {

        var retdate = picker.startDate.format('DD/MM/YYYY');

        jQuery('[name="datetimepickerout"]').val(retdate);
        jQuery('[name="retdate-day"]').val(picker.startDate.date());
        jQuery('[name="retdate-month"]').val(picker.startDate.month() + 1);
        jQuery('[name="retdate-year"]').val(picker.startDate.year());

        jQuery('[name="datetimepicker"]').show();
    });


</script>

<input type="hidden" name="depdate-day" id="depdate-day" value="" />
<input type="hidden" name="depdate-month" id="depdate-month" value=""/>
<input type="hidden" name="depdate-year" id="depdate-year" value="" />

<input type="hidden" name="retdate-day" id="retdate-day" value="" />
<input type="hidden" name="retdate-month" id="retdate-month" value=""/>
<input type="hidden" name="retdate-year" id="retdate-year" value="" />

Upvotes: 1

Views: 3071

Answers (2)

Ocool Sanni
Ocool Sanni

Reputation: 39

I updated your fiddle with this line of code

var new_minDate = picker.startDate.clone();

and this line of code too can also be used

var new_start = picker.startDate.clone().add(7, 'days');

with this var new_minDate = new_start;

Upvotes: 1

Dan Grossman
Dan Grossman

Reputation: 52372

Answer: When a date is picked in the first picker, re-create the second picker with new options, including a selected date 7 days later than the one just chosen in the other calendar.

Fiddle: https://jsfiddle.net/t4tas2y5/4/

Example HTML:

Start Date: <input type="text" id="start-date" value="" />

End Date: <input type="text" id="end-date" value="" />

Example JS:

$('#start-date').daterangepicker({
  singleDatePicker: true,
  autoApply: true,
  minDate : moment(),
  startDate: moment(),
  locale: {
    format: 'DD/MM/YYYY',
    firstDay: 1
  }
});

$('#end-date').daterangepicker({
  singleDatePicker: true,
  autoApply: true,
  minDate: moment(),
  startDate: moment().add(7, 'days'),
  locale: {
    format: 'DD/MM/YYYY',
    firstDay: 1
  }
});

$('#start-date').on('apply.daterangepicker', function(ev, picker) {

    var new_start =  picker.startDate.clone().add(7, 'days');

    $('#end-date').daterangepicker({
      singleDatePicker: true,
      autoApply: true,
      minDate: moment(),
      startDate: new_start,
      locale: {
        format: 'DD/MM/YYYY',
        firstDay: 1
      }
    });

});

I have not included the code for updating your hidden inputs, as you already know how to do that from your own code.

Upvotes: 1

Related Questions