PDA

View Full Version : How to set datepickerfield to default to today's date after opening it.



profunctional
5 Oct 2011, 11:11 AM
I have a datepickerfield that by default should be null. However, if the user clicks to select the date, it currently defaults to 1/1/2000. I'd like to have the date default to today's date.

How do I do this?

bassjobsen
6 Oct 2011, 12:45 AM
Hi,

You can set;


value : { day: new Date().getDate(), month: (new Date().getMonth()+1), year : new Date().getFullYear()}

b.e.

{
xtype: "datepickerfield",
name: "date",
label: null,
id : "lastdate",
picker: { yearFrom: 2011, yearTo: 2012},
value : { day: new Date().getDate(), month: (new Date().getMonth()+1), year : new Date().getFullYear()}
}

profunctional
6 Oct 2011, 3:35 AM
Thanks for the tip. Unfortunately I've already tried this. The date still defaults to 1/1/2011. I wonder if it is a bug.

Hi,

You can set;


value : { day: new Date().getDate(), month: (new Date().getMonth()+1), year : new Date().getFullYear()}

b.e.

{
xtype: "datepickerfield",
name: "date",
label: null,
id : "lastdate",
picker: { yearFrom: 2011, yearTo: 2012},
value : { day: new Date().getDate(), month: (new Date().getMonth()+1), year : new Date().getFullYear()}
}

profunctional
6 Oct 2011, 3:47 AM
I take it back that worked. But I remember why I couldn't do it like this. The field should be blank by default. But when the user taps the field I'd like to default it to today's date. I'm looking for a tap event for the field or something, which I don't see in the docs.

bassjobsen
6 Oct 2011, 5:39 AM
Well, okay
There are more threads like this b.e. http://www.sencha.com/forum/showthread.php?11353-DateField-onChange-event-only-on-lost-focus

You have to find the event which is fired before the select popup come up.
So you can add a listener like:

listeners:
{
idontkown : function()
{
this.setValue();
}
}

select is fired after selecting a date so you need someting like beforeselect

bassjobsen
6 Oct 2011, 11:19 AM
Try this:

{
xtype: "datepickerfield",
name: "date",
label: null,
id : "lastdate",
picker: { yearFrom: 2011, yearTo: 2012},
listeners: {
click:
{
element: 'el',
fn: function() {
Ext.getCmp('lastdate').getDatePicker().setValue(new Date());//set today
}
}
}

profunctional
9 Oct 2011, 9:12 AM
You are genius! This worked perfectly. Thank you so much!

Try this:

{
xtype: "datepickerfield",
name: "date",
label: null,
id : "lastdate",
picker: { yearFrom: 2011, yearTo: 2012},
listeners: {
click:
{
element: 'el',
fn: function() {
Ext.getCmp('lastdate').getDatePicker().setValue(new Date());//set today
}
}
}

MrFox
8 Jan 2015, 5:56 AM
This does not work for me :(Would setting a placeholder override showing the default date?

MrFox
19 Jan 2015, 4:52 AM
Setting the value while defining the view seems to be broken. Instead you need to manually set the value after the element has loaded.


this.getDatePicker().setValue(new Date());

Do this during the launch of your view, or if that does not work, fire an event after you've added the view to Ext.Viewport.