PDA

View Full Version : DatePicker, DateField



edgars
23 Feb 2007, 2:15 AM
Does anyone have an example how to use DatePicker or DateField control ?

I suppose I can use something like this



DateExample = { date: new Ext.DatePicker({format: 'Y-m-d H:i:s', allowBlank:true}),
render : function(el) {this.date.render(el)}
}


and in html:


<span id="date" onclick="DateExample.render(this);">date</span>


And find the correct hooks for action on date select. I would also need to display the DatePicker in correct position.

Is there an easier way? Perhaps I should use Ext.form.DateField?

Sliver
23 Feb 2007, 2:52 AM
Just look at the examples :

http://www.yui-ext.com/deploy/ext-1.0-alpha1/examples/form/forms.html
http://www.yui-ext.com/deploy/ext-1.0-alpha1/examples/menu/menus.html

edgars
23 Feb 2007, 3:07 AM
Thanks! I missed these examples as they were not shown from docs viewer.

mzbirka
23 Feb 2007, 3:18 AM
I'm using it like this (simplified example):


<html>
<span id='validFromDatePicker'/>
<script type='text/javascript'>
var dateFrom = new Ext.form.DateField({format : "d.m.Y"});
dateFrom.render(Ext.get('validFromDatePicker'));
</script>


With this included after Ext for DatePicker i18n:


/* datepicker i18n cs_CZ czech */
Ext.DatePicker.prototype.startDay=1;
Ext.DatePicker.prototype.dayNames = ['Neděle', 'Pondělí', 'Úterý', 'Středa', 'Čtvrtek', 'Pátek', 'Sobota'];
Ext.DatePicker.prototype.monthNames = ['Leden', 'Únor', 'Březen', 'Duben', 'Květen', 'Červen', 'Červenec', 'Srpen', 'Září', 'Říjen', 'Listopad', 'Prosinec'];
Ext.DatePicker.prototype.todayText = "Dnes";
Ext.DatePicker.prototype.minText = "Toto datum je před nejdřívěj?ím povoleným datem";
Ext.DatePicker.prototype.maxText = "Toto datum je po nejpozděj?ím povoleném datu";
Ext.DatePicker.prototype.todayTip = "{0} (Mezerník)",
Ext.DatePicker.prototype.format = "d.m.Y",
Ext.DatePicker.prototype.nextText = 'Následující měsíc (Ctrl+Doprava)',
Ext.DatePicker.prototype.prevText = 'Předchozí měsíc (Ctrl+Doleva)',
Ext.DatePicker.prototype.monthYearText = 'Vyberte měsíc (Ctrl+Nahoru/Dolů k posuvu roků)'


Although available docs and post assume that one can "magically" turn existing input type="text" form fields into a DatePicker fields, I had no such luck and waiting for the official docs fo this (it is a minor issue for me).

timb
23 Feb 2007, 8:29 PM
Hi mzbirka,

Jack confirmed that you should be able to use existing input elements, but it's not working at this time (1.0-alpha1 rev 9). He's currently looking into it. Please see the following post:
http://www.yui-ext.com/forum/viewtopic.php?t=3051&sid=6f770288fc7406d577051e9d51b14851

Regards,
Tim

mzbirka
24 Feb 2007, 4:01 AM
Thanks for pointing that out for me, Tim!

mystix
26 Feb 2007, 12:29 AM
Hi Jack,

ext.0.33 had the ability to dynamically create the DatePicker container (with the iframe shim and all) using the YAHOO.ext.DatePicker.prototype.buildControl method, after which all calls to the same DatePicker control would use the same container.

I then
- monitored the form for clicks on calendar icons (each icon is associated with an input field)
- moved the DatePicker control over the calendar icon which was last clicked
- updated the corresponding input field with the date selected

i found this to be much faster than creating separate DatePickers for each date field in the form.
Howeever, in Ext 1.0, DatePicker loses this capability.

Just wondering if this was left out intentionally, and if you intended for us to move to the new Ext.form.Datefield control instead? (which are totally sweet by the way :D )

Also, correct me if i'm wrong, but there doesn't seem to be a way to set the id of the input element in the DateField (it's always assigned an Ext.id() generated id), or for any other Ext.forms field?

jack.slocum
26 Feb 2007, 5:15 AM
The forms stuff still needs some work for 1.0. I will be getting back to it soon. :)

jack.slocum
26 Feb 2007, 5:27 AM
I just made some changes so you should be able to share a DateMenu instance between fields. It will be in the next rev. Here's how you would use it:


var menu = new Ext.DateMenu();
var field1 = new Ext.DateField({menu: menu, ....});
var field2 = new Ext.DateField({menu: menu, ....});
.. etc

Once I put it up, please let me know if you have any problems.

mystix
12 Mar 2007, 10:52 PM
hi jack, sorry for this really late reply.
I'm happy to report that DateMenu sharing between DateFields works really well. Thanks!
[EDIT] (all this was tested on a3r2)

Found something strange on IE 6 though.
When the datepicker first appears in IE6, the calendar is displayed for a split second, after which the calendar disappears, leaving an empty white div where the calendar and the "Today" button should be.

This doesn't happen on FF2.

jack.slocum
12 Mar 2007, 11:17 PM
I will look into it. Can you provide any type of test case?

mystix
12 Mar 2007, 11:31 PM
Hi jack,

here's my test page:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DateField IE6 Test (Ext 1.0 alpha 3 rev 2)</title>
<link rel='stylesheet' href='ext-all.css'>
<style type='text/css'>
.x-form-field-wrap {display:inline;} /* display DateFields inline */
.x-form-field-wrap .x-form-date-trigger-nonie {top:-1px;} /* remove 1px top padding for non-IE browsers */
</style>

<script src='yui-utilities.js'></script>
<script src='ext-yui-adapter.js' type="text/javascript"></script>
<script src='ext-all.js'></script>

<script type="text/javascript">
Ext.onReady(function() {
var dateFields = Ext.DomQuery.select('input.date');
var dateFieldCfg = {
menu: new Ext.menu.DateMenu(), // create single DateMenu instance to be shared across DateFields
allowBlank:true,
format:'dmy',
triggerClass: (Ext.isIE || Ext.isIE7)? 'x-form-date-trigger' : 'x-form-date-trigger x-form-date-trigger-nonie'
};

for (i = 0; i < dateFields.length; i++) {
var df = new Ext.form.DateField(dateFieldCfg);
df.applyTo(dateFields[i].id);
}
});
</script>
</head>
<body>
<div>Date 1<input id='date1' name='date1' class='date'></div>


<div>Date 2<input id='date2' name='date2' class='date'></div>
</body>
</html>

jack.slocum
13 Mar 2007, 3:32 AM
Rev 3 will fix this. I will be putting it up momentarily.

mystix
13 Mar 2007, 3:58 AM
Tested and working in alpha 3 rev 3. Thanks jack!

philiphachey
26 Mar 2007, 6:36 AM
PostPosted: Mon Feb 26, 2007 8:27 am Post subject:
I just made some changes so you should be able to share a DateMenu instance between fields. It will be in the next rev. Here's how you would use it:

var menu = new Ext.DateMenu();
var field1 = new Ext.DateField({menu: menu, ....});
var field2 = new Ext.DateField({menu: menu, ....});
.. etc


hi jack, sorry for this really late reply.
I'm happy to report that DateMenu sharing between DateFields works really well. Thanks!
[EDIT] (all this was tested on a3r2)
....<snip>

I just thought I'd point out that, while sharing of DateMenu does work, there is some unexpected behaviour: on all occurrences of DateField after the first, when selecting a date from the shared DateMenu, the browser (IE6) re-scrolls so that the DateField is at the bottom of the view port. It should not re-scroll at all (which is the behaviour when each DateField has its own DateMenu).

mystix
26 Mar 2007, 6:42 AM
that's interesting. that might explain the weird scrolling behaviour i was getting in both IE6 and FF2.

any ideas why this is happening?