Hi,
Would anyone be able to write a code to only allow every other Monday to be picked starting with 05/09/2022. We only allow payroll changes to go into effect on the first Monday of the pay period.
Thanks,
Wendy
Hi,
Would anyone be able to write a code to only allow every other Monday to be picked starting with 05/09/2022. We only allow payroll changes to go into effect on the first Monday of the pay period.
Thanks,
Wendy
If you're using a classic form, try this custom JS
$(document).ready(function () { $.getScript('https://momentjs.com/downloads/moment.min.js', function() { $.datepicker.setDefaults({ beforeShowDay:function(d){ var m=moment(d); var en=m.week()%2===0 && m.weekday()===1; return [en,""]; } }); }); });
Thank you, Alexander! This works perfectly. How would I edit the code to only affect one date picker in the form? Sorry, I am very new to this. Thanks again! Wendy
Hey @████████- although the solution I posted includes a lot more code than the one that Alexander posted - it may work for your needs. It's geared to be applied only to a single field which includes the CSS Class of limitedDate. It also adds minimum and maximum date ranges to further limit input (today through one year from today) and includes custom validation errors if the user manually types in an invalid date.
This is nearly identical to another question posted two weeks ago: https://answers.laserfiche.com/questions/199561/Date-picker-want-user-to-be-able-to-select-only-every-other-Monday#199567
Here's the answer that was posted there:
I was able to modify some similar code I have that excluded weekends and holidays from a date picker in order to match your request.
This was tested in Forms 11 Updated 2.
Give you date field the CSS Class of: limitedDate
Then add this Javascript to your form:
//Declaration of global variables. var blackoutDatesList = new Array(); //Run the following code when the form has finished loading. $(document).ready(function () { //Set the date range of the Date field. //Minimum: Today //Maximum: 365 days in the future updateBlackoutDates(); function updateBlackoutDates() { var today = new Date(); var startDate = new Date(); var endDate = new Date(); endDate = today.addDays(365); var minDate = $.datepicker.formatDate('yy-mm-dd', new Date(startDate)); var maxDate = $.datepicker.formatDate('yy-mm-dd', new Date(endDate)); $('.limitedDate input').attr('min',minDate); $('.limitedDate input').attr('max',maxDate); } //Loop through every two weeks and add that invalid Monday to the blackoutDatesList array. //The array will be used to exclude those dates from the picker. blackoutDatesList.length = 0; var firstInvalidMonday = new Date(2022, 5, 6); //Sets the first invalid Monday as 6 June 2022. var nextInvalidMonday = new Date(); for(var i = 0; i <= 3650; i = i + 14) { //Loop every 14 days for ten years. nextInvalidMonday = firstInvalidMonday.addDays(i); blackoutDatesList.push(formatDate(new Date(nextInvalidMonday), 'yyyy-MM-dd')); console.log(formatDate(new Date(nextInvalidMonday), 'yyyy-MM-dd') + ' ' + formatDate(new Date(firstInvalidMonday), 'yyyy-MM-dd') + ' ' + i + ' ' + firstInvalidMonday.addDays(i)); } //The following four function work together to disable any dates on the picker //that are not every other Monday. //They also add a validation (parsley) setting for invalid date entries. function isValidDate(n) { var t = n.getDay(); var d = n.getDate(); var string = jQuery.datepicker.formatDate('yy-mm-dd', n); return (t!=0 && t!=2 && t!=3 && t!=4 && t!=5 && t!=6 && blackoutDatesList.indexOf(string) == -1); } function checkDate(n) { return[isValidDate(n),""]; } function checkField(input, inst) { if ($(input).closest('li').hasClass('limitedDate')) { $(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, "M/D/YYYY").toDate()); }, messages: { en: 'Not a valid date.' } }); $('.limitedDate input').attr('data-parsley-limiteddate',''); }); //Function to Add days to date. Date.prototype.addDays = function (days) { const date = new Date(this.valueOf()); date.setDate(date.getDate() + days); return date; }; //Function to format dates. function formatDate(date, format, utc) { var MMMM = ["\x00", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; var MMM = ["\x01", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; var dddd = ["\x02", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; var ddd = ["\x03", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; function ii(i, len) { var s = i + ""; len = len || 2; while (s.length < len) s = "0" + s; return s; } var y = utc ? date.getUTCFullYear() : date.getFullYear(); format = format.replace(/(^|[^\\])yyyy+/g, "$1" + y); format = format.replace(/(^|[^\\])yy/g, "$1" + y.toString().substr(2, 2)); format = format.replace(/(^|[^\\])y/g, "$1" + y); var M = (utc ? date.getUTCMonth() : date.getMonth()) + 1; format = format.replace(/(^|[^\\])MMMM+/g, "$1" + MMMM[0]); format = format.replace(/(^|[^\\])MMM/g, "$1" + MMM[0]); format = format.replace(/(^|[^\\])MM/g, "$1" + ii(M)); format = format.replace(/(^|[^\\])M/g, "$1" + M); var d = utc ? date.getUTCDate() : date.getDate(); format = format.replace(/(^|[^\\])dddd+/g, "$1" + dddd[0]); format = format.replace(/(^|[^\\])ddd/g, "$1" + ddd[0]); format = format.replace(/(^|[^\\])dd/g, "$1" + ii(d)); format = format.replace(/(^|[^\\])d/g, "$1" + d); var H = utc ? date.getUTCHours() : date.getHours(); format = format.replace(/(^|[^\\])HH+/g, "$1" + ii(H)); format = format.replace(/(^|[^\\])H/g, "$1" + H); var h = H > 12 ? H - 12 : H == 0 ? 12 : H; format = format.replace(/(^|[^\\])hh+/g, "$1" + ii(h)); format = format.replace(/(^|[^\\])h/g, "$1" + h); var m = utc ? date.getUTCMinutes() : date.getMinutes(); format = format.replace(/(^|[^\\])mm+/g, "$1" + ii(m)); format = format.replace(/(^|[^\\])m/g, "$1" + m); var s = utc ? date.getUTCSeconds() : date.getSeconds(); format = format.replace(/(^|[^\\])ss+/g, "$1" + ii(s)); format = format.replace(/(^|[^\\])s/g, "$1" + s); var f = utc ? date.getUTCMilliseconds() : date.getMilliseconds(); format = format.replace(/(^|[^\\])fff+/g, "$1" + ii(f, 3)); f = Math.round(f / 10); format = format.replace(/(^|[^\\])ff/g, "$1" + ii(f)); f = Math.round(f / 10); format = format.replace(/(^|[^\\])f/g, "$1" + f); var T = H < 12 ? "AM" : "PM"; format = format.replace(/(^|[^\\])TT+/g, "$1" + T); format = format.replace(/(^|[^\\])T/g, "$1" + T.charAt(0)); var t = T.toLowerCase(); format = format.replace(/(^|[^\\])tt+/g, "$1" + t); format = format.replace(/(^|[^\\])t/g, "$1" + t.charAt(0)); var tz = -date.getTimezoneOffset(); var K = utc || !tz ? "Z" : tz > 0 ? "+" : "-"; if (!utc) { tz = Math.abs(tz); var tzHrs = Math.floor(tz / 60); var tzMin = tz % 60; K += ii(tzHrs) + ":" + ii(tzMin); } format = format.replace(/(^|[^\\])K/g, "$1" + K); var day = (utc ? date.getUTCDay() : date.getDay()) + 1; format = format.replace(new RegExp(dddd[0], "g"), dddd[day]); format = format.replace(new RegExp(ddd[0], "g"), ddd[day]); format = format.replace(new RegExp(MMMM[0], "g"), MMMM[M]); format = format.replace(new RegExp(MMM[0], "g"), MMM[M]); format = format.replace(/\\(.)/g, "$1"); return format; };
End result:
Note: the code was written with the assumption that there is only one field on the form with the limitedDate class, and it will need to be tweaked if there is more than one.