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

Question

Question

Can date picker be configured to use Work Schedules and Holidays set in LF Settings???

asked on June 16, 2023 Show version history

We have external forms where we want to limit the date picker to:

- Only pick 3 business days in advance to 30 days in advance

We are using the CSS/JavaScript from https://answers.laserfiche.com/questions/170752/Ability-to-restrict-dates-in-forms#191267 but it does not work on Fridays. It counts Saturday and Sunday as days, but just greys them out, so the user can still pick Monday, even though it is only the next business day (not 3 business days in advance).

Ideally, we would like the date picker to reference the Work Schedules and Holidays we set in LF Settings to be able to reference.

We are using Cloud, old form format. We would like to move to new form format - but we cannot limit the date picker with CSS/JavaScript in the new format.

 

thanks,

Brian

0 0

Answer

SELECTED ANSWER
replied on July 3, 2023

Which one of my comments are you working with?

The one you replied to (this one), or the second one that I posted (this one)?

Because I believe the second one I posted (not the one you replied to) is a better solution in the long-run.

0 0

Replies

replied on June 16, 2023

Here's another option @████████

This is a tweak of the original script.  But I moved the creation of the backout dates array to before we set the start and end dates of the date field.  Then when we are setting the start date of the field, we're going to loop through 3 times.  Each iteration of the loop, we're going to add 1 day.  Then we'll check if that new day is a weekend or in the blackout dates array, if it is, we reduce the increment count by 1 so that it runs the loop an extra time.

This is successfully working for me on Friday 6/16/2023 - with Saturday, Sunday, and the Monday Holiday (Juneteenth National Independence Day) being excluded, and saying the 3rd business day is Thursday the 22nd.

//create the array of blackout dates
var blackoutDatesList = new Array();

//this function is run when the form is loaded
$(document).ready(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())));
  });
  
  //set the date range of the Date field between 3 business days and 30 days in the future
  var today = new Date();
  var startDate = new Date();
  for(i = 1; i <= 3; i++) {
    startDate.setDate(startDate.getDate() + 1);
    var t = startDate.getDay();
    var string = jQuery.datepicker.formatDate('yy-mm-dd', startDate);
    if (t==6 || t==0 || blackoutDatesList.indexOf(string) != -1) {
      i--;
    }
  }
  var endDate = new Date();
  endDate.setDate(today.getDate() + 30);
  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);
  
  //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('-');
}

 

1 0
replied on June 16, 2023

I don't think you're going to be able to do this via the system configuration, especially being in Cloud since you don't have direct access to the databases.  But we can tweak the code you're using to make it work.

That code from the other post you referenced (date picker with blackout dates) is code that I wrote several years ago and have tweaked a bunch of times, and shared on a half-dozen or more posts here on Answers.

Dealing with the business dates around the weekend is fairly straightforward.

This line of code:     startDate.setDate(today.getDate() + 1);     is saying, the earliest date that is valid on the datepicker is tomorrow.  But you want 3 business days.  We could check what day of the week the current date is, and determine how many days to add accordingly.  Like this: 

  var startDate = new Date();
  if(startDate.getDay() == 0 || startDate.getDay() == 1 || startDate.getDay() == 2) {
    startDate.setDate(startDate.getDate() + 3);  //Sun to Wed  or  Mon to Thu  or  Tue to Fri
  }
  else if(startDate.getDay() == 3 || startDate.getDay() == 4 || startDate.getDay() == 5) {
    startDate.setDate(startDate.getDate() + 5);  //Wed to Mon  or  Thu to Tue  or  Fri to Wed
  }
  else if(startDate.getDay() == 6) {
    startDate.setDate(startDate.getDate() + 4);  //Sat to Wed
  }

 

0 0
replied on June 16, 2023

Thanks Matthew,

I'll look at this and see if we can get it working on the form for that department.

 

Brian

0 0
replied on July 3, 2023

@████████

- I have been testing the code you provided and am still having issues. I setup a test holiday schedule for this week (Test holidays: 7/4, 7/5, and 7/6).

Today (Monday 7/3), the first date I should be able to pick  is Tuesday 7/11.

Monday 7/3: Does not count

Tuesday 7/4: Holiday

Wednesday 7/5: Holiday

Thursday 7/6: Holiday

Friday 7/7: First business day to count

Saturday 7/8 and Sunday 7/9: Weekends do no count

Monday 7/10: Second business day to count

Tuesday 7/11: Thirst business day - First available selection

Instead, I am being able to select Monday 7/10.

I have added these test holidays in to see how it will handle multiple days together (Thanksgiving and Christmas especially) before making the change.

thanks,

Brian

 

0 0
SELECTED ANSWER
replied on July 3, 2023

Which one of my comments are you working with?

The one you replied to (this one), or the second one that I posted (this one)?

Because I believe the second one I posted (not the one you replied to) is a better solution in the long-run.

0 0
replied on July 6, 2023

Matthew -- Somehow I got the code jumbled up and yes the second option is working. Thanks for setting me straight.

Brian

1 0
replied on July 6, 2023

Hurray!

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

Sign in to reply to this post.