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

Question

Question

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

Laserfiche Forms Web Customizations
Updated November 15, 2022
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
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...