Bootstrap datepicker not validating format during manual input

Question

I'm using bootstrap-datepicker.js (version 1.6.1) to display a simple datepicker with dd/mm/yyyy format.

It is initialized like this:

 $e.datepicker({
      format: "dd/mm/yyyy"
     , endDate: ed // end date
     , autoclose: true
     , startDate: sd // start date
     , language: lang
 });

The datepicker works just fine and date are set correctly to the configurated format if the user navigates through the calendar and clicks the desired date.

But the problem comes when he types the date manually on the input.

Somehow if the user manually types DD/MM/YY this value is being accepted by the datepicker and is not automatically converted to DD/MM/YYYY.

Does anyone knows if this is a limitation of the datepicker library or am I missing some configuration here?.

ThinhLe ThinhLe · Accepted Answer · 2017-01-12T03:47:15

I think you can use

onkeydown="return false"

to avoid manual input. If not, you must write JS to format date. Datepicker automatically converted from manual input.

$('#txtDob').datepicker({
  format: 'dd/mm/yyyy',
  autoclose: true  
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.de.min.js"></script>

<form action="#" method="post">
  <label for="txtDob"></label>
  <input onkeydown="return false" type="text" id="txtDob" />
</form>

Bootstrap datepicker not validating format during manual input

1 Answers