Question

31

JQuery validate date between a date range

rated 0 times [ 33] [ 2] / answers: 1 / hits: 16645 / 7 Years ago, fri, april 7, 2017, 12:00:00

I've an input field where users can insert a date between a date range.

So I added a new method on JQuery validator object:

$.validator.addMethod(dateRange, function(value, element, from, to){

    try {

        var date = new Date(value);

        if(date >= from && date <= to)

            return true;

    } catch(e) {

    }

    return false;

}

Then I added a new class rules:

$.validator.addClassRules({

    myDateFieldRangeValidate: {

        dateRange: {fromDate, toDate}

    }

});

And finally I added the class to the input:

$(#myField).addClass(myDateFieldRangeValidate);

So, how can I pass the two dates to the validation function?

UPDATE: Added a code snippet

$.validator.addMethod(dateRange, function(value, element, from, to){

    try {

        var date = new Date(value);

        if(date >= from && date <= to)

            return true;

    } catch(e) {

    }

    return false;

});



var fromDate = new Date(2017-02-01);

var toDate = new Date(2017-12-31);



$.validator.addClassRules({

    myDateFieldRangeValidate: {

        dateRange: {fromDate, toDate}

    }

});



$(#myField).addClass(myDateFieldRangeValidate);



$(#btnValidate).click(function(){

  $(#frm1).validate();

});

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.min.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js></script>

<form id=frm1>

  Date <input type=text id=myField>

  <input type=button id=btnValidate value=Validate>

</form>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

annie

Add To Favorites

Follow

Total Points: 483

Total Questions: 97

Total Answers: 107

Location: Belarus

Member since Sat, Jul 18, 2020

4 Years ago

annie questions

1 Firebase V9, add subcollection to existing doc

Sat, Jan 1, 22, 00:00, 2 Years ago

1 How to reset Redux Reducer to Initial State

Wed, Aug 4, 21, 00:00, 3 Years ago

1 Bootstrap 5 / jQuery: is it possible to force bootstrap 5 to inject its jquery plugins immediately, not after DOMContentLoaded?

Sat, Jun 12, 21, 00:00, 3 Years ago

1 User is undefined on the context.switchToHttp().getRequest() nestjs

Sun, May 9, 21, 00:00, 3 Years ago

1 `The 'async' modifier can only be used in TypeScript files.ts(8009)` error when using async in react.js

Sun, Mar 29, 20, 00:00, 4 Years ago

View All

answered 7 Years ago george · Accepted Answer

Thanks to Arun P Johny, I post here his fiddle:

$.validator.addMethod(dateRange, function(value, element, params) {

  try {

    var date = new Date(value);

    if (date >= params.from && date <= params.to) {

      return true;

    }

  } catch (e) {}

  return false;

}, 'message');



var fromDate = new Date(2017-02-01);

var toDate = new Date(2017-12-31);



$.validator.addClassRules({

  myDateFieldRangeValidate: {

    dateRange: {

      from: fromDate,

      to: toDate

    }

  }

});



$(#myField).addClass(myDateFieldRangeValidate);

$(#frm1).validate();

$(#btnValidate).click(function() {

  console.log($(#frm1).valid())

});



jQuery(function($) {

  var validator = $('#myform').validate({

    rules: {},

    messages: {}

  });

});

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.min.js></script>

<form id=frm1>

  Date

  <input type=text id=myField value=16 Feb 2017>

  <input type=button id=btnValidate value=Validate>

</form>