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

Question

Question

Forms 10.2 Calendar Restricted Date JavaScript Needed!

Forms Laserfiche Version 10 How To
Updated June 23, 2022
asked on September 5, 2017

Hey everyone,

 

Can someone please help me write the appropriate JavaScript for my Form? Here's what I'm trying to do... using the out-of-box calendar provided in Laserfiche Forms 10.2, I want to be able to restrict what dates a user is able to select from that calendar. More specifically, I ONLY want them to be able to select Saturdays, no other day of the week. What do I need to do to make that work? Any help is greatly appreciated!

 

 

Thanks,

 

Ryan

SaturdaysOnly.PNG
SaturdaysOnly.PNG (13.99 KB)
Download
0 0

Answer

SELECTED ANSWER
replied on January 22, 2018

Hi Ryan,

For the first form, change the script to be like this (remove "numberOfMonths: 2" if you don't like two months displayed together):

$(document).ready(function(){
  $('td[data-title="Total:"] input[type="text"]').attr('readonly', 'True');
  $('td[data-title="Total"] input[type="text"]').attr('readonly', 'True');
  var today = new Date();
  var minDate = new Date(today.getFullYear(), today.getMonth()-1, +1);
  var maxDate = new Date(today.getFullYear(), today.getMonth()+1, +0);
  function isCorrectDate(n, target) {
    var t = n.getDay();
    return (t==target && n >= minDate && n <= maxDate);
  }
  function checkField(input, inst) {
    if ($(input).closest('li').hasClass('endingFri')) {
      $(input).datepicker("option", {
        beforeShowDay: function(n) {
          return [isCorrectDate(n, 5),""]
        },
        minDate: minDate,
        maxDate: maxDate,
        numberOfMonths: 2
      });
    }
    if ($(input).closest('li').hasClass('endingSat')) {
      $(input).datepicker("option", {
        beforeShowDay: function(n) {
          return [isCorrectDate(n, 6),""]
        },
        minDate: minDate,
        maxDate: maxDate,
        numberOfMonths: 2
      });
    }
  }
  $.datepicker.setDefaults( {beforeShow: checkField} );
  window.Parsley.addValidator('ending', {
    validateString: function(value, target) {
      return isCorrectDate(new Date(value), parseInt(target));
    },
    messages: {
      en: 'Not valid date.'
    }
  });
  $('.endingFri input').attr('data-parsley-ending','5');
  $('.endingSat input').attr('data-parsley-ending','6');
})

For the second form, use the following script (CSS class of the date field is specificDate):

$(document).ready(function(){
  function isCorrectDate(n) {
    var t = n.getDate();
    return (t==1 || t==16);
  }
  function checkField(input, inst) {
    if ($(input).closest('li').hasClass('specificDate')) {
      $(input).datepicker("option", {
        beforeShowDay: function(n) {
          return [isCorrectDate(n),""]
        },
      });
    }
  }
  $.datepicker.setDefaults( {beforeShow: checkField} );
  window.Parsley.addValidator('specific', {
    validateString: function(value) {
      return isCorrectDate(new Date(value));
    },
    messages: {
      en: 'Not valid date.'
    }
  });
  $('.specificDate input').attr('data-parsley-ending','');
})

 

2 0

Replies

replied on September 5, 2017

Hi Ryan,

Here is a demo for Forms 10.2 and above  (set date field with CSS class 'weekEnding'):

$(document).ready(function(){
  function isCorrectDate(n) {
    var t = n.getDay();
    var d = n.getDate();
    return (t==6);
  }
  function checkDate(n) {
    return[isCorrectDate(n),""];
  }
  function checkField(input, inst) {
    if ($(input).closest('li').hasClass('weekEnding')) {
      $(input).datepicker("option", {beforeShowDay: checkDate});
    }
  }
  $.datepicker.setDefaults( {beforeShow: checkField} );
  window.Parsley.addValidator('sat', {
    validateString: function(value) {
      return isCorrectDate(new Date(value));
    },
    messages: {
      en: 'Not valid date.'
    }
  });
  $('.weekEnding input').attr('data-parsley-sat','');
})

 

1 0
View 1 previous reply
replied on November 9, 2017

Hi Rui, 

 

I am using the same Javascript to populate it based on selecting on Wednesday and the date format specified is dd/MM/yyyy

 

But, what I have found is, when selecting 1/11/2017 it is fine as per below

 

But, when selecting another Wednesday it is advising that it is invalid? 

 

 

Thank you

Ziad

 

0 0
replied on November 9, 2017

Hi Ziad,

The original script only supports date format "MM/dd/yyyy" so the calculation was wrong.

You can change the script from

validateString: function(value) {
      return isCorrectDate(new Date(value));
},

to

validateString: function(value) {
      return isCorrectDate(moment(value, "DD/MM/YYYY").toDate());
    },

to make it work with your date format.

1 0
replied on November 9, 2017

Hi Rui,

 

Thank you so much for the quick response, 

 

That is perfect, 

 

Thank you

Ziad

0 0
replied on January 22, 2018

Rui - Could you see my post below in this thread, posted today, regarding the additional calendar requirements I've been given? You seem to be the expert in figuring out that calendar JS, so I'm hoping you can come through again! Wanted to reply to you directly in case you aren't subscribed to this Answers post. Thanks!

0 0
replied on September 5, 2017

You sir, are a champion! Thank you so much... worked like a charm, once I figured out how to apply the CSS Class... thank you!!!

0 0
replied on September 6, 2017

Rui, could you help me further with this?

It has since come to light that we also need to have a secondary calendar on our Form. This calendar will be for selecting weeks ending in Fridays, and only pertains to certain employees.

My assumption was that I could apply your same coding above to it, only, assign it a different CSS class and change the "sat's" to "fri's"... but I attempted that just now, and didn't have any luck. What am I doing wrong?

Do I somehow need to combine the code? Basically have two if > then statements based on which Calendar and CSS class comes up in the same code block?

0 0
replied on September 6, 2017

The function isCorrectDate need to be updated with the actual correct date. n.getDay()==6 means Sat so for Fri it need 5.

Here is the updated code (set date field with CSS class 'endingFri' or 'endingSat'):

$(document).ready(function(){
  function isCorrectDate(n, target) {
    var t = n.getDay();
    return (t==target);
  }
  function checkField(input, inst) {
    if ($(input).closest('li').hasClass('endingFri')) {
      $(input).datepicker("option", {beforeShowDay: function(n) {return [isCorrectDate(n, 5),""]}});
    }
    if ($(input).closest('li').hasClass('endingSat')) {
      $(input).datepicker("option", {beforeShowDay: function(n) {return [isCorrectDate(n, 6),""]}});
    }
  }
  $.datepicker.setDefaults( {beforeShow: checkField} );
  window.Parsley.addValidator('ending', {
    validateString: function(value, target) {
      return isCorrectDate(new Date(value), parseInt(target));
    },
    messages: {
      en: 'Not valid date.'
    }
  });
  $('.endingFri input').attr('data-parsley-ending','5');
  $('.endingSat input').attr('data-parsley-ending','6');
})

 

1 0
replied on September 7, 2017

Thank you so much!! It worked again... just as you suggested. Appreciate the help!

0 0
replied on January 22, 2018

Rui, we seem to have more restrictions needed on calendars that the out-of-the-box Forms solutions cannot offer. You've now been able to help me twice with these restrictions, so if you could do it again, I'd greatly appreciate it!

This time, the restrictions are on two different forms, and therefore require different JS requirements. The first is the Form we'd been discussing above (limiting calendar selection to only to Saturdays or Fridays). In addition to the coding you provided me (see below), they would now like to limit the calendar to only the current month, or the previous month for selection. Can we achieve this? Here is the code, as it currently stands, on that Form.

$(document).ready(function(){
  $('td[data-title="Total:"] input[type="text"]').attr('readonly', 'True');
  $('td[data-title="Total"] input[type="text"]').attr('readonly', 'True');
  function isCorrectDate(n, target) {
    var t = n.getDay();
    return (t==target);
  }
  function checkField(input, inst) {
    if ($(input).closest('li').hasClass('endingFri')) {
      $(input).datepicker("option", {beforeShowDay: function(n) {return [isCorrectDate(n, 5),""]}});
    }
    if ($(input).closest('li').hasClass('endingSat')) {
      $(input).datepicker("option", {beforeShowDay: function(n) {return [isCorrectDate(n, 6),""]}});
    }
  }
  $.datepicker.setDefaults( {beforeShow: checkField} );
  window.Parsley.addValidator('ending', {
    validateString: function(value, target) {
      return isCorrectDate(new Date(value), parseInt(target));
    },
    messages: {
      en: 'Not valid date.'
    }
  });
  $('.endingFri input').attr('data-parsley-ending','5');
  $('.endingSat input').attr('data-parsley-ending','6');
})


The second Form's calendar restriction does not have the same rules applied to it as above. However, the goal is to have it only show the 1st and the 16th as valid dates to select in each month. Everything else should be greyed out. Is it possible to achieve this? Thank you!

0 0
SELECTED ANSWER
replied on January 22, 2018

Hi Ryan,

For the first form, change the script to be like this (remove "numberOfMonths: 2" if you don't like two months displayed together):

$(document).ready(function(){
  $('td[data-title="Total:"] input[type="text"]').attr('readonly', 'True');
  $('td[data-title="Total"] input[type="text"]').attr('readonly', 'True');
  var today = new Date();
  var minDate = new Date(today.getFullYear(), today.getMonth()-1, +1);
  var maxDate = new Date(today.getFullYear(), today.getMonth()+1, +0);
  function isCorrectDate(n, target) {
    var t = n.getDay();
    return (t==target && n >= minDate && n <= maxDate);
  }
  function checkField(input, inst) {
    if ($(input).closest('li').hasClass('endingFri')) {
      $(input).datepicker("option", {
        beforeShowDay: function(n) {
          return [isCorrectDate(n, 5),""]
        },
        minDate: minDate,
        maxDate: maxDate,
        numberOfMonths: 2
      });
    }
    if ($(input).closest('li').hasClass('endingSat')) {
      $(input).datepicker("option", {
        beforeShowDay: function(n) {
          return [isCorrectDate(n, 6),""]
        },
        minDate: minDate,
        maxDate: maxDate,
        numberOfMonths: 2
      });
    }
  }
  $.datepicker.setDefaults( {beforeShow: checkField} );
  window.Parsley.addValidator('ending', {
    validateString: function(value, target) {
      return isCorrectDate(new Date(value), parseInt(target));
    },
    messages: {
      en: 'Not valid date.'
    }
  });
  $('.endingFri input').attr('data-parsley-ending','5');
  $('.endingSat input').attr('data-parsley-ending','6');
})

For the second form, use the following script (CSS class of the date field is specificDate):

$(document).ready(function(){
  function isCorrectDate(n) {
    var t = n.getDate();
    return (t==1 || t==16);
  }
  function checkField(input, inst) {
    if ($(input).closest('li').hasClass('specificDate')) {
      $(input).datepicker("option", {
        beforeShowDay: function(n) {
          return [isCorrectDate(n),""]
        },
      });
    }
  }
  $.datepicker.setDefaults( {beforeShow: checkField} );
  window.Parsley.addValidator('specific', {
    validateString: function(value) {
      return isCorrectDate(new Date(value));
    },
    messages: {
      en: 'Not valid date.'
    }
  });
  $('.specificDate input').attr('data-parsley-ending','');
})

 

2 0
replied on January 23, 2018

You're awesome Rui, thank you so much, both codes worked like a charm!

0 0
replied on June 23, 2022

Hi Rui,

Would you 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
replied on July 19, 2019

Hey everyone:

I had a look at the code that was included here, and I was able to get a calendar to display Sundays instead, however I was wondering if it would be possible to instead only have something like every second Sunday?  We are trying to limit a calendar to this for a form to alleviate confusion - this would also only be every second Sunday from the beginning of the year, not the first and third Sunday of each month.

Thanks to anyone that can help!

Marty Gaffney - Network Analyst
Town of Okotoks

replied on October 17, 2019

Hey:

This information is great for specifying one day of the week, and I've been able to get it to work, but would it be possible to specify either every 2nd Friday of the week within each month, or every 2nd Friday from a specific start date in the year?

Please let me know if it might be possible to modify this code accordingly - thanks!

Marty Gaffney - Town of Okotoks

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

Sign in to reply to this post.

Details
Attachments
Related Posts
Loading ...