Bootstrap datepicker多种格式

时间:2014-08-22 15:09:49

标签: javascript backbone.js datepicker bootstrap-datepicker

我在我的表单中使用带有Bootstrap Datepicker的Backbone.js。

简介是允许客户使用' dd.mm.yyyy'格式,所以我在datepicker上设置选项。

self.$el.find('[data-role="invoicedate"]').datepicker({
    format: "dd.mm.yyyy",
    todayBtn: "linked",
    todayHighlight: true,
    language: Application_language
});

然后客户想要允许' dd.mm.yy'还有,并且让它自动翻译,所以我做了以下几点:

invoicedateToModel: function() {
    var invoicedate = this.$el.find('[data-role="invoicedate"]').val();
    var re2 = /^(\d{2})\.(\d{2})\.(\d{2})$/;
    if (re2.test(invoicedate)) {
        invoicedate = invoicedate.replace(re2,"$1.$2.20$3");
    }
    var re4 = /^(\d{2})\.(\d{2})\.(\d{4})$/;
    if (re4.test(invoicedate)) {
        this.saveInvoiceDate(invoicedate);
        this.displayInvoiceDate();
        this.$el.find('[data-role="invoicedate"]').parent().toggleClass('has-error', false);
    } else {
        this.$el.find('[data-role="invoicedate"]').parent().toggleClass('has-error', true);
    }
},

并将其绑定到输入上的change事件。我现在意识到这很好用,因为dd.mm.yy符合dd.mm.yyyy格式,即它与它不矛盾。

现在客户端也希望能够添加ddmmyyyy作为输入选项,但是datepicker通过将新输入的日期替换为最后一个已知的好日期或今天的日期来自动更新表单,因为ddmmyyyy与dd不匹配。 mm.yyyy,在上面的回调被调用之前。

有没有办法告诉bootstrap-datepicker关于多种允许的格式?

1 个答案:

答案 0 :(得分:1)

您可以将函数传递给datepicker的格式选项。对于非常灵活的解析,我使用了moment.js

$(".datepicker").datepicker({
  format: {
    toDisplay: function(date, format, language) {
      return moment(date).format("MM/DD/YYYY");
    },
    toValue: function(date, format, language) {
      return moment(date, ["DD.MM.YYYY", "DDMMYYYY"]).toDate();
    }
  }
});

来自bootstrap-datepicker docs

  

toDisplay :将日期对象转换为字符串的函数(日期,格式,语言),将存储在输入字段中

     

toValue :将字符串对象转换为日期的函数(日期,格式,语言),将用于日期选择

您可能需要使用moment()选项,但是您应该可以将它移到您想要的位置。查看momentjs的docs