Search code examples
jqueryjquery-uidatepickerjquery-ui-datepickerdate-format

Datepicker not cutting off the date properly for 2-digit year format

jQueryUI datepicker seems to have a bug and it doesn't wrap century as requested. I put 69 as short year cutoff, seems to have no effect. Instead the UI shows 1970 for any year below 87 (so it does not accept them as valid?). Am I doing anything wrong there? Typed value don't get synced to UI when they are between 1970-1986.

enter image description here

The goal is to allow user to set any dates between 1970 to 2069 with short notation of 70 meaning 1970 and 69 meaning 2069 respectively.

JSFiddle. Stack Overflow's embedded player does not display datepicker's UI properly, it hides the input field - please use jsfiddle.

$(document).ready(function() {
  $('#myDate').datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'm/d/y',
    shortYearCutoff: '69',
    yearRange: '1970:2069'
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>

<input id="myDate" name="myDate" type="date" value="" />

Solution

  • Use type="text" rather than type="date" in the input field. When you use type="date", the browser controls the formatting of the raw input field, which overrides the datepicker's dateFormat option; it doesn't 

    $(document).ready(function() {
  $('#myDate').datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'm/d/y',
    shortYearCutoff: '69',
    yearRange: '1970:2069'
  });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>

<input id="myDate" name="myDate" type="text" value="" />