DatePicker starts at 1980?

[Bucs]

I have the need to allow the user to enter their age in a date picker field, but it starts at 1980....any way to override this? Shouldn't this be a config value?

[mitchellsimoens]

specify the yearFrom config param. It defaults to 1980

[Bucs]

First off, the config param is not specified in the API. Secondly, when used, it still doesn't work for me for some reason. The DatePicker renders, but still default to 1980. Showing the picker is conditional for me, so I'm using the following code:

        // Need to add age verification fields if alcohol in product
        if(this.productData.containsAlcohol)
        {
            items.push(
                {
                    html: 'Please enter your date of birth to verify that you are 21 years or older:',
                    style: 'font-size: .8em;margin-top: 10px'
                },
                {
                    id: 'age_date_picker2',
                    xtype: 'datepickerfield',
                    label: 'Enter Age',
                    yearFrom: 1970
                }            
            )            
        }

[mitchellsimoens]

It is and it isn't. DatePickerField is just an extension of Field that pops up a DatePicker. So yearFrom is a config of DatePicker, not DatePickerField. You can tell tell DatePickerField what picker to use by specifying the picker param on DatePickerField.

This is in the source for the DatePickerField that may shed some light:

this.datePicker = new Ext.DatePicker(Ext.apply(this.picker || {}));

line 63 of /src/widgets/form/DatePicker.js

so try this:

{
    xtype: "datepickerfield",
    id: "age_date_picker2",
    label: "Enter Age",
    picker: { yearFrom: 1970 }
}

Should work like that if I remember

[Bucs]

Ok, so I guess I have to do the following then:

        var dp = new Ext.DatePicker({
            yearFrom: 1970
        });

        // Need to add age verification fields if alcohol in product
        if(this.productData.containsAlcohol)
        {
            items.push(
                {
                    html: 'Please enter your date of birth to verify that you are 21 years or older:',
                    style: 'font-size: .8em;margin-top: 10px'
                },
                {
                    id: 'age_date_picker',
                    xtype: 'datepickerfield',
                    label: 'Enter Age',
                    picker: dp
                }            
            )            
        }

Thank for the pointer

[mitchellsimoens]

No, the source I provided shows that it is just expecting an object

new Ext.DatePicker(Ext.apply(this.picker || {}));

[Bucs]

Not following what you mean by that. I know you were just showing me the source. The Ext.DatePicker object won't render in a form though, so I have to use the xtype: 'datepickerfield', and then specify the picker to use. The above code works fine in my form and does what i need, unless you see a problem with doing it this way.

[mitchellsimoens]

var form = new Ext.form.FormPanel({
	fullscreen: true,
	items: [
		{
			xtype: "datepickerfield",
			label: "Enter Age",
			picker: { yearFrom: 1970 }
		}
	]
});

This now makes the year start at 1970. The picker object is just the configuration object for the underlaying DatePicker.

[Bucs]

Ah...I gotcha. Thought the property was expecting a full fidelity object. Passing a config is much cleaner. Thanks again.

[Bucs]

A related question: Is there any way to set the picker slot values without setting the field value of the picker? For instance I want people to be able to enter their date of birth back to 1900 but I don't really want the picker to start at 1900. From the look at the source, it doesn't look like it as it looks like passing a config object of {month:1 , day:1, year:2000} will set both the picker and the field.