在javascript中创建原型,添加一个新方法来引导日期拾取器

Prototyping in javascript to add a new method to bootstrap datepicker

本文关键字:新方法 一个 日期 创建 javascript 原型 添加      更新时间:2023-09-26

我对JavaScript中的原型有一些基本的了解。我想要实现的是扩展(bootstrap-datepicker插件)的'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()方法时会出现异常。我希望返回一个空值。

我尝试用以下代码创建.datepicker()方法的原型:

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

(当然已经像上面那样原型化了Date对象)。但试图阅读与$('#myControl').datepicker().getYyyymmddDate();不工作。

我怎么能这么做?

.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")