asked on August 12, 2021
•
Show version history
I have a form that allows the public to sign up for a free commercial sanitation container rental, which is only offered to one person on each M, W, and F. I have a table in a sql database that lists dates that have already been reserved, and a hidden field on the form that uses a lookup rule and appends choices to the lookup results. I started with the script from this post and modified it to block out everything other than M, W, F. The datepicker is blocking out everything it is supposed to except for the reserved dates from the table, and I need it to block out those dates in addition to what is currently blocked out.
/*Hide any field with the hiddenField class */ .hiddenField {display: none!important;}
//Fill out the hidden year field with current year for document storage $(document).ready(function () { const dateObj = new Date() var year = new Date().getFullYear() $('#q26 input').val(year) //Set the form name to the browser tab $('title').text("Cleanup Connection"); }) //Create the array of blackout dates var blackoutDatesList = new Array(); //Run the function when the document loads $(document).ready(function(){ //Set the date range to only display available future dates for 180 days var today = new Date(); var startDate = new Date(); startDate.setDate(today.getDate() + 1); var endDate = new Date(); endDate.setDate(today.getDate() + 180); var minDate = $.datepicker.formatDate('yy-mm-dd', new Date(startDate)); var maxDate = $.datepicker.formatDate('yy-mm-dd', new Date(endDate)); $('.myLimitedDate input').attr('min', minDate); $('.myLimitedDate input').attr('max', maxDate); //loop through each date in the blackout date list, and add it to an array blackoutDatesList.length = 0; $('.blackoutDates option[value]').each(function() { blackoutDatesList.push(moment(new Date($(this).val())).format('MM/DD/YYYY')); }); //disable other dates on the picker that are not M, W, F or are in the blackout array //add validation setting for date format function isValidDate(n) { var t = n.getDay(); var d = n.getDate(); var string = jQuery.datepicker.formatDate('MM/DD/YYYY', n); console.log(blackoutDatesList.join(',')); console.log(string); return (t!=0 && t!=2 && t!=4 && t!=6 && blackoutDatesList.indexOf(string) == -1); } function checkDate(n) { return[isValidDate(n),""]; } function checkField(input, inst) { if ($(input).closest('li').hasClass('myLimitedDate')) { $(input).datepicker("option", {beforeShowDay: checkDate}); } } $.datepicker.setDefaults( {beforeShow: checkField} ); window.Parsley.addValidator('limiteddate', { validateString: function(value) { //IMPORTANT! this date format needs to match the format you set for the field on the layout page return isValidDate(moment(value, "MM/DD/YYYY").toDate()); }, messages: { en: 'Not a valid date.' } }); $('.myLimitedDate input').attr('data-parsley-limiteddate',''); }); //this function is run when the lookups are completed. $(document).on("onloadlookupfinished", function () { //loop through each date in the blackout date list, and add it to an array blackoutDatesList.length = 0; $('.blackoutDates option[value]').each(function() { blackoutDatesList.push(moment(new Date($(this).val())).format('MM/DD/YYYY')); }); }); //return any date input formatted as mm/dd/yyyy function formatDate(date) { var d = new Date(date), month = '' + (d.getMonth() + 1), day = '' + (d.getDate() +1), year = d.getFullYear(); if (month.length < 2) month = '0' + month; if (day.length < 2) day = '0' + day; return [month, day, year].join('/'); }
0
0