如何在Backbone-Forms中使用JQuery Datepicker？

Question

var User = Backbone.Model.extend({
    schema: {
        date: {type: 'Date'}
    }
});

var user = new User();

var form = new Backbone.Form({
    model: user
}).render();

$('.bootstrap').append(form.el);

要使用包含的JQuery-UI日期选择器，我应该输入什么类型？除了以下内容之外，没有其他相关文档：

​

旧的jQuery编辑器仍然包含在其中，但可能会移动到其他存储库：

jqueryui.List

jqueryui.Date (使用jQuery UI弹出式日期选择器)

jqueryui.DateTime

模式类型是用引号声明的，我不能确定jqueryui.Date的字符串是什么--而且这也不一定有效。

Answer 1

您想要创建一个自定义编辑器，您将命名为例如：'DatePicker‘。

所有的编辑器都附加到Backbone.Form.editors上。因为datepicker的呈现方式与文本字段完全相同，所以我们可以使用文本字段作为基础，并且只覆盖特定于DatePicker的行为。

我经常使用moment.js来做一些与日期相关的工作，所以这个例子也包括了这一点。它也是基于Bootstrap DatePicker，而不是jQuery，但这几乎是100%相同的。

Backbone.Form.editors.DatePicker = Backbone.Form.editors.Text.extend({
    render: function() {
        // Call the parent's render method
        Backbone.Form.editors.Text.prototype.render.call(this);
        // Then make the editor's element a datepicker.
        this.$el.datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            weekStart: 1
        });

        return this;
    },

    // The set value must correctl
    setValue: function(value) {
        this.$el.val(moment(value).format('YYYY-MM-DD'));
    }
});

就这样，你现在可以像这样使用你的日期选择器：

schema: {
    birthday: { title: 'When were you born', type: 'DatePicker'}
}

Answer 2

我不确定它是否理解了您的问题，但我认为您可以在视图的初始化方法中访问Jquery日期选择器