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

Question

Question

Limiting calendar date picker to only selection of every other Monday.

asked on June 23, 2022 Show version history

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

0 0

Replies

replied on June 24, 2022

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,""];
        }
    });
  });
});

0 0
replied on June 27, 2022

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

0 0
replied on June 28, 2022

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.

0 0
replied on June 24, 2022 Show version history

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.

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

Sign in to reply to this post.