PDA

View Full Version : DatePicker starts at 1980?



Bucs
20 Jan 2011, 1:02 PM
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
20 Jan 2011, 1:24 PM
specify the yearFrom config param. It defaults to 1980

Bucs
20 Jan 2011, 1:51 PM
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
20 Jan 2011, 1:57 PM
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
20 Jan 2011, 2:08 PM
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
20 Jan 2011, 2:09 PM
No, the source I provided shows that it is just expecting an object


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

Bucs
20 Jan 2011, 2:14 PM
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
20 Jan 2011, 2:18 PM
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
20 Jan 2011, 2:20 PM
Ah...I gotcha. Thought the property was expecting a full fidelity object. Passing a config is much cleaner. Thanks again.

Bucs
20 Jan 2011, 8:17 PM
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.

mitchellsimoens
20 Jan 2011, 8:18 PM
You can create your own Picker with custom slots.

Bucs
20 Jan 2011, 8:32 PM
Sure, but shouldn't have to do that to simply initialize a slot value to a specific number.

mitchellsimoens
20 Jan 2011, 9:55 PM
You don't but if you try setting the value to a value that isn't in the picker, it won't show the correct value I wouldn't think.

rabia mahmood
31 May 2016, 3:02 AM
I was experiencing the same issue, in that my default yearFrom was appearing as 1980. I tried to include the yearFrom and yearTo param in the datapickerfield config but it didn't alter anything. I then included picker: {yearFrom: 2016, yearTo: 2025} to the datepickerfield and that worked perfectly.

Thank you.