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

Question

Posted to Laserfiche Cloud

Question

Ability to restrict dates in forms

asked on March 6, 2020

We are running Laserfiche in the cloud and have a a need in one of our forms to restrict the dates being entered to the next business day and the business day must not include holidays and other blackout dates. Thoughts? I was thinking a tie into a calendaring system (exchange or O365?) but did not want to get to far down the road if I am missing something obvious. Thanks in Advance!

1 0

Answer

SELECTED ANSWER
replied on March 20, 2020 Show version history

Actually, I figured it out.  The date is using the standard datepicker - the issue is just how it is loaded in forms versus the way that it is loaded elsewhere.  After reviewing another post (https://answers.laserfiche.com/questions/166110/How-to-restrict-date-picker-to-specific-dates-of-the-month#166185) I was able to work-up a script.

 

Here's the walkthrough:

  1. Add a date field to your form.  Select the 'yyyy-MM-dd' format (if you want to select a different format, you'll need to change a bit of the Javascript - specifically line 45).  Give it a CSS Class Name of "myLimitedDate").
  2. Add a drop-down field to your form.  Give it the CSS Class Names of "blackoutDates hiddenField". 
  3. Populate the blackout dates in to the drop-down by manually populating them as options on the layout page, or by doing a data lookup from a database.  You can do a combination of both if you mark the "Append choices to lookup results" box on the field.
  4. Add the following CSS and Javascript to your form:

  

/*this is the CSS to hide any field with the hiddenField class*/
.hiddenField {display: none!important;}
//create the array of blackout dates
var blackoutDatesList = new Array();

//this function is run when the form is loaded
$(document).ready(function(){

  //set the date range of the Date field between tomorrow and 21 days in the future
  var today = new Date();
  var startDate = new Date();
  startDate.setDate(today.getDate() + 1);
  var endDate = new Date();
  endDate.setDate(today.getDate() + 21);
  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').each(function() {
	blackoutDatesList.push(formatDate(new Date($(this).val())));
  });
  
  //the following four function work together to disable any dates on the picker 
  //that are weekends or are on the blackoutDatesList array
  //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!=6 && t!=0 && 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, "YYYY-MM-DD").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').each(function() {
	blackoutDatesList.push(formatDate(new Date($(this).val())));
  });
});

//function to return any date formatted as yyyy-mm-dd
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 [year, month, day].join('-');
}

The script is allowing any date between 1 and 21 days from now (that range is set on rows 10 and 12 of the Javascript).  Then it excludes any date that a Saturday or Sunday or is on the list of blackout dates.

In my case, I listed these dates as choices within the drop-down menu:

03/23/2020
03/24/2020
03/25/2020

And then these additional dates are being added via database lookup:

2020-03-31
2020-04-01
2020-04-07
2020-04-08
2020-04-09

The end result, is that with today being Friday, March 20, 2020, we see these active dates:

 

3/21 is the start of the range, 3/21-3/22 is a weekend, 3/23-3/25 are on the blackout date list, 3/28-3/29 is a weekend, and 3/31 is on the blackout date list.

4/1 is on the blackout date list, 4/4-4/5 is a weekend, 4/7-4/9 are on the blackout date list, and 4/10 is the last date allowed in the range.

 

***EDIT - changed line 67 of the script to match @████████ 's suggestion.***

 

4 0
replied on January 4, 2021

I am looking to do sort of the same thing but the drop down would have the only dates I want to be able to select and blackout the rest.  Is there much to change in the script to be able to do that?

1 0
replied on October 13, 2023

I need some help.  I got the script to work.  The issue I am having is that it won't block the 1st of the month when I add the date to the blockout field.  I tried 2023-10-01 and it does not get blocked out.  I tried 2023-10-1 and it blocks out the next day.  I have tried for various months and I get the same result.

0 0
replied on October 13, 2023

Did you make sure the format of the date on the Layout page matches the yyyy-mm-dd format?

0 0

Replies

replied on March 23, 2020

All worked except I had to edit line 67 of Javascript in case anyone runs into the same issue I had.

I was having an issue where depending on the date I put in the hidden dropdown field it would always block out the date prior.  So I typed out 2020-03-26 in the dropdown for instance and in the datepicker calendar it would block 2020-03-25.

So I edited line 67 to be:

day = '' + (d.getDate() +1),

Don't know why that was a problem for us but this fixed it.

Thank you!

2 0
replied on March 23, 2020

Thank you. We will test it out. Much appreciated!

1 0
replied on March 20, 2020

There is a way to restrict particular dates from the JQuery datepicker, but it looks like that may not work for the version of the datepicker used in forms.

It is possible via Javascript to set the min date and max date - and you could also ensure that the min date and max date are not a weekend or matching a date from a list of blacked-out dates - I'm just not certain how you would go about restricting particular dates within the range using the built-in datepicker element in Forms.

0 0
replied on August 25, 2021

Thank you for posting this!  It is 90% of what I needed and hope someone can help me with the rest.

I have a datepicker that I want to only show dates available for a service that is offered once per day on Mondays, Wednesdays, and Fridays.  I have a table on a sql database that has the dates that have been reserved, and use a lookup rule to pull the reserved dates into a hidden field.  

The reserved dates are being pulled in as expected, and they are added to the array as expected.  The datepicker also blocks out all previous dates and everything other than Mon, Wed, Fri, but it is not blocking out the dates in the array.

Here is what I have:

/*Hide any field with the hiddenField class */
.hiddenField {display: none!important;}
//Create the array of blackout dates
var blackoutDatesList = [];

//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())));
  });

  //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('yy-mm-dd', n);
    return (t!=0 && t!=2 && t!=4 && t!=6 && blackoutDatesList.indexOf() == -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'));
  });
});
 

 
//function to return any date 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('/');
}

Here you can see the dates in the array:

And here you can see that 9/15/2021, a date in the blackout dates list, appears available:

Any help or suggestion is appreciated!

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

Sign in to reply to this post.