How to get end date from start date and leave days based on condition using jQuery datapicker

How to get end date from start date and leave days based on condition using jQuery datapicker

I am using JQuery-ui datepicker in Leave Management Project.

This is what I have:



Controller

  1.         public function findNationalHoliday(Request $request)
  2.         {
  3.            $nationalholidays               = HrNationalHoliday::select('holiday_date')->whereYear('created_at', '=', date('Y'))->get();
  4.          return response()->json([
  5.             'nationalholidays' => $nationalholidays,
  6.          ]);        
  7.        }

holiday_days comes like this in the console:

0:
holiday_date: "2020-08-25 00:00:00"
__proto__: Object
1:
holiday_date: "2020-08-26 00:00:00"
__proto__: Object
2: {holiday_date: "2020-09-25 00:00:00"}
3: {holiday_date: "2020-11-30 00:00:00"}

__proto__: Array(0)

Javascript

  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. $(document).on('change', '#leave_type', function() {
  4. var air_id = $(this).val();
  5. var a = $(this).parent();
  6. var op = "";

  8. $.ajax({
  9. type: 'get',
  10. url: '{{ route('get.nationalholidays.all') }}',
  11. data: { 'id': air_id },
  12. dataType: 'json', //return data will be json
  13. success: function(data) {
  14. $('#nationalholidays').val(data.nationalholidays);
  15. console.log(data.nationalholidays);
  16. },
  17. error:function(){
  18. }
  19. });
  20. });
  21. });
  22. </script>
  23. <script type="text/javascript">
  24. $("#leave_days").on('keyup blur', function (e) {
  25. var periodval=parseInt($("#leave_days").val());
  26. var startDate = $('.start_date');
  27. var endDate = $('.end_date');
  28. var dte = startDate.datepicker("getDate");
  29. dte.setDate(dte.getDate()+periodval);
  30. endDate.datepicker("setDate", dte);
  31. });
  32. $( '.start_date' ).datepicker({
  33. dateFormat: 'dd-mm-yy',
  34. changeMonth: true,
  35. changeYear: true,
  36. showAnim: 'slideDown',
  37. duration: 'fast',
  38. minDate: +1,
  39. setDate: new Date(),
  40. beforeShowDay: $.datepicker.noWeekends,
  41. yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
  42. }).datepicker('setDate', '1');
  43. $( '.end_date' ).datepicker({
  44. dateFormat: 'dd-mm-yy',
  45. changeMonth: true,
  46. changeYear: true,
  47. showAnim: 'slideDown',
  48. duration: 'fast',
  49. minDate: +1,
  50. beforeShowDay: $.datepicker.noWeekends,
  51. yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
  52. enableOnReadonly: true,
  53. beforeShow: function(i) { if ($(i).attr('readonly')) { return false; } }
  54. });
  55. });
  56. </script>

Basically, I have a table for NationalHoliday which stores all the national_holidays.

What I want to achieve is that, the user selects the start_date, and as he enters leave_days onchange, it should add national_holidays  (if any) automatically  display end_date. Note that the end_date is disabled.

So far, when the users enters leave_days automatically displays end_date, but not removing NationalHolidays.

Initially the user selects start_date and end_date from the view, then everything is calculated from the controller.

But now, the requirement has changed:  national_holidays are sent as json from controller to the view. user  selects 

    start_date + leave_days + national_holidays + weekend = end_date

start_date, enters leave_days, then the end_date is automatically calculated from the view blade

What I want is that the user selects start_date (end_date is locked and should not be selected), and as he types leave_days, end_date should automatically be generated adding holidays and weekend. How do I consume the nationalholidays.

Thanks