Working with dates using DatePicker_Sencha Touch Cookbook-QQ阅读男生玄幻网

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.js to ch02_04.js.

Open a new file named ch02_04.js and replace the definition of formBase with the following code:

var formBase = {
  items: [{
    xtype: 'datepickerfield',
    name: 'date',
    label: 'Date'
  }]
};

Include ch02_04.js in place of ch02_03.js in index.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.

Setting the default date to the current date

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(),

Setting the default date to a particular 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},
…

Changing the slot order

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']}
  }]
};

Setting the picker date range

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}
  }]
};