jquery / download.jqueryui.com

Download Builder for jQuery UI
https://jqueryui.com/download/
Other
86 stars 72 forks source link

get end date from start date and leave days using jQuery datapicker #565

Closed noblemfd closed 3 years ago

noblemfd commented 3 years ago

I passed the holiday dates from from controller to view using json

` public function findNationalHoliday(Request $request)
        {
           $nationalholidays               = HrNationalHoliday::select('holiday_date')->whereYear('created_at', '=', date('Y'))->get();
         return response()->json([
            'nationalholidays' => $nationalholidays,
         ]);        
       } `

leave_days

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

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

$.ajax({
type: 'get',
url: '{{ route('get.nationalholidays.all') }}',
data: { 'id': air_id },
dataType: 'json', //return data will be json
success: function(data) {
$('#nationalholidays').val(data.nationalholidays);
console.log(data.nationalholidays);
},
error:function(){
}
});
});
});
</script>
<script type="text/javascript">
$("#leave_days").on('keyup blur', function (e) {
var periodval=parseInt($("#leave_days").val());
var startDate = $('.start_date');
var endDate = $('.end_date');
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,
setDate: new Date(),
beforeShowDay: $.datepicker.noWeekends,
yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
}).datepicker('setDate', '1');
$( '.end_date' ).datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showAnim: 'slideDown',
duration: 'fast',
minDate: +1,
beforeShowDay: $.datepicker.noWeekends,
yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
enableOnReadonly: true,
beforeShow: function(i) { if ($(i).attr('readonly')) { return false; } }
});
});
</script>`

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

mgol commented 3 years ago

Thanks for the report but this doesn't seem to be related to the Download Builder. The jQuery UI bug tracker is at https://bugs.jqueryui.com/.