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

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

    <script type="text/javascript">
       $(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>

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

Thanks

jlrdw

5 years ago

Level 75

Why not just start date and end date. See last example here https://laracasts.com/discuss/channels/guides/getpdo-usage

The difference in days you should be able to work out using carbon or regular PHP date functions, it's just a calculation.

https://stackoverflow.com/questions/39508963/calculate-difference-between-two-dates-using-carbon-and-blade

noblemfd

5 years ago

Level 9

@jlrdw - The requirement is:

end_date (JQuery-UI datepicker) = start_date (JQuery-UI datepicker) + day (input field)

When day is onchange or when start_date is OnSelect

noblemfd

5 years ago

Level 9

@jlrdw -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);
          });

            $( '.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: