I have a date field that I would like the user to ONLY be able to choose a Sunday date. How can I code that?
Question
Question
Answer
This is similar to this question from a week ago: https://answers.laserfiche.com/questions/199561/Date-picker-want-user-to-be-able-to-select-only-every-other-Monday#199567
Yours is a little easier however, since every Sunday is valid, and the other question wanted every other Monday.
This came from a modified version of some code that I use internally that excludes weekends and holidays from a date picker. This version for you excludes everything except Sundays.
This was tested in Forms 11 Updated 2.
Give your date field the CSS Class of: limitedDate
Then add this Javascript to your form:
//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); } //The following four function work together to disable any dates on the picker //that are not Sunday. //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!=1 && t!=2 && t!=3 && t!=4 && t!=5 && t!=6); //Only valid date is Sunday t==0 } 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; };
Result:
Edited to add: note that the code is written with the assumption that you only have one field with the limitedDate class. If you have more than one, the code will need to be tweaked slightly.