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(); }); });