How to test a date which is given by the user as birthdate in jquery?

Question

I've added datepicker from jquery-ui. The problem is, if a user doesn't select a date from the datepicker, he can also write his birthdate in the date field. Now, I want, if someone fill up the date field with a wrong date, the field will automatically become blank and give him a message to write a valid date. How can I do that?

The codes are given below

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<link rel="stylesheet" href="css/jquery_ui.css">

<script src="js/jquery.js"></script>
<script src="js/jquery_ui.js"></script>
<script src="js/datepicker.js"></script>

</head>

<body>

<p>Date: <input type="text" id="datepicker" /></p>

</body>
</html>


//This is datepicker.js file

$( function() {
    $( "#datepicker" ).datepicker({
      changeMonth: true,
      changeYear: true,
      yearRange: "c-200:c+200",
      dateFormat: 'yy-mm-dd',
      maxDate: 0
    });
} );

It's probably easiest to make the input readonly and have the user always select the date from the picker. — Rory McCrossan, Feb 20 '17 at 08:31
This might help: http://stackoverflow.com/questions/19820257/javascript-date-validation-dd-mm-yyyy-age-checking — Rajesh, Feb 20 '17 at 08:32
Check this : http://formvalidation.io/examples/jquery-ui-datepicker/ — Ruby Nanthagopal, Feb 20 '17 at 08:35
A note: Choosing a birthday from a datepicker often sucks from a UI perspective. — alex, Feb 20 '17 at 09:22
Rory McCrossan, you've solved my problem. Thank you very much. — Nahid Sultan, Feb 20 '17 at 10:28

score 0 · Answer 1 · answered Feb 20 '17 at 08:50

You could use JQuery Validation, see following:

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

<body>
  <form id="myform">
    <p>Date: <input type="text" name="datepicker" id="datepicker" /></p>
    <input type="submit" />
  </form>
</body>
  <script>
    
$( function() {
    $( "#datepicker" ).datepicker({
      changeMonth: true,
      changeYear: true,
      yearRange: "c-200:c+200",
      dateFormat: 'yy-mm-dd',
      maxDate: 0
    });
} );
    
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
    
$( "#myform" ).validate({
  rules: {
    datepicker: {
      required: true,
      date: true
    }
  }
})
  </script>
</html>

I hope it helps you, bye.

But the problem is, this code does not detect 31 February, 31 November as invalid dates. An user will get a tick mark if he writes 2017-02-31 as his birth-date. — Nahid Sultan, Feb 20 '17 at 09:14

How to test a date which is given by the user as birthdate in jquery?

1 Answers1