Validate Date Entered from a Textbox Against Datepicker DateRange

Question

Hi have a textbox datepicker. The user can select date from datepicker or enter date manually by typing on the textbox. If date is manually typed how can I validate the input if is within the date range of my date picker? Please help. For example my date picker max year is only 1995 so user is not allowed to input date such as 01/25/1996.

HTML

Date of Birth (MM/DD/YYYY):
<input type="text" class="datepicker minimumSize" 
name="BirthDate" id="BirthDate"/>

JavaScript

var d = new Date();
var year = d.getFullYear() - 18;
d.setFullYear(year);
$('#BirthDate').datepicker({
    changeYear: true,
    changeMonth: true,
    yearRange: '1920:' + year + '',
    defaultDate: d});

$('#BirthDate').blur(function(){
//Validate input
});

JSfiddle http://jsfiddle.net/jobzky/wUpQG/

Solution 1

This works perfect to me.

First u have to validate date syntax. Suppose date is a valid date. Then, u can do this.

  var from_date_monthfield = valid_from.split("/")[1];
  var from_date_dayfield = valid_from.split("/")[0];
  var from_date_yearfield = valid_from.split("/")[2];

// Above splitting depends on your date format

  var from_date = new Date(from_date_yearfield, from_date_monthfield-1, from_date_dayfield);

  var cur_date = new Date();
  if(!(from_date > cur_date.setDate(cur_date.getDate() - 1))) // set date as 1995 here and your logic here
  { 
    return false;
  }

  return true;
}

Solution 2

You can use the input element's readonly attribute in order to prevent a user from manually entering a date e.g.

<input type="text" class="datepicker minimumSize" 
name="BirthDate" id="BirthDate" readonly/>