How to set date to sencha touch's date picker

Question

I am trying to set the date to date picker but not able to set the date. bellow is my chunk of sencha touch code.

this.scheduledDatePicker = Ext.create('Ext.field.DatePicker', {
            //label: 'To',
            //labelAlign: 'right',
            //cls: 'form-block',
            value: new Date(),
            flex: 2.6,

        });

and I am setting value after page load or get values from the database as using below code. I tried this many was as you can see commented code. but cant able to set this value.

var date= Ext.Date.format(Ext.Date.parse(this.rec.get('bookingDateTime'), "Y-m-d H:i:s"), "d/m/Y");
//var date= Ext.Date.parse(this.rec.get('bookingDateTime'));
//var date= this.rec.get('bookingDateTime');

this.scheduledDatePicker.setValue(date);

can anyone tell me why my code is not working or any solution for this issue?

Answer 1

A datefield accepts a javascript date, however it seems you don't provide one.

You should check what this.rec.get('bookingDateTime') returns, and how to modify that field in such a way that you get a javascript date.

I expect that you already have a model, where you could specify that field to be of type date with a certain date format:

Ext.define('MyModel', {
    fields: [{
        name: 'bookingDateTime',
        type: 'date',
        dateFormat: 'Y-m-d H:i:s' // specify format that is received from the server
    }]
});

Then ExtJS will do the conversion for you and you could just use setValue without any parsing:

this.scheduledDatePicker.setValue(this.rec.get('bookingDateTime'));

If you don't have a model already, you can still read the string from bookingDateTime and parse it now and then and put it into the picker:

var date= Ext.Date.parse(this.rec.get('bookingDateTime'), "Y-m-d H:i:s");
console.log(date); // <- if date is null, format is not specified correctly.
this.scheduledDatePicker.setValue(date);

In both cases, console logging the interim result can help pinpoint down the issue: most of the time, the "parsed date" is null, because the format string does not match the date format received from the server.