Inputs to DatePicker - Ext JS

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?

  #2  

02-28-2007, 07: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.

  #3  

02-28-2007, 07:47 PM

---

http://www.yui-ext.com/forum/viewtopic.php?t=3225

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

  #4  

02-28-2007, 07:50 PM

---

Excellent!

  #5  

02-28-2007, 08: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.

  #6  

02-28-2007, 08: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?

  #7  

02-28-2007, 09: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.

  #8  

02-28-2007, 09: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.

  #9  

03-03-2007, 07: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

  #10  

03-03-2007, 04: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.