<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<div class="row">
<div class="col-md-12">
<h3 class="page-title">
Bug DatePicker jQuery-UI - Year less than 1000<br />
<small>When I use a date lower than the year 1000, the DatePicker has some strange behavior, see two examples below:</small>
</h3>
</div>
</div>
</div>
<div class="section-content">
<div class="row">
<div class="col-md-6">
<label>Year 1 to 100</label>
<input type="text" id="datepicker1" class="form-control" />
<p>When I use less than 100 years, when selecting the date, such as 1/7/10, the DatePicker returns 01/07/1910, being the correct 01/07/0010. How do if I want to use the DatePicker to record historical dates with less than 100 years?</p>
</div>
<div class="col-md-6">
<label>Year 101 to 999</label>
<input type="text" id="datepicker2" class="form-control" />
<p>When I use the years between 100 and 999, when selecting the date, for example, 7/9/145, the DatePicker returns 07/09/145, with the correct 07/09/0145. As well as the day and the month receive zero to complete the date, the year should also receive.</p>
</div>
</div>
</div>
</div>
</body>
</html>
$(function() {
$( "#datepicker1" ).datepicker({
changeMonth: true,
yearRange: "1:100",
changeYear: true
});
$( "#datepicker2" ).datepicker({
changeMonth: true,
yearRange: "101:999",
changeYear: true
});
});
/* Styles go here */