Disabling 180 days after the current date in Bootstrap datepicker Library

Working on a form whereby am using bootstrap datepicker to display dates to the user. There are 2 input fields to show the dates mainly departure date and return date.

When the user selects a departure date (on the datepicker),, I want to capture the date selected and on the return date field disable 180 days after the departure date selected.

 <!-- Departure date-->
<div class="form-line registar2 love {{ $errors->has('departure_date') ? ' has-error' : '' }}">
    <input type="text" placeholder="Departure Date*" class="form-input dateTextBox" name="departure_date" id="departureDate" value="{{ old('departure_date') }}" required>
</div>
<!--End departure-->

<!-- Return date-->
<div class="form-line registar2 move {{ $errors->has('return_date') ? ' has-error' : '' }}">
         <input type="text" placeholder="Return Date*" class="form-input dateTextBox" name="return_date" id="returnDate" value="{{ old('return_date') }}" required>
</div>
<!-- End return date-->

Javascript logic for the datepicker

//Departure date
     $( function() {
      $( "#departureDate" ).datepicker({
        changeMonth: true,
        changeYear: true,
        //yy-mm-dd
        dateFormat: 'yy-mm-dd',
        minDate: '0',
        maxDate: "+20Y",
      });
    });

    //return date
    $( function() {
      $( "#returnDate" ).datepicker({
        changeMonth: true,
        changeYear: true,
        //yy-mm-dd
        dateFormat: 'yy-mm-dd',
        minDate: '0',
        maxDate: "+180D",
      });
    });
    //End dob

martinbean

7 years ago

Level 80

@patwan When the value of #departureDate changes, capture it in a variable, convert it to a JavaScript Date object, then add 180 days. You can then set that as the max attribute on the #returnDate input.

You could use a library like Moment.js which would make manipulating the date easier.

Patwan

7 years ago

Level 1

@martinbean I have tried this code but the return date date picker does not show?

 $( function() {
  $( "#departureDate" ).datepicker({
    changeMonth: true,
    changeYear: true,
    //yy-mm-dd
    dateFormat: 'yy-mm-dd',
    minDate: '0',
    maxDate: "+20Y",
      }).on('changeDate', function (selected) {
        var minDate=new Date(selected.date.getFullYear(),selected.date.getMonth(),selected.date.getDate()+180)

        $('#returnDate').datepicker('setStartDate', minDate);
     });

  });

Do you have sample code you can explain with..

usaandi

7 years ago

Level 2

@patwan I did something similar couple days ago. using bootstrap datepicker and i got it working

 $('#date1').datepicker({
                format: 'dd/mm/yyyy',
                minViewMode: 1,
                maxViewMode: 2,
                orientation: "bottom auto",
                autoclose: true,
            }).on('changeDate', event => {

                let minDate = new Date(event.target.value);
                $('#date2').datepicker('setStartDate', minDate);
                this.startDate = event.target.value;

            });


            $('#date2').datepicker({
                format: 'dd/mm/yyyy',
                minViewMode: 1,
                orientation: "bottom auto",
                maxViewMode: 2,
                startDate: this.startDate,
                autoclose: true,
            }).on('changeDate', event => {
                let maxDate = new Date(event.target.value);
                $('#date1').datepicker('setEndDate', maxDate);
                this.endDate = event.target.value;
            });

Please or to participate in this conversation.