Roo/bootstrap/DateSplitField.js
[roojs1] / Roo / bootstrap / DateSplitField.js
1 /*
2  * - LGPL
3  *
4  * page DateSplitField.
5  * 
6  */
7
8
9 /**
10  * @class Roo.bootstrap.DateSplitField
11  * @extends Roo.bootstrap.Component
12  * Bootstrap DateSplitField class
13  * @cfg {string} fieldLabel - the label associated
14  * @cfg {Number} labelWidth set the width of label (0-12)
15  * @cfg {String} labelAlign (top|left)
16  * @cfg {Boolean} dayAllowBlank (true|false) default false
17  * @cfg {Boolean} monthAllowBlank (true|false) default false
18  * @cfg {Boolean} yearAllowBlank (true|false) default false
19  * @cfg {string} dayPlaceholder 
20  * @cfg {string} monthPlaceholder
21  * @cfg {string} yearPlaceholder
22  * @cfg {string} dayFormat default 'd'
23  * @cfg {string} monthFormat default 'm'
24  * @cfg {string} yearFormat default 'Y'
25
26  *     
27  * @constructor
28  * Create a new DateSplitField
29  * @param {Object} config The config object
30  */
31
32 Roo.bootstrap.DateSplitField = function(config){
33     Roo.bootstrap.DateSplitField.superclass.constructor.call(this, config);
34     
35     this.addEvents({
36         // raw events
37          /**
38          * @event years
39          * getting the data of years
40          * @param {Roo.bootstrap.DateSplitField} this
41          * @param {Object} years
42          */
43         "years" : true,
44         /**
45          * @event days
46          * getting the data of days
47          * @param {Roo.bootstrap.DateSplitField} this
48          * @param {Object} days
49          */
50         "days" : true,
51         /**
52          * @event invalid
53          * Fires after the field has been marked as invalid.
54          * @param {Roo.form.Field} this
55          * @param {String} msg The validation message
56          */
57         invalid : true,
58        /**
59          * @event valid
60          * Fires after the field has been validated with no errors.
61          * @param {Roo.form.Field} this
62          */
63         valid : true
64     });
65 };
66
67 Roo.extend(Roo.bootstrap.DateSplitField, Roo.bootstrap.Component,  {
68     
69     fieldLabel : '',
70     labelAlign : 'top',
71     labelWidth : 3,
72     dayAllowBlank : false,
73     monthAllowBlank : false,
74     yearAllowBlank : false,
75     dayPlaceholder : '',
76     monthPlaceholder : '',
77     yearPlaceholder : '',
78     dayFormat : 'd',
79     monthFormat : 'm',
80     yearFormat : 'Y',
81     
82     getAutoCreate : function()
83     {
84         var cfg = {
85             tag : 'div',
86             cls : 'row roo-date-split-field-group',
87             cn : []
88         }
89         
90         if(this.fieldLabel){
91             cfg.cn.push({
92                 tag : 'div',
93                 cls : 'column roo-date-split-field-label col-md-' + ((this.labelAlign == 'top') ? '12' : this.labelWidth),
94                 cn : [
95                     {
96                         tag : 'label',
97                         html : this.fieldLabel
98                     }
99                 ]
100             });
101         }
102         
103         Roo.each(['day', 'month', 'year'], function(t){
104             cfg.cn.push({
105                 tag : 'div',
106                 cls : 'column roo-date-split-field-' + t + ' col-md-' + ((this.labelAlign == 'top') ? '4' : ((12 - this.labelWidth) / 3))
107             });
108         }, this);
109         
110         return cfg;
111     },
112     
113     onRender : function(ct, position) 
114     {
115         var _this = this;
116         
117         Roo.bootstrap.NavProgressBar.superclass.onRender.call(this, ct, position);
118         
119         this.dayField = new Roo.bootstrap.ComboBox({
120             allowBlank : this.dayAllowBlank,
121             alwaysQuery : true,
122             displayField : 'value',
123             editable : false,
124             fieldLabel : '',
125             forceSelection : true,
126             mode : 'local',
127             placeholder : this.dayPlaceholder,
128             selectOnFocus : true,
129             tpl : '<div class="select2-result"><b>{value}</b></div>',
130             triggerAction : 'all',
131             typeAhead : true,
132             valueField : 'value',
133             store : new Roo.data.SimpleStore({
134                 data : (function() {    
135                     var days = [];
136                     _this.fireEvent('days', _this, days);
137                     return days;
138                 })(),
139                 fields : [ 'value' ]
140             }),
141             listeners : {
142                 select : function (_self, record, index)
143                 {
144                     _this.validate();
145                 }
146             }
147         });
148
149         this.dayField.render(this.el.select('.roo-date-split-field-day', true).first(), null);
150         
151         this.monthField = new Roo.bootstrap.MonthField({
152             after : '<i class=\"fa fa-calendar\"></i>',
153             allowBlank : this.monthAllowBlank,
154             placeholder : this.monthPlaceholder,
155             readOnly : true,
156             listeners : {
157                 render : function (_self)
158                 {
159                     this.el.select('span.input-group-addon', true).first().on('click', function(e){
160                         e.preventDefault();
161                         _self.focus();
162                     });
163                 },
164                 select : function (_self, oldvalue, newvalue)
165                 {
166                     _this.validate();
167                 }
168             }
169         });
170         
171         this.monthField.render(this.el.select('.roo-date-split-field-month', true).first(), null);
172         
173         this.yearField = new Roo.bootstrap.ComboBox({
174             allowBlank : this.yearAllowBlank,
175             alwaysQuery : true,
176             displayField : 'value',
177             editable : false,
178             fieldLabel : '',
179             forceSelection : true,
180             mode : 'local',
181             placeholder : this.yearPlaceholder,
182             selectOnFocus : true,
183             tpl : '<div class="select2-result"><b>{value}</b></div>',
184             triggerAction : 'all',
185             typeAhead : true,
186             valueField : 'value',
187             store : new Roo.data.SimpleStore({
188                 data : (function() {
189                     var years = [];
190                     _this.fireEvent('years', _this, years);
191                     return years;
192                 })(),
193                 fields : [ 'value' ]
194             }),
195             listeners : {
196                 select : function (_self, record, index)
197                 {
198                     _this.validate();
199                 }
200             }
201         });
202
203         this.yearField.render(this.el.select('.roo-date-split-field-year', true).first(), null);
204     },
205     
206     setValue : function(v, format)
207     {
208         var f = format || (this.yearFormat + '-' + this.monthFormat + '-' + this.dayFormat);
209         
210         var d = Date.parseDate(v, f);
211         
212         this.dayField.setValue(d.format(this.dayFormat));
213         this.monthField.setValue(d.format(this.monthFormat));
214         this.yearField.setValue(d.format(this.yearFormat));
215         
216         return;
217     },
218     
219     setDay : function(v)
220     {
221         this.dayField.setValue(v);
222         
223         return;
224     },
225     
226     setMonth : function(v)
227     {
228         this.monthField.setValue(v);
229         
230         return;
231     },
232     
233     setYear : function(v)
234     {
235         this.yearField.setValue(v);
236         
237         return;
238     },
239     
240     getValue : function()
241     {
242         var f = this.yearFormat + '-' + this.monthFormat + '-' + this.dayFormat;
243         
244         var date = this.yearField.getValue() + '-' + this.monthField.getValue() + '-' + this.dayField.getValue();
245         
246         return date;
247     },
248     
249     validate : function()
250     {
251         var d = this.dayField.validate();
252         var m = this.monthField.validate();
253         var y = this.yearField.validate();
254         
255         var valid = true;
256         
257         if(
258                 (!this.dayAllowBlank && !d) ||
259                 (!this.monthAllowBlank && !m) ||
260                 (!this.yearAllowBlank && !y)
261         ){
262             valid = false;
263         }
264         
265         if(this.dayAllowBlank && this.monthAllowBlank && this.yearAllowBlank){
266             return valid;
267         }
268         
269         if(valid){
270             this.markValid();
271             return valid;
272         }
273         
274         this.markInvalid();
275         
276         return valid;
277     },
278     
279     markValid : function()
280     {
281         
282         var label = this.el.select('label', true).first();
283         var icon = this.el.select('i.fa-star', true).first();
284
285         if(label && icon){
286             icon.remove();
287         }
288         
289         this.fireEvent('valid', this);
290     },
291     
292      /**
293      * Mark this field as invalid
294      * @param {String} msg The validation message
295      */
296     markInvalid : function(msg)
297     {
298         
299         var label = this.el.select('label', true).first();
300         var icon = this.el.select('i.fa-star', true).first();
301
302         if(label && !icon){
303             this.el.select('.roo-date-split-field-label', true).createChild({
304                 tag : 'i',
305                 cls : 'text-danger fa fa-lg fa-star',
306                 tooltip : 'This field is required',
307                 style : 'margin-right:5px;'
308             }, label, true);
309         }
310         
311         this.fireEvent('invalid', this, msg);
312     }
313     
314 });
315
316