How to get end date from start date and days using JQuery UI datepicker

Question

I have this code in my application using JQuery-UI datepicker:

$(function() {
  $('.start_date').datepicker({
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    changeYear: true,
    showAnim: 'slideDown',
    duration: 'fast',
    minDate: +1,
    yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
  });
  $('.end_date').datepicker({
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    changeYear: true,
    showAnim: 'slideDown',
    duration: 'fast',
    minDate: +1,
    yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
    enableOnReadonly: true,
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css"/>
<input type="text" id="start_date" placeholder="Start Date" />
<input type="number" id="daysNumber" placeholder="Days" />
<input type="text" id="end_date" placeholder="End Date" readonly/>

I used this:

<script type="text/javascript">
     $(document).ready(function () {

         $( ".no_of_days" ).change(function() {
            var periodval=$(".no_of_days").val();
            var startDate = $('.start_date');
            var endDate = $('.end_date');
            //endDate.setDate(endDate.getDate() + periodval);
            var dte = startDate.datepicker("getDate"); 
            dte.setDate(dte.getDate()+periodval); 
            endDate.datepicker("setDate", dte);

          });

            $( '.start_date' ).datepicker({
                dateFormat: 'dd-mm-yy',
                changeMonth: true,
                changeYear: true,      
                showAnim: 'slideDown',
                duration: 'fast',   
                minDate: +1,
        });

            $( '.end_date' ).datepicker({
                dateFormat: 'dd-mm-yy',
                changeMonth: true,
                changeYear: true,      
                showAnim: 'slideDown',
                duration: 'fast',   
                minDate: +1,
                yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
                enableOnReadonly: true,
            });
    });
</script>

but this error:

Uncaught TypeError: endDate.getDate is not a function

and this is highlighted:

endDate.setDate(endDate.getDate() + periodval);

I have seen some examples, but not really going for JQuery UI.

How do I

onchange daysNumber get end_date from start_date and Days (daysNumber)
and also on select start_date with the value of daysNumber get end_date

using JQuery-UI datepicker

Which part are you stuck on? Getting / setting dates in a jquery-ui datepicker? https://api.jqueryui.com/datepicker/#method-getDate or adding/subtract days to/from a date? https://stackoverflow.com/a/563420/2181514 — freedomn-m, Sep 30 '20 at 15:15
@freedomn-m - but this error: > Uncaught TypeError: endDate.getDate is not a function and this is highlighted: > endDate.setDate(endDate.getDate() + periodval); — user11352561, Sep 30 '20 at 18:00
See the API link: should be `endDate.datepicker( "getDate" );` and similar for `.datepicker("setDate")` — freedomn-m, Sep 30 '20 at 18:09
@freedomn-m - I added this: endDate.datepicker("setDate") + periodval; but notthing is happening, and no error on the console — user11352561, Sep 30 '20 at 18:17
`var dte = startDate.datepicker("getDate"); dte.setDate(dte.getDate()+1); endDate.datepicker("setDate", dte);` — freedomn-m, Sep 30 '20 at 18:25
@freedomn-m - When I used the sample you gave me it works, but when I changed the 1 in it to periodval it didn't work and no error. See the modification in my code — user11352561, Sep 30 '20 at 18:32

How to get end date from start date and days using JQuery UI datepicker

0 Answers0