Add DatePicker Field to Sencha Touch

Today, we are going to see how to add DatePicker Field in the Sencha Touch. This component will be useful where you need user to select Data in the HTML Form i.e Date Of Birth field.
When you tap on the field, DatePicker will be displayed which will allow to select date. Let us see the important configuration properties available in DatePicker class.

yearFrom: The Start Year for the Date Picker.
yearTo: The End Year for the Date Picker.
slotOrder: An Array of Strings that specifies the order of the slots
useTitles: Generate a title header for each individual slot and use the title configuration of the slot.
value: Specfies the default value for the field. Accepts an object of 'year', 'month' and 'day' values.
yearText: The label to show for the year column.
monthText: The label to show for the month column.
dayText: The label to show for the month column.

Let's see the implementation which will display Datepicker Form when you tap on the Date Of Birth Field.

Ext.define('MyApp.view.MyDateField', {
    extend: 'Ext.field.DatePicker',

    config: {
        label: 'Date Of Birth',
        labelWrap: true,
        placeHolder: 'yyyy/mm/dd',
        dateFormat: 'yyyy/mm/dd',

        picker: {
            value: {
                year: 2013,
                month: 6,
                day: 22
            },

            slotOrder: [
                'year',
                'month',
                'day'
            ],

            yearFrom: 2000,
            yearTo: 2014
        }
    }
});

Here is the output for the above code in the Google Chrome.

Hope, you enjoyed this Post.