ux/DateDisplay.js
[roojs1] / ux / DateDisplay.js
1
2
3  
4            
5 Roo.form.DateDisplay = function(config){
6     
7     
8     Roo.form.DateDisplay.superclass.constructor.call(this, config);
9     config.listener = config.listener  || {};
10     Roo.log(config);
11     var c = Roo.apply({}, config);
12     delete c.listener;
13     
14     this.picker = new Roo.DatePicker( c );
15     
16     this.addEvents({
17         /**
18              * @event select
19              * Fires when a date is selected
20              * @param {DatePicker} this
21              * @param {Date} date The selected date
22              */
23         'select': true,
24         /**
25              * @event monthchange
26              * Fires when the displayed month changes 
27              * @param {DatePicker} this
28              * @param {Date} date The selected month
29              */
30         'monthchange': true
31     });
32
33     
34     this.picker.on('select', this.onSelect, this);
35     
36 };
37
38 Roo.extend(Roo.form.DateDisplay , Roo.form.TextField ,  {
39     
40     inputType  : 'hidden',
41     
42     onRender : function(ct, position)
43     {
44         Roo.form.TextField.superclass.onRender.call(this, ct, position);
45         
46         
47         this.el.dom.value = this.value ? this.formatDate(this.value, 'Y-m-d') : '';
48         // prevent input submission
49         
50         // now render the field..  
51         this.wrap = this.el.wrap();
52         
53         this.viewEl = this.wrap.createChild({ tag: 'div', cls: 'x-form-displayfield'});
54         
55         this.picker.onRender(this.viewEl, position);
56         
57     },
58     onSelect : function(sel) {
59         
60         if (this.picker.value) {
61             this.setValue(this.picker.value.format('Y-m-d'));
62             this.fireEvent('select', this);
63         }
64          
65     }
66     
67 });