You are viewing limited content. For full access, please sign in.

Question

Question

Date picker: want user to be able to select only every other Monday

asked on June 10, 2022

I want the user to only be able to select Mondays that are the start of the pay period. Other dates are calculated on the form in a table once the user selects the start of the pay period.

Example: I want the user to only be able to select:

6/13/22 Monday

6/27/22 Monday

7/11/22 Monday

7/25/22 Monday

8/8/22 Monday

8/22/22 Monday

9/5/22 Monday

9/19/22 Monday

10/3/22 Monday

10/17/22 Monday

10/31/22 Monday

11/14/22 Monday

11/28/22 Monday

12/12/22 Monday




 

0 0

Answer

SELECTED ANSWER
replied on June 10, 2022 Show version history

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.

2 0
replied on June 10, 2022

This works for me. Thank you for your help!

1 0
replied on June 10, 2022

You're very welcome!

0 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.