javascript - 在 JavaScript 中进行原型(prototype)设计以向 Bootstrap 日期选择器添加新方法

Question

我对 JavaScript 原型(prototype)设计只有一些基本的了解。 我想要实现的是扩展 ( bootstrap-datepicker plugin ) 的 'getdate' 方法。

我不知道为什么，该插件没有将日期公开为一个简单的属性，但是您必须调用 .datepicker('getDate') 方法来读取由用户。

我需要获取 YYYYMMDD 格式的日期，所以我这样做了:

Date.prototype.yyyymmdd = function () {
  var yyyy = this.getFullYear().toString();
  var mm = (this.getMonth() + 1).toString(); // getMonth() is zero-based
  var dd = this.getDate().toString();
  return yyyy + (mm[1] ? mm : "0" + mm[0]) + (dd[1] ? dd : "0" + dd[0]);
};

如果我读取这样的值:$('#myControl').datepicker('getDate').yyyymmdd(); 它有效，除非没有选择日期。在这种情况下，datepicker('getDate') 方法返回 null，并且在对 null 调用 yyyymmdd() 方法时会引发异常。我希望返回一个 null。

我尝试使用以下代码对 .datepicker() 方法进行原型(prototype)设计:

$().datepicker.prototype.getYyyymmddDate = function () {
  var x = this('getdate');
  if (x != null)
    return x.yyyymmdd();
  else
    return null;
};

(当然，如上所述已经对 Date 对象进行了原型(prototype)设计)。但尝试使用 $('#myControl').datepicker().getYyyymmddDate(); 读取不起作用。

我怎样才能做到这一点？

Answer 1

好吧，.datepicker('getDate') 将返回一个 Date 对象(或 null)，因此更改 $.fn.datepicker.prototype 不会有帮助。

但是，当您传递“getDate”选项时，插件会检查 $.fn.datepicker.Constructor.prototype 上是否存在具有该名称的方法。 所以你可以做类似的事情

$.fn.datepicker.Constructor.prototype.getYyyymmddDate = function () {
   var date = this.getDate();

   if (!date) {
      return null;
   }

   var yyyy = date.getFullYear().toString();
   var mm = (date.getMonth() + 1).toString(); // getMonth() is zero-based
   var dd = date.getDate().toString();

   return yyyy + (mm[1] ? mm : "0" + mm[0]) + (dd[1] ? dd : "0" + dd[0]);
};

然后，你可以这样调用它

$('#myControl').datepicker("getYyyymmddDate")

编辑:

显然，已经有一个名为“getFormattedDate”的选项，它可以实现您想要的功能(如果找不到日期，它将返回一个空字符串而不是 null)。

$('#myControl').datepicker("getFormattedDate", "yyyymmdd")