JQuery validate date between a date range

Question

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>

see http://stackoverflow.com/questions/833997/validate-that-end-date-is-greater-than-start-date-with-jquery — user3441151, Apr 07 '17 at 11:00
You can add on the element as data-attributes the startDate and endDate and take them from the element — geo, Apr 07 '17 at 11:05
Is there a way to pass two values to the validator or I have to split that function in two methods? — Alessandro, Apr 07 '17 at 12:27
Create a jsFiddle with your paradigm in order to show you what I mean — geo, Apr 07 '17 at 12:30
@geo Ok, thanks I added a "not working" fiddle, obviously I don't know how to make one that works :) — Alessandro, Apr 07 '17 at 12:47

score 7 · Accepted Answer · answered Apr 07 '17 at 14:15

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>

score 1 · Answer 2 · answered Apr 07 '17 at 14:25

Here is a way to have jQuery validator with the feature to give the start date and the end date

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.js"></script>
<script>
$( document ).ready(function() {
// add a method. calls one built-in method, too.
jQuery.validator.addMethod("optdate", function(value, element) {
    var startDate= new Date(jQuery(element)[0].attributes['data-rule-startDate'].value);
    var endDate= new Date(jQuery(element)[0].attributes['data-rule-endDate'].value);
    var d = new Date(value);
    console.log(d)
    return (d.getTime() <= endDate.getTime() && d.getTime() >= startDate.getTime())
}, "Please enter a valid date."
);



$('#frm1').validate();



});
</script>
<html>
<form id="frm1">
  Date <input type="text" id="myField" name="myField" data-rule-optdate="true" data-rule-startDate="2017-12-12" data-rule-endDate="2018-12-12">
</form>
</html>

JQuery validate date between a date range

2 Answers2