- Sencha Touch Cookbook
- Ajit Kumar
- 561字
- 2021-08-20 15:56:08
Working with dates using DatePicker
This recipe describes how to make use of the date picker form field provided by Sencha Touch, which allows the user to select a date.
Getting ready
Make sure that you have set up your development environment by following the recipes outlined in Chapter 1.
Make sure that you have followed the Getting your form ready with FormPanel recipe in this chapter.
How to do it...
Carry out the following steps:
- Copy
ch02_01.jstoch02_04.js. - Open a new file named
ch02_04.jsand replace the definition offormBasewith the following code:var formBase = { items: [{ xtype: 'datepickerfield', name: 'date', label: 'Date' }] }; - Include
ch02_04.jsin place ofch02_03.jsinindex.html. - Deploy and access the application in the browser.
How it works...
The date picker field can be constructed by using the Ext.form.DatePicker class instance or by using xtype: datepickerfield. The date picker form field implements HTML <select> . When the user tries to select an entry, it shows the date picker with the month, day, and year slots for selection. After selection, when the user clicks on the Done button, the field is set with the selected value.
There's more...
Additionally, there are other things that can be done such as setting the date to the current date, or any particular date, or changing the order of appearance of a month, day, and year. Let's see what it takes to accomplish this.
In order to set the default value to the current date, the value property must be set to the current date. The following code shows how to do it:
var formBase = {
items: [{
xtype: 'datepickerfield',
name: 'date',
label: 'Date',
value: new Date(),
The default date is 01/01/1970. Let's assume that you need to set the date to a different date, but not the current date. To do so, you will have to set the value using the year, month, and day properties, as follows:
var formBase = {
items: [{
xtype: 'datepickerfield',
name: 'date',
label: 'Date',
value: {year: 2011, month: 6, day: 11},
…
By default, the slot order is month, day, and year. You can change it by setting the slotOrder property of the picker property of date picker, as shown in the following code:
var formBase = {
items: [{
xtype: 'datepickerfield',
name: 'date',
label: 'Date',
picker: {slotOrder: ['day', 'month', 'year']}
}]
};
By default, the date range shown by the picker is 1970 until the current year. For our application need, if we have to alter the year range, we can do so by setting the yearFrom and yearTo properties of the picker property of the date picker, as follows:
var formBase = {
items: [{
xtype: 'datepickerfield',
name: 'date',
label: 'Date',
picker: {yearFrom: 2000, yearTo: 2010}
}]
};
See also
- The recipe named Setting up the Android-based development environment in Chapter 1
- The recipe named Setting up the iOS-based development environment in Chapter 1
- The recipe named Setting up the Blackberry-based development environment in Chapter 1
- The recipe named Setting up the browser-based development environment in Chapter 1
- The recipe named Setting up the production environment in Chapter 1
- The recipe named Getting your form ready with FormPanel in this chapter