View Full Version : Datepicker - choose initial date

30 Aug 2012, 11:32 AM
How can I choose the datepicker's initial date?
It always shows today's date if nothing is already selected and it shows the selected date if some date is selected.
I have two datepickers: the start and the end ones. When I choose the start date I want the end date picker to show the same month that is setted at the start picker, but without setting its value.


Start date is 11-11-2012. So I want the end picker to show me first this same date even if its value is, lets say, 01-01-2013.

How can I do that?

30 Aug 2012, 12:05 PM
Well initial value is pretty simple - just keep value property undefined. If you want own value you can assign yours Date object to datepicker in config:

value: new Date(),

As I said if you keep value empty, init function will fill value with new Date():

me.value = me.value ?
clearTime(me.value, true) : clearTime(new Date());

Now two datepickers:

Each picker has select http://docs.sencha.com/ext-js/4-1/#!/api/Ext.picker.Date-event-select. So basically you need set up:


on second picker.

31 Aug 2012, 6:06 AM
Ok. That limitates my possible choices and that's good, but it's not what I want!

I have the two pickers already setted.

Picker Begin: 02-11-12
Picker End: 03-11-12

Now I want to change the Picker Begin date. I choose May as the month to start. So:

Picker Begin: 05-11-12
Picker End: 03-11-12

Even if I set the min and max dates, when I open the "Picker End" it will show March, not May, because the date is already setted. And I want it to show the "Picker Begin" month and year so the user doens't have to navigate all the way again.

31 Aug 2012, 7:10 PM

Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 300,
bodyPadding: 10,
title: 'Dates',
items: [{
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'From',
name: 'from_date'
}, {
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'To',
name: 'to_date',
value: '01/01/2000',
onExpand: function(){
var value = this.up('form').down('datefield[name=from_date]').getValue();
this.picker.setValue(Ext.isDate(value) ? value : new Date());

5 Sep 2012, 6:36 AM
This may or not be what bruno~ is looking for, but this question, to me, is always about what seems to be an egregious oversight in the design of DateField: the need to specify which "page" (month) of the calendar opens when the DateField is expanded. This has become essential in my design where the DateField offers a limited number of valid dates (non-disabled dates), none of which occur in the current month. Instead of making users page backwards, hoping they even know to do so, it'd be great to have the DateField open to a particular month (e.g. the most recent month with non-disabled dates).

Until such a feature is available, here's a hack that accomplishes this:

parentComponent.down('dateselect').on('expand', function() {
this.setValue(lastValidDate); // The last non-disabled date or any date in target month
parentComponent.down('dateselect').on('focus', function() {

This relies on the 'expand' event always firing before the 'focus' event. It is possible to achieve the desired effect with only the first part (predicated on 'expand' event) but then the field will be filled, of course, with a particular date. If you want only to show a particular month, leaving the DateField empty, it is necessary to perform both steps.