Javascript for date picker collection

asked on April 6, 2017

Good day all,

I have a leave form and the user is allowed to submit several requests in the same form.
I have a start date field, end date field, and a dropdown field to select the type of leave and it is in a collection.

The problem is , users can submit dates that overlap with eachother.
i already had javascript code to validate so that the end date cannot be less than the start date in each row for the collection.

i was wondering whether it would be possible with javascript code to restrict the start date from not being less than the previously submitted end date?

below is my form screen :

as you can see, the 10th of April is being selected for sick leave while the above request is from 6th April till 12th April.

Any help will be appreciated.

0 0

replied on April 7, 2017

Hi Claudette,

Here is a demo, it sets start date to have min equal to end date in previous row, and if there is no such row set min equal to today (I borrowed part of the code from your previous post):

$(document).ready(function(){
  var todaysDate = new Date(); 
  var year = todaysDate.getFullYear(); 						
  var month = ("0" + (todaysDate.getMonth() + 1)).slice(-2);	
  var day = ("0" + todaysDate.getDate()).slice(-2);			
  var minDate = (year +"-"+ month +"-"+ day);
  
  function updateEndDate () 
  {
    $('.EndDate input').each(function(index,elm){
      var minimum = $(elm).closest('tr').find('.StartDate input').val();
      if (minimum) {
        var minSplit = [];
        minSplit = minimum.split("/");
        var newMin = (minSplit[2]+"-"+minSplit[0]+"-"+minSplit[1]);
        $(elm).attr('min',newMin);
      }
      else {
        $(elm).attr('min',minDate);
      }
    });
  }
  function updateStartDate ()
  {
    $('.StartDate input').each(function(index,elm){
      var row = $(elm).closest('tr').index();
      if (row == 0) {
        $(elm).attr('min',minDate);
      }
      else {
        var minimum = $(elm).closest('tr').prev().find('.EndDate input').val();
        if (minimum) {
          var minSplit = [];
          minSplit = minimum.split("/");
          var newMin = (minSplit[2]+"-"+minSplit[0]+"-"+minSplit[1]);
          $(elm).attr('min',newMin);
        }
        else {
          $(elm).attr('min',minDate);
        }
      }
    });
  }
  
  $('.StartDate input').change(updateEndDate);
  $('.EndDate input').change(updateStartDate);
  updateStartDate();
  updateEndDate();
  $('.cf-table-add-row').click(function() {
    $('.StartDate input').change(updateEndDate);
    $('.EndDate input').change(updateStartDate);
    updateStartDate();
    updateEndDate();
  });

});

0 0

View 1 previous reply

replied on April 10, 2017 • Show version history

Hi Rui

I configured the code for a collection and i also changed the code so that the minimum start date in the first row is 01-01-2016 and not todays date.
The problem i am having is that if my end date in the first row is 13-04-2017.

The 13-04-2017 should not be available for the start date in the second row. it should be the 14-04-2017.

this is my current code :

$(document).ready(function(){
  			
  var minDate = (2015 +"-"+ 01 +"-"+ 01);
  
  function updateEndDate () 
  {
    $('.EndDate input').each(function(index,elm){
      var minimum = $(elm).closest('div.form-q').find('.StartDate input').val();
      if (minimum) {
        var minSplit = [];
        minSplit = minimum.split("/");
        var newMin = (minSplit[2]+"-"+minSplit[0]+"-"+minSplit[1]);
        $(elm).attr('min',newMin);
      }
      else {
        $(elm).attr('min',minDate);
      }
    });
  }
  function updateStartDate ()
  {
    $('.StartDate input').each(function(index,elm){
      var row = $(elm).closest('div.form-q').index();
      if (row == 0) {
        $(elm).attr('min',minDate);
      }
      else {
        var minimum = $(elm).closest('div.form-q').prev().find('.EndDate input').val();
        if (minimum) {
          var minSplit = [];
          minSplit = minimum.split("/");
          var newMin = (minSplit[2]+"-"+minSplit[0]+"-"+minSplit[1]);
          $(elm).attr('min',newMin);
        }
        else {
          $(elm).attr('min',minDate);
        }
      }
    });
  }
  
   $('.StartDate input').change(updateEndDate);
    $('.EndDate input').change(updateStartDate);
  updateStartDate();
  updateEndDate();
  $('.cf-collection-append').click(function() {
   $('.StartDate input').change(updateEndDate);
   $('.EndDate input').change(updateStartDate);
    updateStartDate();
    updateEndDate();
  });
});

Any help please?

0 0

SELECTED ANSWER

replied on April 10, 2017

If you need the date of next day, you could use moment.js (which is already used in Forms) and update the script by replacing the if (minimum) {} with the following:

if (minimum) {
          var minDate = moment(minimum, 'M/DD/YYYY').add('days', 1);
          $(elm).attr('min',moment(minDate).format("YYYY-MM-DD"));
        }

1 0

replied on April 10, 2017

Thank you Rui. it works perfect now. i appreciate the help!! :)

0 0

Question

Question

Javascript for date picker collection

Answer

Replies

Sign in to reply to this post.