jQuery More & Less Than

Question

I'm trying to display an alert if the value is equal or great than the minimum value and less than the maximum set value. Some how if I set dob to '01-09-1996' the alert is still triggered? Would somebody point out what I'm doing wrong? Thank you.

$(function() {
    $('#date1 input').autotab_magic().autotab_filter('numeric');

    $(".eligibilityform").submit(function(e) {

        // Input Values
        var day = $("#day").val();
        var month = $("#month").val();
        var year = $("#year").val();

        // DOB Value
        var dob = new Date(day + '-' + month + '-' + year);

        // DOB Rules
        var mindob = new Date("01-09-1996");
        var maxdob = new Date("31-08-2000");

        // DOB Eligibility
        if (dob >= mindob && dob <= maxdob) {
            alert("Welcome");

            // Season Eligibility
            var spring2015min = new Date("01-09-1997");
            var spring2015max = new Date("31-08-1998");
            if (dob >= spring2015min && dob <= spring2015max) {
                alert("Spring 2015");
            }
            var summer2015min = new Date("01-09-1997");
            var summer2015max = new Date("31-08-1999");
            if (dob >= summer2015min && dob <= summer2015max) {
                alert("Summer 2015");
            }
            var autumn2015min = new Date("01-01-1998");
            var autumn2015max = new Date("31-08-1999");
            if (dob >= autumn2015min && dob <= autumn2015max) {
                alert("Autumn 2015");
            }
            var spring2016min = new Date("01-09-1998");
            var spring2016max = new Date("31-08-1999");
            if (dob >= spring2016min && dob <= spring2016max) {
                alert("Spring 2016");
            }
            var summer2016min = new Date("01-09-1998");
            var summer2016max = new Date("31-08-2000");
            if (dob >= summer2016min && dob <= summer2016max) {
                alert("Summer 2016");
            }
            var autumn2016min = new Date("01-01-1998");
            var autumn2016max = new Date("31-08-2000");
            if (dob >= autumn2016min && dob <= autumn2016max) {
                alert("Autumn 2016");
            }

        } else {
            alert("Sorry");
        }

        return false;
    });
});

Answer

// Eligibility
$(function() {
  $('#date1 input').autotab_magic().autotab_filter('numeric');
  $('.error-message').hide();
  $('.success-message').hide();
  $('.seasons').hide();
  $('.seasons li').hide();
  $(".eligibilityform").submit(function(e){
    // Input Values
    var day = $("#day").val();
    var month = $("#month").val();
    var year = $("#year").val();
    // DOB Value
    var dob = new Date(month+'/'+day+'/'+year);
    // DOB Rules
    var mindob = new Date("09/01/1997");
    var maxdob = new Date("08/31/2000");
    // DOB Eligibility
    if (dob >= mindob && dob <= maxdob) {
      $('.success-message').show();
      $('.intro-message').hide();
      $('.error-message').hide();
      $('.eligibilityform').hide();
      $('.seasons').show();
      // Season Eligibility
      var spring2015min = new Date("09/01/1997");
      var spring2015max = new Date("08/31/1998");
      if (dob >= spring2015min && dob <= spring2015max){
              $('.seasons li.one').show();
      }
      var summer2015min = new Date("09/01/1997");
      var summer2015max = new Date("08/31/1999");
      if (dob >= summer2015min && dob <= summer2015max){
        $('.seasons li.two').show();
      }
      var autumn2015min = new Date("01/01/1998");
      var autumn2015max = new Date("08/31/1999");
      if (dob >= autumn2015min && dob <= autumn2015max){
        $('.seasons li.three').show();
      }
      var spring2016min = new Date("09/01/1998");
      var spring2016max = new Date("08/31/1999");
      if (dob >= spring2016min && dob <= spring2016max){
        $('.seasons li.four').show();
      }
      var summer2016min = new Date("09/01/1998");
      var summer2016max = new Date("08/31/2000");
      if (dob >= summer2016min && dob <= summer2016max){
        $('.seasons li.five').show();
      }
      var autumn2016min = new Date("01/01/1998");
      var autumn2016max = new Date("08/31/2000");
      if (dob >= autumn2016min && dob <= autumn2016max){
        $('.seasons li.six').show();
      }
    } else {
      $('.intro-message').hide();
      $('.success-message').hide();
      $('.error-message').show();
    }
    return false;
  });
});

you are using a string comparison. Convert to date and use date comparison. http://stackoverflow.com/questions/492994/compare-two-dates-with-javascript — kanchirk, Jul 01 '15 at 15:04
Even so, this *particular* string comparison shouldn't succeed. "01-09-1996" (the string) is less than "01-09-1997" (the string), and the alert does *not* fire here: http://codepen.io/paulroub/pen/JdpbXy. It *does* fire if I change `dob` to "01-09-1998". Are you sure those are the exact values in use, no whitespace involved, etc.? — Paul Roub, Jul 01 '15 at 15:07

Jamie Rees · Accepted Answer · 2015-07-01T15:38:06.457

1

This is because you are attempting to use the >= and <= operators on a string.

You need to convert your string into a Date object

var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

See Here

You can then compare the dates

  var dob = new Date("09-01-1996");
  var spring2015min = new Date("09-01-1997");
  var spring2015max = new Date("08-31-1998");
  if (dob >= spring2015min && dob <= spring2015max){
    alert("Spring 2015");
  }

Update: In your case the Date object will take the format string as (MM-dd-yyyy)

You can see it working here : JSFiddle

edited Jul 01 '15 at 15:38

answered Jul 01 '15 at 15:04

Jamie Rees

7,973
2
45
83

I tried this but none of the alerts worked even if the dat was between the two set dates? – Jul 01 '15 at 15:17
@adamkwadsworth please see my update. This will now work. – Jamie Rees Jul 01 '15 at 15:38
I've done this but still nothing works? I've updated my code above again to match your advice... – Jul 01 '15 at 15:43
@adamkwadsworth look at the JSFiddle link, have you made sure you are using the right date format? `Date("MM-dd-yyyy)` since `new Date("31-08-1998");` will not convert into a `Date` since there are not 31 months. – Jamie Rees Jul 01 '15 at 15:44
I've updated the new Date and this didn't seem to change anything, i've put together a plunkr so you can see my problem in action - http://plnkr.co/edit/fVMDPCHRx0cTAN2QjaBa?p=preview – Jul 01 '15 at 15:54
@adamkwadsworth I am sorry but I don't see a problem, I entered 31/08/1998 and I got 3 alerts. – Jamie Rees Jul 01 '15 at 15:56
Enter 01/09/1996 you should only get two alerts but you get four? – Jul 01 '15 at 16:01
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/82108/discussion-between-jamie-rees-and-adamkwadsworth). – Jamie Rees Jul 01 '15 at 16:03

score 1 · Answer 2 · answered Jul 01 '15 at 15:05

1

The issue is that you can't compare dates that way, only integers. I would use something like this:

if( (new Date(dob).getTime() >= new Date(spring2015min).getTime()))

answered Jul 01 '15 at 15:05

SpaceCowboy

543
6
16

This also wasn't working with my code, I've updated my original code to display whats happening. – Jul 01 '15 at 15:26

score 0 · Answer 3 · answered Jul 01 '15 at 15:05

0

The current test that you are doing is string checking so it will test the actual strings are equal or their numerical character equivalents are greater than its numerical value. You should convert your strings to dates by using new Date() then do your checks on the date objects

answered Jul 01 '15 at 15:05

Hano Johannes Rossouw

750
5
14

I've tried this but had no luck, I've updated my code above. If there is anything else you could suggest this would help massively! – Jul 01 '15 at 15:24
In your code above you are still using strings to do your checks with. You need to use new Date("01-09-1998") as example to create a date object then compare that date object with another to get date comparison, currently you are getting string comparison which will give you completely different results than what you desire – Hano Johannes Rossouw Jul 01 '15 at 15:26
Could you review and make sure the attached is correct becuase it isn't working at my end? – Jul 01 '15 at 15:32

jQuery More & Less Than

3 Answers3