Set Start Date Field EXTJS

Question

I have this datefield in my form :

{
    xtype: 'datefield',
    fieldLabel: 'Date commence travel',
    name: 'tgl_awal',
    id: 'tgl_awal',
    vtype: 'daterange', 
    endDateField: 'tgl_akhir', // id of the end date field
    allowBlank: false,
    msgTarget: 'side',
    format: 'd-m-Y'
}, {
    xtype: 'datefield',
    fieldLabel: 'Date end travel',
    name: 'tgl_akhir',
    id: 'tgl_akhir',
    vtype: 'daterange',
    startDateField: 'tgl_awal',
    allowBlank: false,
    msgTarget: 'side',
    format: 'd-m-Y'
}

I want to set start date field in tgl_awal 3 months prior of today. I've tried to set it with Javascript variable that I defined outside but no effect. Any help appreciated.

Answer 1

Ext.Date#add is the method to use to add or subtract time interval to/from a given date. Your datefield should have value set to :

value: Ext.Date.add(new Date, Ext.Date.MONTH, -3)

Answer 2

I think minValue is the attribute you are looking for.All dates prior to minValue are disabled. Or are you having trouble to get logic for 3 months prior to today ?

 function beginDate(){
    //put real logic for getting date prior to 3 months here
    return new Date(2017,04,20);
}

    Ext.create('Ext.container.Viewport', {          
        title: 'Historical',

        layout : 'fit',

        items : [
                 {
                     xtype: 'container',
                     autoScroll : true,
                     defaults : {
                         labelAlign : 'right'
                     }, 
                     layout: {
                         type: 'hbox',
                         align: 'top',
                         pack: 'center'
                     },

                     items: [
                                {
                                    xtype: 'datefield',
                                    fieldLabel: 'Date commence travel',
                                    name: 'tgl_awal',
                                    id: 'tgl_awal',
                                    vtype: 'daterange', 
                                    endDateField: 'tgl_akhir', // id of the end date field
                                    allowBlank: false,
                                    msgTarget: 'side',
                                    format: 'd-m-Y',
                                    minValue : beginDate()
                                }, {
                                    xtype: 'datefield',
                                    fieldLabel: 'Date end travel',
                                    name: 'tgl_akhir',
                                    id: 'tgl_akhir',
                                    vtype: 'daterange',
                                    startDateField: 'tgl_awal',
                                    allowBlank: false,
                                    msgTarget: 'side',
                                    format: 'd-m-Y'
                                }
                                ]

        }
        ]
    });