PDA

View Full Version : Inputs to DatePicker



alindsay55661
28 Feb 2007, 5:31 PM
I thought I had read that you can unobtrusively convert inputs to DatePickers by passing in the input id when creating a new DateField. I have been unable to do this successfully.



var dp = new Ext.form.DateField('myinput');


If this is correct, how do I access the date picker?

alindsay55661
28 Feb 2007, 5:33 PM
In addition to that, I have not been able to pass a date into the picker either. Is there a simple config option for this? I wasn't able to find one searching through the js since I am somewhat of a novice.

jack.slocum
28 Feb 2007, 5:47 PM
http://www.yui-ext.com/forum/viewtopic.php?t=3225

The last example listed should do what you are looking for.

alindsay55661
28 Feb 2007, 5:50 PM
Excellent!

alindsay55661
28 Feb 2007, 6:12 PM
Call me crazy but I can't get this to work and the js is producing no errors for me.



<script type='text/javascript'>
Ext.onReady(function(){

var dm_closing = new Ext.form.DateField({
target: 'h_closing',
value: '02/28/2007'
});
});


</script>

<input type=text id='h_closing' name='h_closing'>


The date picker shows up but without the value. In IE7 I get null as the value.

alindsay55661
28 Feb 2007, 6:48 PM
Oddly enough, I tried all the styles you referenced in that thread above and they all yield the same results. FF simply loads nothing into the datefield and IE7 loads the word 'null'. Both browsers correctly render the datepicker itself which is great. But the value doesn't seem to work in any way I try to set it.

Could this be a Rev 6 bug?

jack.slocum
28 Feb 2007, 7:15 PM
The default format is m/d/y. Try this:


var dm_closing = new Ext.form.DateField({
target: 'h_closing',
value: '02/28/2007',
format: 'm/d/Y'
});

You may also need to bump the width.

alindsay55661
28 Feb 2007, 7:31 PM
The width was not the issue, but the rather the formatting as you suggested. Its always something subtle isn't it? Anyway, thanks for the help, this works like a charm and is such as ease to use.

Wolfgang
3 Mar 2007, 5:42 AM
I do not understand the property 'target' (using alpa2):



<input type=text id='h_closing' name='h_closing'>
<div id='test' name='test'></div>
<script type='text/javascript'>
var dm_closing = new Ext.form.DateField({
target: 'h_closing', // seems to have no impact
// target: 'test', // does not work
value: '02/28/2007',
format: 'm/d/Y'
});

dm_closing.render('test');
// dm_closing.render('h_closing); // does not work

</script>

The div 'test' is required (otherwise the datepicker gets not rendered).
Datepicker creates its on input element with its own name, regardless of the target property.

So my questions:
- what is the usage of 'target'
- how can one use the result of the datePicker in a form when using the div?

//EDIT
Seems to work in alpha2-rev6

jack.slocum
3 Mar 2007, 2:22 PM
Just to clarify:

If you use "target" it is to augment an existing field so calling "render()" isn't required (results unknown).

For other uses (like dynamically creating the field), render is required and 'target' will just break stuff.

Wolfgang
3 Mar 2007, 3:03 PM
It is now much more clear - Thank you very much. :wink:

jack.slocum
3 Mar 2007, 4:23 PM
Unfortunately, my advice won't work either. There is a flaw in the "target" idea. It works, but behind the scenes, it's actually being applied TWICE. Who knows what kind of bugs this could create. Since it needs to be applied after any constructors have been ran, it will continue to need to be a separate function call.

So, along with the dynamic render(container), there is now an applyTo(existingEl) function (in the trunk):


var combo = new Ext.form.ComboBox({
store: ds,
displayField:'author',
typeAhead: true,
listWidth:150
});
combo.applyTo('my-input'); <--- apply to existing element