Question

Javascript Date Picker

Forms

Updated March 17, 2020

asked on March 16, 2020 • Show version history

Hello,

I need some help with JS, i have the following code:

 var todaysDate = new Date(); // Gets today's date
  
  		// Max date attribute is in "YYYY-MM-DD".  Need to format today's date accordingly
  		 var year = todaysDate.getFullYear();                        // YYYY
   		var month = ("0" + (todaysDate.getMonth() + 1)).slice(-2);  // MM
   		var day = ("0" + todaysDate.getDate()).slice(-2);           // DD
   		var minDate = (year +"-"+ month +"-"+ day); // Results in "YYYY-MM-DD" for today's date 
   		var maxDate = todaysDate;

            // Now to set the max date value for the calendar to be today's date
  
  			$('.test input').on('change', function(){
  				if ($('.test input[value = "1"]').is(':checked')){
           			$('.sdate input').attr('min',minDate);
                } else {
                    $('.sdate input').attr(maxDate);
                }
                
            });

The Radio button with class test has 4 values, I want that when value 1 OR 3 are selected the date starts from Today, however when the values 2 or 4 are selected the whole calendar should be available...

Thanks in advance!

0 0

Answer

SELECTED ANSWER

replied on March 16, 2020 • Show version history

Perfect. I have a much better way than using the input[value=""]. You want to use the actual ID of each of the buttons' inputs. Laserfiche currently uses a system where each radio button or checkbox's ID is consecutively named like this: Field##-0. Just like an array, the value of the number after the dash increments by 1 and starts at 0. So the code for something like this would look like this:

//Sets todaysDate to current date
var todaysDate = moment();
  //Formats todaysDate to match LF Forms date picker (Using Moment.js)
  var minDate = todaysDate.format('M/D/YYYY');
  //Checks if the first or second property of the radio button field is selected
  $('.test').on('change', function(){
    
    if(($('#FieldXX-0').prop('checked') == true) || ($('#FieldXX-2').prop('checked') == true)){
      
      $('.sdate input').attr('min', minDate);
      
    }
    else{
     //removes the min attribute to allow the calendar to open back up 
      $('.sdate input').removeAttr('min');
      
    }
    
  });

The "XX" in #FieldXX-0 and #FieldXX-2 need to be replaced by the field ID number. This is got where I show you in the picture below.

In my test process, it was 68. Yours is likely different.

Your version shouldn't matter, but I'm using the most recent version of Forms and Moment.js is included in the install. If you have a custom version or a very old version of Forms this may not work.

Let me know if you have any issues. I'll be happy to help or even elaborate on the code if need be. Hopefully, my comments are of use but feel free to remove them if you don't like them.

EDIT: Conveniently I was just working on some forms I have that utilize Moment.js and it looks like I lead you wrong on the format portion. The correct format (as of the most current version) is M/D/YYYY. I have changed the code to reflect the correct format to show up on the date picker. Good luck!

0 0

Replies

replied on March 16, 2020

Hi Sonia,

Quick question before I write you up some code. Will the values in the radio button be changing at all or will they remain constant? By that I mean there isn't anything acting on them to make them anything other than what they are set to in the Layout Builder correct?

0 0

replied on March 16, 2020

That's correct, the values will be always same, it just is meant when there person is allowed to be flexible with date or is the date restrictive from today onwards.

Thanks

0 0

SELECTED ANSWER

replied on March 16, 2020 • Show version history

//Sets todaysDate to current date
var todaysDate = moment();
  //Formats todaysDate to match LF Forms date picker (Using Moment.js)
  var minDate = todaysDate.format('M/D/YYYY');
  //Checks if the first or second property of the radio button field is selected
  $('.test').on('change', function(){
    
    if(($('#FieldXX-0').prop('checked') == true) || ($('#FieldXX-2').prop('checked') == true)){
      
      $('.sdate input').attr('min', minDate);
      
    }
    else{
     //removes the min attribute to allow the calendar to open back up 
      $('.sdate input').removeAttr('min');
      
    }
    
  });

The "XX" in #FieldXX-0 and #FieldXX-2 need to be replaced by the field ID number. This is got where I show you in the picture below.

In my test process, it was 68. Yours is likely different.

Your version shouldn't matter, but I'm using the most recent version of Forms and Moment.js is included in the install. If you have a custom version or a very old version of Forms this may not work.

Let me know if you have any issues. I'll be happy to help or even elaborate on the code if need be. Hopefully, my comments are of use but feel free to remove them if you don't like them.

0 0

replied on March 17, 2020

Thanks!

I took the idea of removeAttr but used still my logic...

0 0

You are not allowed to follow up in this post.

Question

Question

Javascript Date Picker

Answer

Replies

Sign in to reply to this post.