以2位数年份输入时，Bootstrap Datepicker默认为1900

Question

我在Bootstrap应用程序的模态窗口中使用了一个datepicker。我正在使用Stefan Petre的原始Datepicker。我使用鼠标在桌面和移动设备上构建它并且工作正常。

最近我有一个用户请求，允许它也可以使用键盘。我删除了readonly属性以允许用户在输入字段中输入日期。日期格式设置为“mm / dd / yyyy”。

当我输入像今天这样的日期时，例如“12/11/13”，那么它将默认为1913.这不是一个大问题，因为我可以训练用户使用4位数，但我会相反，它只是默认为本世纪。

注意：这似乎只发生在4位数年份的日期格式。在Stefan的新代码中，这似乎也以同样的方式发生。

注意：我使用的是Bootstrap 2.0.4。我正在使用Firefox进行测试。

这是它的样子：

Answer 1

在JavaScript中，将datepicker的assumeNearbyYear属性设置为true ，如下所示：

$("#dp").datepicker({
    assumeNearbyYear: true
});

Answer 2

这是因为Bootstrap日期选择器正在使用JavaScript Date objects。当您创建一个新的Date对象并传入两位数年份时，它将输出1900 +年（参见Why does Javascript evaluate a 2-digit year of 00 as 1900 instead of 2000?）

您可以尝试调整datepicker源代码，但这可能太复杂了。

从我在http://www.eyecon.ro/bootstrap-datepicker/上看到的内容中，没有选项可以设置可选日期的范围，但您可以将格式更改为使用两位数年份。

在你的屏幕截图中，我可以看到，你正在使用datepicker作为“到达日期”，我假设将来。在网站上有一个关于如何禁用过去日期的例子。

我希望有所帮助。

---

更新

我已经为你的问题编写了一个事件处理程序，应该可以解决这个问题。

http://jsfiddle.net/pCYbd/1/上的Javascript

$("#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);
    }
  }
});

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

上的CoffeeScript

$("#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}")

我的JavaScript技能不是最好的，但这应该有用。

Answer 3

如本帖所示更新bootstrap-datepicker.js为我解决了https://github.com/eternicode/bootstrap-datepicker/pull/1461/commits/2ea16adad27cbc4d4dfa20b924addfb480e5b036

yyyy: function(d,v){                      
   if (format.parts.indexOf('yyyy') > -1 && v < 1000) v = 2000+v; // this line ***
   return d.setUTCFullYear(v);
},

Answer 4

我正在使用bootstrap-datepicker v1.5.1，如果你看看第1741行的年份映射，你会注意到这一点：

 yyyy: function (d, v) {
     return d.setUTCFullYear(v);
 },
 yy: function (d, v) {
     return d.setUTCFullYear(2000 + v);
 },

当您指定控件使用四年日期“yyyy”时，它只会执行return d.setUTCFullYear(v);，这将获得JavaScript为您提供的上一个世纪。当您指定它使用两年的日期“yy”时，它将执行当前世纪所需的正确2000+。

因此，如果您希望正确的两年日期为2016年，2017年等，则需要将日期选择器设置为使用“yy”，如下所示：

  $('#tbPurchaseDate').datepicker({
      format: 'mm/dd/yy',
      autoclose: true,
      todayBtn: 'linked',
      todayHighlight: true,
      orientation: 'bottom auto'
  });

或者您可以更改bootstrap-datepicker.js中的“yyyy”设置以匹配“yy”版本，但是每次通过nuget更新datepicker js文件时，您都必须记住这样做。更改格式设置要容易得多。

当然，如果你想在控件中显示完整的4位数年份，那么你可能想尝试一下这里列出的精心修复，或者只是将“yyyy”设置为js中的“yy”。文件。

或者只是将您的代码更新到最新版本（目前为1.6.4），“yyyy”和“yy”相同，并使用assumeNearbyYear: true，如此处的另一个答案中所述。

Answer 5

对我来说，最好的解决方案是直接在bootstrap-datepicker.js文件中自定义parseDate函数。在函数内部，有一个带有yyyy属性的变量setters_map，我修改了一下。这是我的解决方案：

yyyy: function(d,v) {
    if (v.toString().length == 2 && v <= 30) {
        v = 2000 + parseInt(v);
    }
    return d.setUTCFullYear(v);
},

在我的情况下，只需转换少于或等于30的年份。

Answer 6

在bootstrap-datepicker.js的更新功能中，我添加了以下代码块：

var str = this.element.prop('value');
var defaulted = false;
if (str.lastIndexOf("/") >= 0 && (str.match(/\//g) || []).length == 2)
{
    var yr = str.substring(str.lastIndexOf("/") + 1);
    if (yr.length <= 2)
    defaulted = true;
}   
if (this.date.getFullYear() < 2000 && defaulted) {
    this.date.setFullYear(this.date.getFullYear() + 100);
}

在此行上设置viewdate之前：

this.viewDate = new Date(this.date.getFullYear(), this.date.getMonth(), 1, 0, 0, 0, 0);

Answer 7

如果您在bootstrap-datepicker.js核心文件的UTCDate（）中更新以下两行，它将100％工作：

函数UTCDate（）{

/ *如果输入的日期年份小于4个数字，则默认日期为2000年* /
           if（arguments！= null && arguments [0] .toString（）。length <4）            arguments [0] = 2000 + arguments [0];

     return new Date(Date.UTC.apply(Date, arguments));

}