comparing dates using script in forms

Question

I am trying to validate date based on date entered in first textbox. If second textbox exceeds one year from the date entered in first textbox, then it should display an alert and blank the second date field textbox. Both the textboxes are readonly and gets the values from calender. I tried the below code but the alert is popping up even if the year is not more than a year. Also ,is it possible to pass 'name3' and 'name4' IDs as parameters. I need to apply this code to 10 rows.

<script>
function fixup()
{
    var parts = document.getElementById('name3').value.split("-");  
    parts[2] = Number(parts[2]) + 1;     
    var pj = parts.join("-");

    var x=document.getElementById('name4').value;
    if(x>pj)
        {
        alert("Expiration date should not be greater than one year from start date");
        document.getElementById('name4').value = "";
        return false;
        }
    return true;
 }



</script>
</head>
<body>
<form onsubmit="return fixup()">
<table>
<tr>
<td><input type="text" name="soname3" id="name3" size="15" readonly="readonly"> 
<img src="../Image/cal.gif" id="" style="cursor: pointer;" onclick="javascript:NewCssCal('name3','MMddyyyy','dropdown',false,'12')" /></td>
 <td><input type="text" name="soname4" id="name4" size="15" readonly="readonly">
 <img src="../Image/cal.gif" id="" style="cursor: pointer;" onclick="javascript:NewCssCal('name4','MMddyyyy','dropdown',false,'12'); " /> </td>
 </tr>
</table>
<input type="submit" value="Submit">
</form>

I did Below code after suggestions by dm03514. but validation is not working..

  function test()
  {
      start = document.getElementById('name3').value;
      end = document.getElementById('name4').value;
      compare(start, end);

  }

  function compare(sDate, eDate)
  {
      function parseDate(input) {
            var parts = input.match(/(\d+)/g);
            return new Date(parts[2], parts[0]-1, parts[1]); //parts[2] is year, parts[0] is month and parts[1] is date.
          }
      var parse_sDate = parseDate(sDate);
  var parse_eDate = parseDate(eDate);
  parse_sDate.setDate(parse_sDate.setFullYear(parse_sDate.getMonth() + 12));
  if(parse_sDate>parse_eDate)
      {
      alert("End date should not be greater than one year from start date");
      }


  }

i think you hsould use `Date` objects, they all0ow you to rather easily work with dates in javascript — dm03514, Jul 14 '13 at 15:01
The date from calender is in MM-dd-yyyy. Then how to use date object to compare date. any help please. — user2581072, Jul 14 '13 at 15:22
@furas.. correct me if I am wrong.. According to my understanding b.getFullYear(); should return the current year. But why it is returning 1913? — user2581072, Jul 14 '13 at 16:09
I was too fast - I remembered that there is strange situation with +100 but it is for `getYear()` ;) Have you test value of `sDate`, `eDate`, `input` and `parts` in `compare()` ? — furas, Jul 14 '13 at 16:18
It seems you use `Date(month, day, year)` but you should `Date(year,month,day)` — furas, Jul 14 '13 at 16:22
Yes, I tested values in compare(). But I get the values from textbox in MM-dd-yyyy. This is the requirement. Please suggest. — user2581072, Jul 14 '13 at 16:25
The formats accepted by the Date class are highly specific to the browser, and to the locale settings of the machine. If you need precise control of the format, then you should try a library, such as [moment.js](http://momentjs.com). — Matt Johnson-Pint, Jul 14 '13 at 16:51

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

I would strongly recommend using a library like moment.js for handling dates. It has extensive date formatting and parsing features as well as comparison helpers:

var d1 = moment(document.getElementById('name3').value, 'YYYY-MM-DD');
var d2 = moment(document.getElementById('name4').value, 'YYYY-MM-DD');

var diff = d2.diff(d1, 'years'); 

if (diff > 0) {
   alert("Expiration date should not be greater than one year from start date");
}

See also:Compare two dates in JS

edited May 23 '17 at 10:25

Community

1
1

answered Jul 14 '13 at 17:09

Kyle Burton

26,788
9
50
60

can't we achieve the functionality with javascript? – user2581072 Jul 14 '13 at 17:13
The moment.js library and the example code are javascript, moment.js handles the date parsing and the subtraction. If you're asking if you can do it w/o any external libraries, then yes you can, the Date object's constructor takes arguments in this order: year, month, day. It is going to be much more difficult to do though, having to take into account months, days and leap year issues. My recommendation is to just use moment.js which handles all of this for you. – Kyle Burton Jul 14 '13 at 17:25
Thanks for your response kyle. I edited the code in order to support Date Objects construction (year, month and day). Due to some limitations, I'll not be able to use the moments.js. However, I learned a new and effective way of date comparison from you. Let me try on Javascript. – user2581072 Jul 14 '13 at 17:34

comparing dates using script in forms

1 Answers1