How to use jQuery Datepicker with basic forms?

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); 

What type should I use to use the included jQuery-UI dump? There is no documentation on this subject except:

Older jQuery editors are still included, but can be migrated to another repository:

jqueryui.List
jqueryui.Date (uses jQuery UI popup datepicker)
jqueryui.DateTime

The type of the schema is declared in quotation marks, and I cannot figure out which string for jqueryui.Date will be - and this does not work for sure.

Answer 1

You want to create a custom editor that you name, for example: 'DatePicker'.

All editors are attached to Backbone.Form.editors. Since the DatePicker is displayed just like a text field, we can use the text field as a base and only redefine the behavior typical of datepicker.

I often use moment.js for some date related work, so this example also includes this. It is also based on Bootstrap DatePicker, not jQuery, but it will be almost 100% the same.

 Backbone.Form.editors.DatePicker = Backbone.Form.editors.Text.extend({ render: function() { // Call the parent render method Backbone.Form.editors.Text.prototype.render.call(this); // Then make the editor 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')); } }); 

To do this, you can now use your date picker as follows:

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

Answer 2

Not sure if this is the wrong right for your question, but I think you can attack Jquery date pickers in a view initialization method