Search code examples
twitter-bootstrapbootstrap-datepicker

Disabling 180 days after the current date in Bootstrap datepicker


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.

~ Please assist?

Departure date and return date

 <!-- 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

Solution

  • You have to use moment.js to calculate date in JavaScript. Refer the code to set another date picker according to the selected picker date.

    $("#ret").hide();
    
    $("#dep").datepicker({
        dateFormat: 'dd/mm/yy',
        minDate: 0,
        onSelect: function(dateText) {
    
            $("#ret").show();
            $("#ret").val('');
    
            var maxDate = moment(dateText, "DD/MM/YYYY").add(180, 'days').format("DD/MM/YYYY");
    
            $("#ret").datepicker('option', 'maxDate', maxDate);
            $("#ret").datepicker('option', 'minDate', dateText);
    
        }
    });
    
    $("#ret").datepicker({
        dateFormat: 'dd/mm/yy'
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    
    
    <p>Departure Date: <input type="text" id="dep" /></p>
    <p>Return Date: <input type="text" id="ret" /></p>