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

Question

Question

Datepicker Date Comparison: The start date can not be after the end date.

asked on August 21, 2014

 Hello,

 

This is a code I found that will work best for my date comparison application. Here, I'm trying to disable all dates (on the "end date" datepicker button) that come before the selected start date. For example, if I select the start date as 8/22/14, I expect all dates before 8/22/14 to be disabled on the "end date" datepicker button, thus only allowing dates after 8/22/14 to be selected as the end date.

 

The code doesn't work. When testing 8/22/14 as a start date, all dates before 8/22/14 are still enabled for date selection on the "end date" datepicker button. Can anyone help me with my code? Thanks.

0 0

Replies

replied on August 25, 2014 Show version history

I think you will want to do this with Javascript.

 

What you do is have the following configured for your setup. Also, make sure that this triggers whenever the start date changes. You may also want to have the javascript default the end date field to be uneditable until after the first time the start date is changed.

 

$(document).ready(function(){

// Updated code below
  function updateMinimumEndDate () {
    var minimum = $('.StartDate input').val();
    var minSplit = [];
    minSplit = minimum.split("/");
    var newMin = (minSplit[2]+"-"+minSplit[0]+"-"+minSplit[1]);
    $('.EndDate input').attr('min',newMin);
  }

  $('.StartDate input').change(updateMinimumEndDate);
});

EDIT:

This should be the code for the function for the Javascript to work. I have tested and configured it myself. I have removed previous parts of my response in order to keep from the information becoming confusing or misunderstood now that I have revised it to include working code.

2 0
replied on August 26, 2014

Hi Kenneth,

 

It works great!!.  Thank you for the assistance.

 

Tony

0 0
replied on August 25, 2014

Updated the code in my reply. I have tested the solution as well.

1 1
replied on September 10, 2014

I tried to do the same I failed to make it work

 

I tried both code and also tried some found from the internet. and none work for me

 

The goal is if the user choose a start date, he should not be able to pick a date before the startdate in the enddate field

0 0
replied on September 10, 2014 Show version history

two questions:

 

1. What is your standard date display format on your machine? this may affect how that field fills and thus it's capability to react properly.

2. Did you make sure to click the '<>' icon on the top right of the code so as to not copy the code with the line numbers? They can get in the way of things running properly.

 

EDIT:

 

Try this as well:

$(function() {
$(document).ready(function(){

// Updated code below
  function updateMinimumEndDate () {
    var minimum = $('.StartDate input').val();
    var minSplit = [];
    minSplit = minimum.split("/");
    var newMin = (minSplit[2]+"-"+minSplit[0]+"-"+minSplit[1]);
    $('.EndDate input').attr('min',newMin);
    alert(newMin);  // Comment this out after you confirm it's showing you the alert, which will indicate this is running properly
  }

  $('.StartDate input').change(updateMinimumEndDate);
});
});

 

0 0
replied on September 10, 2014

Yes I make it work now, did not copy all the code the first time.

sorry your code work well.

0 0
replied on September 10, 2014

I find also why it does not work on my Real form.

 

The date field format is not M/d/yyyy but dd-MMM-yy. and your code with this format does not work

 

Why the date format is matter, What do I need to chage on your code to make it work with the Date format that the Customer wants (dd-MMM-yy)

0 0
replied on September 10, 2014 Show version history

Please clarify, you are saying the date field is displaying in dd-MMM-yy ? If so, then a lot needs to be done to the code:

 

$(function() {
$(document).ready(function(){

// Updated code below
  function updateMinimumEndDate () {
    var minimum = $('.StartDate input').val();
    var minSplit = [];
    minSplit = minimum.split("-");
    var newYear = ('20'+minSplit[2]);
    if (minSplit[2] > '14')
       newYear = ('19'+minSplit[2]);
    var testMonth = minSplit[1];
    var newMonth = 0;
    switch (testMonth) {
      case 'Dec': newMonth += 1;
      case 'Nov': newMonth += 1;
      case 'Oct': newMonth += 1;
      case 'Sep': newMonth += 1;
      case 'Aug': newMonth += 1;
      case 'Jul': newMonth += 1;
      case 'Jun': newMonth += 1;
      case 'May': newMonth += 1;
      case 'Apr': newMonth += 1;
      case 'Mar': newMonth += 1;
      case 'Feb': newMonth += 1;
      case 'Jan': newMonth += 1;
           break;
    }


    var newMin = (newYear+"-"+newMonth+"-"+minSplit[0]);
    $('.EndDate input').attr('min',newMin);
    alert(newMin);  // Comment this out after you confirm it's showing you the alert, which will indicate this is running properly
  }

  $('.StartDate input').change(updateMinimumEndDate);
});
});

Okay, so the above code will change any year past 2014 to 19_ _ as it needs some way of determining what first two letters to assign to the year field. To change that, change line 10 to reflect the latest possible year it will allow you to set before any number higher will be considered in the 1900's

0 0
replied on September 10, 2014

Yes the today date will be 09-Sep-14

 

I would be prefer 09-Sep-2014 but the format date list in Forms do not have it and we cannot put are own format in the setting

 

0 0
replied on September 10, 2014

I cannot even get that to change if i use javascript to change the date format pattern. It simply does not want to work even though I can get the field to look for the pattern you are asking about. It may not be a limitation of Forms but of HTML5

0 0
replied on September 10, 2014

The big why we use that format in the Customer is :

 

We are in the Montréal, Québec Canada. and here we are majoritary French and we also use english

 

the french date format is dd-MM-yyyy and the English is MM-dd-yyyy

 

so a date like 05-03-2012 could be March 05 or May 03.

 

And the person that will use and review the forms could be french or English users.

 

so the Date format 05-Sep-14 is clearer to realy know the date

0 0
replied on February 26, 2018

Hi:

Might there be a way to modify the code slightly so it would work within a table?  The code worked fine when two Date fields are separated, but when they are together in a table, the expected message comes up (however with "undefined"), and after clicking to get rid of this message, the date picker button for the End Date goes away?

0 0
replied on March 25, 2021

I know this is an old post, but I need this to work in a collection. What code do I need to add for it to do that?

0 0
replied on February 1, 2022

Is there anyone who knows how to get the Latest date in Database using Loop-up forms?

Hope you can help me.

 

Thanks.

You are not allowed to follow up in this post.

Sign in to reply to this post.