Bootstrap Datepicker defaults to 1900's when entered with 2 digit year

Question

I am using a datepicker in a modal window in my Bootstrap application. I am using the original Datepicker from Stefan Petre. I built it where it works in a desktop and mobile using a mouse and it works fine.

Recently I had a user request to allow it to also work with a keyboard. I removed the readonly property to allow the user to enter a date in the input field. The date-format is set to 'mm/dd/yyyy'.

When I enter a date like today for example like this "12/11/13" then it will default to 1913. This isn't a huge deal as I could just train the users to use 4 digits, but I would rather just have it default to this century.

Note: This only seems to happen for the date-format with a 4 digit year. This also seems to happen in the same manner in the newer forks of Stefan's code.

Note: I am using Bootstrap 2.0.4. I am testing with Firefox.

Here is what it looks like:

Answer 1

This happens because the Bootstrap datepicker is using JavaScript Date objects. When you create a new Date object and pass in a two digit year it will output 1900+year (see Why does Javascript evaluate a 2-digit year of 00 as 1900 instead of 2000?)

You could try to tweak the datepicker source code, but that might be too complicated.

From what I can see on http://www.eyecon.ro/bootstrap-datepicker/ there is no option to set a range for the selectable dates, but you could change the format to use two digit years.

On your screenshot I can see, that you are using the datepicker for "Arrival Date" which I assume is in the future. On the website there is an example on how to disable dates in the past.

I hope that helps.

---

UPDATE

I have written an event handler for your problem which should do the trick.

Javascript on http://jsfiddle.net/pCYbd/1/

$("#dp").datepicker();

$("#dp").on("keyup", function(e) {
  var date, day, month, newYear, value, year;
  value = e.target.value;
  if (value.search(/(.*)\/(.*)\/(.*)/) !== -1) {
    date = e.target.value.split("/");
    month = date[0];
    day = date[1];
    year = date[2];
    if (year === "") {
      year = "0";
    }
    if (year.length < 4) {
      newYear = String(2000 + parseInt(year));
      $(this).datepicker("setValue", "" + month + "/" + day + "/" + newYear);
      if (year === "0") {
        year = "";
      }
      return $(this).val("" + month + "/" + day + "/" + year);
    }
  }
});

CoffeeScript on http://jsfiddle.net/pCYbd/2/

$("#dp").datepicker()
$("#dp").on "keyup", (e) ->
  value = e.target.value
  if value.search(/(.*)\/(.*)\/(.*)/) != -1
    date = value.split("/")
    month = date[0]
    day = date[1]
    year = date[2]      
    year = "0" if year == ""
    if year.length < 4
      newYear = String(2000 + parseInt(year))
      $(@).datepicker("setValue", "#{month}/#{day}/#{newYear}")
      year = "" if year == "0"
      $(@).val("#{month}/#{day}/#{year}")

My JavaScript skills are not the best, but this should work.