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

Question

Question

JS making datepicker icon disappear. Can someone help?

asked on October 20, 2022 Show version history

I am working on a Travel Request form and I want the Departure Date (.TravelDate) to restrict the min and max date in this field to just the Travel Dates (.startDate/.endDate) that the user inputs in the above section.  I am not an expert on JavaScript, but was able to gather enough information from LF Answers to get what I wanted to work.  However, on the Departure Date field the datepicker icon now disappears whenever someone clicks inside the field.  Can some help me figure out how to update the JS below to prevent this from happening?  In the picture above you can see the field class in bold blue text.

$(function() {
  $(document).ready(function () {
    
   var todaysDate = new Date();
    
    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 

    $('.startDate input').attr('min',minDate);
 
  });
  
  $('.startDate input').on('change', function(){
    // use start date value or blank if start date is not set
    // adjust the MM/DD/YYYY portion if you're using different formatting in your field
    // the YYYY-MM-DD needs to stay the same because that's how the min/max are set
    var minDate = $(this).val() != '' ? moment($(this).val(),'MM/DD/YYYY').format('YYYY-MM-DD') : '';
    
    // set min date and revalidate field
    $('.endDate input').attr('min', minDate).parsley().validate();
});
    function updateMinMaxDates () {
    var minimum = $('.startDate input').val(); // get Start Date
    var maximum = $('.endDate input').val();   // get End Date
      var minSplit = [];
    minSplit = minimum.split("/");
    var newMin = (minSplit[2]+"-"+minSplit[0]+"-"+minSplit[1]); 
    var maxSplit = [];
    maxSplit = maximum.split("/");
    var newMax = (maxSplit[2]+"-"+maxSplit[0]+"-"+maxSplit[1]);
    $('.TravelDate input').attr('min',newMin); // disable dates before period start date
    $('.TravelDate input').attr('max',newMax); // disable dates after period end date
}
    $('.startDate input').change(updateMinMaxDates);
 
  	$('.TravelDate').on('click',function(){
    	updateMinMaxDates();

  });
});

 

0 0

Replies

replied on October 20, 2022

Do you see any errors in the console?

0 0
replied on October 20, 2022

Hi Jason,

 

Great question!  Here is the error I get in the Console when I click inside the Departure Date field.  

Thanks for your help Jason! smiley

0 0
replied on October 20, 2022 Show version history

Well, there's a lot to unpack in the code, but first things first, you can clean up the code a bit to improve formatting and remove unnecessary code.

 

You have the whole thing wrapped in $(function(){}) but you should only have that or $(document).ready(), not both.

The two serve essentially the same purpose in jQuery (the first is basically shorthand for the second) and nesting them is just overcomplicating things.

 

Also, your updateMinMaxDates() function should probable be defined outside of the document ready event handler since it is called more than once.

 

You have code splitting/parsing the date into the right format in portions, but all you need to do is use moment.

For example,

var today = new Date();
var min = moment(today).format('YYYY-MM-DD');

When you have an actual date object like that you don't need to specify the source format like you do when you pull from a field.

i.e., moment(date) vs moment(fieldDate,"MM/DD/YYYY")

The parsing in your updateMinMaxDates function should also be changed, to use the second one since it is pulling from a field, so you can get rid of all that parsing/splitting.

I suspect this may be at least part of the issue. The Parse error in the console suggests something isn't being read correctly, but switching to moment will just take that off the table anyway.

 

Lastly, get an editor tool like Visual Studio Code where you can paste your JavaScript to identify/correct any syntax errors more easily.

2 0
replied on October 21, 2022

Thank you for your help Jason.  Unfortunately, when I try to clean up the JS it stops functioning as intended.  I will pick working at it.  I appreciate your time. :)

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

Sign in to reply to this post.