Question 178777 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Can jQuery auto-update maxdate setting for daterangepicker?

I have two input date using daterangepicker, input one and input two. I want to know how to make maxDate on input two after user choose the date on input one. I have success add endDate setting on input two, but I need maxDate setting for prevent user choose over the date they choose on input one

Here’s the html code

 <input type="text" name="input_one" id="input_one" />
 <input type="text" name="input_two" id="input_two" />

Here’s js code

 $('input[name="input_one"]').daterangepicker({
    minDate:moment(),
    timePicker: false,
    singleDatePicker: true,
    autoApply: true,
    autoUpdateInput: true,
    locale: {
      format: 'DD-MM-YYYY'
    }
 }, function(start, end, label){
   var selectedEndDate = end.format('DD-MM-YYYY');

   $checkinInput = $('#input_one');

   var checkInPicker = $checkinInput.data('daterangepicker');

   checkInPicker.setEndDate(selectedEndDate);
 })

 $('input[name="input_two"]').daterangepicker({
    minDate:moment(),
    timePicker: false,
    singleDatePicker: true,
    autoApply: true,
    autoUpdateInput: true,
    locale: {
      format: 'DD-MM-YYYY'
    }
 })

thanks

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I've found a solutions, so before input two daterangepicker functions, add onchange function based on input one clicked.

    Here's the code

    $('#input_one').on('change', function(){
    $('#input_two').daterangepicker({
        maxDate:moment($('#input_one').val(), "DD-MM-YYYY"),
        minDate:moment(),
        timePicker: false,
        singleDatePicker: true,
        autoApply: true,
        autoUpdateInput: true,
        locale: {
            format: 'DD-MM-YYYY'
        }
    })
});

  2. 0

    To set the maxDate on input_two based on the selected date from input_one, you can modify your JavaScript code as follows:

    $('input[name="input_one"]').daterangepicker({
  minDate: moment(),
  timePicker: false,
  singleDatePicker: true,
  autoApply: true,
  autoUpdateInput: true,
  locale: {
    format: 'DD-MM-YYYY'
  }
}, function(start, end, label) {
  var selectedEndDate = end.format('DD-MM-YYYY');
  var $checkoutInput = $('#input_two');
  
  $checkoutInput.data('daterangepicker').setOptions({
    minDate: selectedEndDate // Set the minDate of input_two to the selected end date of input_one
  });
  
  // Clear the selected date in input_two if it is before the new minDate
  var checkoutPicker = $checkoutInput.data('daterangepicker');
  if (checkoutPicker.endDate.isBefore(selectedEndDate, 'day')) {
    checkoutPicker.setEndDate(selectedEndDate);
    $checkoutInput.val('');
  }
});

$('input[name="input_two"]').daterangepicker({
  minDate: moment(),
  timePicker: false,
  singleDatePicker: true,
  autoApply: true,
  autoUpdateInput: true,
  locale: {
    format: 'DD-MM-YYYY'
  }
});

    User selects a date in input_one, the selected end date is obtained and stored in the selectedEndDate variable. Then, the minDate option of input_two is set to the selectedEndDate value, which prevents the user from selecting a date earlier than that. Additionally, if the currently selected date in input_two is before the new minDate, it clears the selected date in input_two and updates the input value to an empty string.

    Let’s understand through the code step by step to understand what each part does:

    1.Initialization of input_one:

    $('input[name="input_one"]').daterangepicker({
    // Options for input_one
}, function (start, end, label) {
    // Callback function for when a date is selected in input_one
});

    This code initializes the input_one date range picker with the specified options. It also provides a callback function that will be executed when a date is selected in input_one.

    2.Callback function for input_one:

    function(start, end, label) {
    var selectedEndDate = end.format('DD-MM-YYYY');
    var $checkoutInput = $('#input_two');

    $checkoutInput.data('daterangepicker').setOptions({
        minDate: selectedEndDate
    });

    var checkoutPicker = $checkoutInput.data('daterangepicker');
    if (checkoutPicker.endDate.isBefore(selectedEndDate, 'day')) {
        checkoutPicker.setEndDate(selectedEndDate);
        $checkoutInput.val('');
    }
}

    This is the callback function that is called when a date is selected in input_one. It performs the following tasks:

    • Obtains the selected end date from input_one and stores it in the selectedEndDate variable.
    • Retrieves the reference to input_two using its ID (#input_two) and assigns it to the $checkoutInput variable.
    • Sets the minDate option of input_two to the selectedEndDate value using the setOptions method.
    • Retrieves the date range picker object for input_two and assigns it to the checkoutPicker variable.
    • Checks if the currently selected date in input_two is before the new minDate. If it is, it clears the selected date in input_two and updates the input value to an empty string.

    1. Initialization of input_two:

      $(‘input[name="input_two"]’).daterangepicker({
      // Options for input_two
      });

      This code initializes the input_two date range picker with the specified options.

    Overall, the code sets the minDate option of input_two based on the selected end date from input_one. It also ensures that if the currently selected date in input_two is before the new minDate, the selected date is cleared. This helps prevent users from choosing a date in input_two that is earlier than the selected date in input_one.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search