Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 140220

Getting difference from range of dtes in Jquery U.I Datepicker

$
0
0

I am working on some date input fields which have jQuery UI datepicker in them. They are namely departure date and return date. They work well. After the user selects the departure date and return date, I need to find the difference between the date h/she departed and the date h/she returned and populate in another input field instantly.

Kindly assist?

Markup Code

<!--Departure date-->
<input type="text" id="departureDate" class="form-control" placeholder="Departure Date" value="" required> 

<!--Return Date-->
<input type="text" id="returnDate" class="form-control" placeholder="Return Date" value="" required> 

<!--Output-->
<p>Your trip is<br/> <div>41 days</div></p>

JavaScript Logic

<script>
          $(function() {
      $("#departureDate").datepicker({
        changeMonth: true,
        changeYear: true,
        minDate: '+1', 
        dateFormat: 'dd-mm-yy',
        onSelect: function(selected) {
          $("#returnDate").datepicker("option","minDate", selected);
                //Remove required attribute
                $(this).removeAttr('required');
              }
          });

      $("#returnDate").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd-mm-yy',
            onSelect: function(selected) {
              $("#departureDate").datepicker("option","maxDate", selected);
              //Remove required attribute
              $(this).removeAttr('required');
            }
          });
    });

    </script>

Logic to check difference

$(function() {
    let $fromDate = $('#departureDate'),
        $toDate = $('#returnDate');

    $fromDate.datepicker().on('change', function(){
        $toDate.datepicker('option', 'minDate', $(this).val());
    });

    $toDate.datepicker().on('change', function(){
        $fromDate.datepicker('option', 'maxDate', $(this).val());
    });;
});

Viewing all articles
Browse latest Browse all 140220

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>