Question

How to restrict date picker to specific dates of the month?

Laserfiche Forms Web Customizations

Updated November 8

asked on October 29, 2019

I have two date fields:

1. From:

This date picker should only allow you to select the 1st or 16th of every month

2. To:

This date picker should only allow you to select the 15th or last day of every month

$(document).ready(function(){
  $("#q9").click(function(){

  function isCorrectDate(n) {
    var t = n.getDay();
    var d = n.getDate();
    return (d==1 || d==16);
  }
  function checkDate(n) {
    return[isCorrectDate(n),""];
  }
  function checkField(input, inst) {
    if ($(input).closest('li').hasClass('myDate')) {
      $(input).datepicker("option", {beforeShowDay: checkDate});
    }
  }
  $.datepicker.setDefaults( {beforeShow: checkField} );
  window.Parsley.addValidator('secondsat', {
    validateString: function(value) {
      return isCorrectDate(new Date(value));
    },
    messages: {
      en: 'Please use the date picker.'
    }
  });
  $('.myDate input').attr('data-parsley-secondsat','');
  
  });
  
  
    $("#q10").click(function(){

  function isCorrectDate(n) {
    var t = n.getDay();
    var d = n.getDate();
    var m = n.getMonth();
    var y = n.getYear();
    var lastDay = new Date(y, m + 1, 0);    
    //console.log(lastDay.getDate());
    return (d==15 || d==lastDay.getDate());
  }
  function checkDate(n) {
    return[isCorrectDate(n),""];
  }
  function checkField(input, inst) {
    if ($(input).closest('li').hasClass('toDate')) {
      $(input).datepicker("option", {beforeShowDay: checkDate});
    }
  }
  $.datepicker.setDefaults( {beforeShow: checkField} );
  window.Parsley.addValidator('secondsat', {
    validateString: function(value) {
      return isCorrectDate(new Date(value));
    },
    messages: {
      en: 'Please use the date picker.'
    }
  });
  $('.toDate input').attr('data-parsley-secondsat','');

    });

I found that the above does not allow me to submit the form and will only work if I click on the date picker. If I click on the field the script doesn't seem to work properly.

0 0

Answer

SELECTED ANSWER

replied on October 30, 2019

Try adding the class onesixteen to q9 and fifteenlast to q10. From there add the code below to the javascript section.

$(document).ready(function(){
	function isCorrectDate1or16(n) {
		var date = jQuery.datepicker.formatDate('yy-mm-dd', n);
		var t = n.getDate();
		return (t==1 || t == 16);
	}
	function isCorrectDate15orLast(n){
		var date = jQuery.datepicker.formatDate('yy-mm-dd', n);
		var t = n.getDay();
		var d = n.getDate();
		var m = n.getMonth();
		var y = n.getYear();
		var lastDay = new Date(y, m + 1, 0);    
		return (d==15 || d==lastDay.getDate());
	}

	function check1or16Date(n) {
		return[isCorrectDate1or16(n),""];
	}
  
	function check15orLastDate(n){
		return[isCorrectDate15orLast(n),""];
	}
	
	function checkField(input, inst) {
		if ($(input).closest('li').hasClass('onesixteen')) {
			$(input).datepicker("option", {beforeShowDay: check1or16Date});
		}
		if ($(input).closest('li').hasClass('fifteenlast')) {
			$(input).datepicker("option", {beforeShowDay: check15orLastDate});
		}
	}
	
	$.datepicker.setDefaults( {beforeShow: checkField} );
	
	window.Parsley.addValidator('onesixteen', {
		validateString: function(value) {
			return isCorrectDate1or16(new Date(value));
		},
		messages: {
			en: 'Not valid date.'
		}
	});
	
	window.Parsley.addValidator('fifteenlast', {
		validateString: function(value) {
			return isCorrectDate15orLast(new Date(value));
		},
		messages: {
			en: 'Not valid date.'
		}
	});
	
    $('.onesixteen input').attr('data-parsley-onesixteen', '');
    $('.fifteenlast input').attr('data-parsley-fifteenlast', '');
});

0 0

View 6 previous replies

replied on November 5, 2019

That did the trick, thanks Michael!

0 0

replied on November 14, 2022

I am having trouble with this $.datepicker.SetDefaults method. The error is that the object is undefined, but I do not understand the syntax.

Every tutorial on jQuery uses object selectors that look like this with parentheses and the getting started guide from the LF Support site recommends accessing objects this way.

$('.className')

What is $. representing here, what type of object is datepicker if not a class and why might that object not exist on my form if I have a date field?

0 0

replied on November 14, 2022

The $ symbol is shorthand used by JQuery to refer to objects.

Thus if you want to select the element with ID of "hi_mom" you can do it like this:

//This is JQuery shorthand ($ meaning to find the object and # meaning with the following id):
$('#hi-mom")

//It does the same thing as this does in vanilla Javascript:
document.getElementById("hi-mom")

When you follow the $ with a period, then it just referring to a property or function under that object. Because we haven't defined this down to a specific object, it's going to be a global setting for all datepicker instances on the form.

You would think that you could add in references to the specific field instead of the global reference, but the datepicker plugin doesn't work like that:

//Referencing a specific instance - doesn't work.
$('#my-date-field').datepicker.setDefaults();

//Referencing all instances - this is how it works.
$.datepicker.setDefaults();

This is because the datepicker function isn't actually added on to the individual fields. There is a trigger that is run from the field, but the function itself only exists at a global level. So we add the setDefault to all instances on the form, and then in the function that is called from it (beforeShow in this example) we have rules to help it determine what to do based on which class it has.

I just tried added the code from @████████'s 2019 post above into the classic designer on version 11.0.2201.20436 and it worked perfectly for me using two standard date fields with the indicated class names.

1 0

replied on November 14, 2022 • Show version history

Thank you for that explanation, I could not find anything searching for "jquery $." about this.

When looking at the datepicker div child objects, what tag am I looking for that represents a property or function with this name.

Trying to figure out if the name of this property might have changed on the new forms designer.

Even on the classic designer when digging through the DIV, I don't see the word datepicker anywhere, only ui-datepicker

Edit: I guess what I should ask since it is globally defined is datepicker a method written in one of the javascript libraries or an HTML object on the webpage?

This is as far as I got in the new designer. It seems the datepicker method has been replaced, I found the replacement for it by looking for one of it's methods being called (parseDate). The problem is that it is assigned to a variable called n, assigned as M.Config. M is passed to the function c(M). I can't seem to follow from any of the other calls to the function c what M could be. Everything is one letter assigned to another letter passed as a parameter in an infinite chain.

This code looks like it was written by a robot that did not want anyone to read it.

1 0

replied on November 14, 2022

That does not surprise me at all if the functionality changed with the new designer, so many things "under the hood" are different with the new designer than the classic.

Unless I'm mistaken, the datepicker is an extra Javascript library that is added, but if it isn't added to the new designer, then the code provided in this example is not going to work.

I can't even help test/tweak/review how it would work, since on prem version 11.0.2201.20436 doesn't include custom Javascript functionality for the new designer.

0 0

replied on November 14, 2022

Oh yea it literally just came to Cloud and already everyone is trying to dig into it right away.

But that clears things up here, the calendar is not the same in the new designer so any posts people are finding on answers about how to modify the classic one may not work.

1 0

replied on November 14, 2022

I ran into this issue as well and found the following guide helpful:

https://doc.laserfiche.com/laserfiche.documentation/en-us/Default.htm#../Subsystems/ProcessAutomation/Content/Forms-Current/Javascript-and-CSS/TheLFFormObject.htm

We've had to rework alot of our in-house stuff to use the new LFForm object.

1 0

replied on November 15, 2022

I don't see anything in here about how to restrict dates on the calendar picker.

0 0

replied on November 15, 2022

After inspecting elements on the form, I suspect that the new designer is using the flatpickr plugin for the date lookup. If that's correct, then they have code examples on their website: https://flatpickr.js.org/

If you inspect the element from LFForms and one of the examples from the flatpickr site, you'll see common class names (like flatpickr and flatpickr-input).

But, since on prem 11.0.2201.20436 doesn't have Javascript for the new designer, I can't even start to tinker and play with it.

1 0

Replies

replied on March 30, 2020

Hello:

This works fantastic for blocking out specific dates within a month, however I was wondering - might there be a way to expand on this, where the Date Picker control could reference a specific set of dates in the year, and only make these specific date appear?

Marty Gaffney - Network Analyst
Town of Okotoks

0 0

replied on November 7

Hi, we have supported configuring holiday calendars on Forms 12.

You can see other changes from: Laserfiche 12 Changelog

Get Laserfiche Forms 12 package from: Laserfiche 12 - Downloads

0 0

replied on November 8

I haven't installed version 12 yet (it's been out less than 48 hours) - but from what I saw in the demonstration videos over the last few months and what I'm reading in the release notes - it doesn't sound like this enhancement impacts the items discussed in this post and its replies.

This post and replies are about modifying the date picker in the Forms designer. What was demo'd talks about holidays being used for selecting delays and dates in task assignments and timer events - things like that - similar to the existing "Exclude Weekends" option. The text in the release notes seems to support that as well:

Holiday calendar for business day calculations
Specify holidays for use in existing business day calculations, including rules for observing holidays that fall on weekends
Used alongside existing “exclude weekends” option

That doesn't sounds like it impacts the date picker in either Forms Designer at all.

The only thing I see in the release notes that mentions the date picker is under the header Forms > Locale fixes and states:

Date picker is now localized on forms and in forms designer (324926)

0 0

You are not allowed to follow up in this post.

Question

Question

How to restrict date picker to specific dates of the month?

Answer

Replies

Sign in to reply to this post.