9 * @class Roo.bootstrap.MonthField
10 * @extends Roo.bootstrap.Input
11 * Bootstrap MonthField class
13 * @cfg {String} language default en
16 * Create a new MonthField
17 * @param {Object} config The config object
20 Roo.bootstrap.MonthField = function(config){
21 Roo.bootstrap.MonthField.superclass.constructor.call(this, config);
26 * Fires when this field show.
27 * @param {Roo.bootstrap.MonthField} this
28 * @param {Mixed} date The date value
33 * Fires when this field hide.
34 * @param {Roo.bootstrap.MonthField} this
35 * @param {Mixed} date The date value
40 * Fires when select a date.
41 * @param {Roo.bootstrap.MonthField} this
42 * @param {Mixed} date The date value
48 Roo.extend(Roo.bootstrap.MonthField, Roo.bootstrap.Input, {
52 onRender: function(ct, position)
55 Roo.bootstrap.MonthField.superclass.onRender.call(this, ct, position);
57 this.language = this.language || 'en';
58 this.language = this.language in Roo.bootstrap.DateField.dates ? this.language : this.language.split('-')[0];
59 this.language = this.language in Roo.bootstrap.DateField.dates ? this.language : "en";
61 this.isRTL = Roo.bootstrap.DateField.dates[this.language].rtl || false;
62 this.format = this.format || 'F';
63 this.isInline = false;
65 this.component = this.el.select('.add-on', true).first() || false;
66 this.component = (this.component && this.component.length === 0) ? false : this.component;
67 this.hasInput = this.component && this.inputEL().length;
72 this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.DateField.template);
74 this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
76 this.picker().on('mousedown', this.onMousedown, this);
77 this.picker().on('click', this.onClick, this);
79 this.picker().addClass('datepicker-dropdown');
81 this.startViewMode = this.viewMode;
83 Roo.each(this.picker().select('thead > tr > th', true).elements, function(v){
84 v.setVisibilityMode(Roo.Element.DISPLAY)
88 Roo.each(this.picker().select('tbody > tr > td', true).elements, function(v){
89 v.setStyle('width', '189px');
92 Roo.each(this.picker().select('tfoot th.today', true).elements, function(v){
93 if(!this.calendarWeeks){
98 v.dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].today
99 v.attr('colspan', function(i, val){
100 return parseInt(val) + 1;
105 this.weekEnd = this.weekStart === 0 ? 6 : this.weekStart - 1;
107 this.setStartDate(this.startDate);
108 this.setEndDate(this.endDate);
110 this.setDaysOfWeekDisabled(this.daysOfWeekDisabled);
122 setValue: function(v)
125 var d = new Date(this.parseDate(v) ).clearTime();
127 if(isNaN(d.getTime())){
128 this.date = this.viewDate = '';
129 Roo.bootstrap.DateField.superclass.setValue.call(this, '');
133 v = this.formatDate(d);
135 Roo.bootstrap.DateField.superclass.setValue.call(this, v);
137 this.date = new Date(d.getTime() - d.getTimezoneOffset()*60000);
141 this.fireEvent('select', this, this.date);
150 var target = e.getTarget();
152 if(target.nodeName.toLowerCase() === 'i'){
153 target = Roo.get(target).dom.parentNode;
156 var nodeName = target.nodeName;
157 var className = target.className;
158 var html = target.innerHTML;
160 if(nodeName.toLowerCase() != 'span' || className.indexOf('disabled') > -1 || className.indexOf('month') == -1){
163 this.viewDate.setUTCDate(1);
164 this.viewDate.setUTCMonth(Roo.bootstrap.DateField.dates[this.language].monthsShort.indexOf(html));
166 this.setValue(this.formatDate(this.viewDate));
173 return this.pickerEl;
174 // return this.el.select('.datepicker', true).first();
179 var dowCnt = this.weekStart;
188 if(this.calendarWeeks){
196 while (dowCnt < this.weekStart + 7) {
200 html: Roo.bootstrap.DateField.dates[this.language].daysMin[(dowCnt++)%7]
204 this.picker().select('>.datepicker-days thead', true).first().createChild(dow);
207 fillMonths: function()
210 var months = this.picker().select('>.datepicker-months td', true).first();
212 months.dom.innerHTML = '';
218 html: Roo.bootstrap.DateField.dates[this.language].monthsShort[i++]
221 months.createChild(month);
228 this.date = (typeof(this.date) === 'undefined' || ((typeof(this.date) === 'string') && !this.date.length)) ? this.UTCToday() : (typeof(this.date) === 'string') ? this.parseDate(this.date) : this.date;
230 if (this.date < this.startDate) {
231 this.viewDate = new Date(this.startDate);
232 } else if (this.date > this.endDate) {
233 this.viewDate = new Date(this.endDate);
235 this.viewDate = new Date(this.date);
243 var d = new Date(this.viewDate),
244 year = d.getUTCFullYear(),
245 month = d.getUTCMonth(),
246 startYear = this.startDate !== -Infinity ? this.startDate.getUTCFullYear() : -Infinity,
247 startMonth = this.startDate !== -Infinity ? this.startDate.getUTCMonth() : -Infinity,
248 endYear = this.endDate !== Infinity ? this.endDate.getUTCFullYear() : Infinity,
249 endMonth = this.endDate !== Infinity ? this.endDate.getUTCMonth() : Infinity,
250 currentDate = this.date && this.date.valueOf(),
251 today = this.UTCToday();
253 this.picker().select('>.datepicker-days thead th.switch', true).first().dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].months[month]+' '+year;
255 // this.picker().select('>tfoot th.today', true).first().dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].today;
257 // this.picker.select('>tfoot th.today').
258 // .text(dates[this.language].today)
259 // .toggle(this.todayBtn !== false);
261 this.updateNavArrows();
264 var prevMonth = this.UTCDate(year, month-1, 28,0,0,0,0),
266 day = prevMonth.getDaysInMonth(prevMonth.getUTCFullYear(), prevMonth.getUTCMonth());
268 prevMonth.setUTCDate(day);
270 prevMonth.setUTCDate(day - (prevMonth.getUTCDay() - this.weekStart + 7)%7);
272 var nextMonth = new Date(prevMonth);
274 nextMonth.setUTCDate(nextMonth.getUTCDate() + 42);
276 nextMonth = nextMonth.valueOf();
278 var fillMonths = false;
280 this.picker().select('>.datepicker-days tbody',true).first().dom.innerHTML = '';
282 while(prevMonth.valueOf() < nextMonth) {
285 if (prevMonth.getUTCDay() === this.weekStart) {
287 this.picker().select('>.datepicker-days tbody',true).first().createChild(fillMonths);
295 if(this.calendarWeeks){
296 // ISO 8601: First week contains first thursday.
297 // ISO also states week starts on Monday, but we can be more abstract here.
299 // Start of current week: based on weekstart/current date
300 ws = new Date(+prevMonth + (this.weekStart - prevMonth.getUTCDay() - 7) % 7 * 864e5),
301 // Thursday of this week
302 th = new Date(+ws + (7 + 4 - ws.getUTCDay()) % 7 * 864e5),
303 // First Thursday of year, year from thursday
304 yth = new Date(+(yth = this.UTCDate(th.getUTCFullYear(), 0, 1)) + (7 + 4 - yth.getUTCDay())%7*864e5),
305 // Calendar week: ms between thursdays, div ms per day, div 7 days
306 calWeek = (th - yth) / 864e5 / 7 + 1;
316 if (prevMonth.getUTCFullYear() < year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() < month)) {
318 } else if (prevMonth.getUTCFullYear() > year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() > month)) {
321 if (this.todayHighlight &&
322 prevMonth.getUTCFullYear() == today.getFullYear() &&
323 prevMonth.getUTCMonth() == today.getMonth() &&
324 prevMonth.getUTCDate() == today.getDate()) {
328 if (currentDate && prevMonth.valueOf() === currentDate) {
329 clsName += ' active';
332 if (prevMonth.valueOf() < this.startDate || prevMonth.valueOf() > this.endDate ||
333 this.daysOfWeekDisabled.indexOf(prevMonth.getUTCDay()) !== -1) {
334 clsName += ' disabled';
339 cls: 'day ' + clsName,
340 html: prevMonth.getDate()
343 prevMonth.setDate(prevMonth.getDate()+1);
346 var currentYear = this.date && this.date.getUTCFullYear();
347 var currentMonth = this.date && this.date.getUTCMonth();
349 this.picker().select('>.datepicker-months th.switch',true).first().dom.innerHTML = year;
351 Roo.each(this.picker().select('>.datepicker-months tbody span',true).elements, function(v,k){
352 v.removeClass('active');
354 if(currentYear === year && k === currentMonth){
355 v.addClass('active');
358 if (year < startYear || year > endYear || (year == startYear && k < startMonth) || (year == endYear && k > endMonth)) {
359 v.addClass('disabled');
365 year = parseInt(year/10, 10) * 10;
367 this.picker().select('>.datepicker-years th.switch', true).first().dom.innerHTML = year + '-' + (year + 9);
369 this.picker().select('>.datepicker-years tbody td',true).first().dom.innerHTML = '';
372 for (var i = -1; i < 11; i++) {
373 this.picker().select('>.datepicker-years tbody td',true).first().createChild({
375 cls: 'year' + (i === -1 || i === 10 ? ' old' : '') + (currentYear === year ? ' active' : '') + (year < startYear || year > endYear ? ' disabled' : ''),
383 showMode: function(dir)
386 this.viewMode = Math.max(this.minViewMode, Math.min(2, this.viewMode + dir));
389 Roo.each(this.picker().select('>div',true).elements, function(v){
390 v.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
393 this.picker().select('>.datepicker-'+Roo.bootstrap.DateField.modes[this.viewMode].clsName, true).first().show();
398 if(this.isInline) return;
400 this.picker().removeClass(['bottom', 'top']);
402 if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){
404 * place to the top of element!
408 this.picker().addClass('top');
409 this.picker().setTop(this.inputEl().getTop() - this.picker().getHeight()).setLeft(this.inputEl().getLeft());
414 this.picker().addClass('bottom');
416 this.picker().setTop(this.inputEl().getBottom()).setLeft(this.inputEl().getLeft());
419 parseDate : function(value)
421 if(!value || value instanceof Date){
424 var v = Date.parseDate(value, this.format);
425 if (!v && (this.useIso || value.match(/^(\d{4})-0?(\d+)-0?(\d+)/))) {
426 v = Date.parseDate(value, 'Y-m-d');
428 if(!v && this.altFormats){
429 if(!this.altFormatsArray){
430 this.altFormatsArray = this.altFormats.split("|");
432 for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
433 v = Date.parseDate(value, this.altFormatsArray[i]);
439 formatDate : function(date, fmt)
441 return (!date || !(date instanceof Date)) ?
442 date : date.dateFormat(fmt || this.format);
447 Roo.bootstrap.DateField.superclass.onFocus.call(this);
453 Roo.bootstrap.DateField.superclass.onBlur.call(this);
455 var d = this.inputEl().getValue();
464 this.picker().show();
468 this.fireEvent('show', this, this.date);
473 if(this.isInline) return;
474 this.picker().hide();
475 this.viewMode = this.startViewMode;
478 this.fireEvent('hide', this, this.date);
482 onMousedown: function(e)
490 Roo.bootstrap.DateField.superclass.keyup.call(this);
496 return this.formatDate(this.date);
501 if (!this.picker().isVisible()){
502 if (e.keyCode == 27) // allow escape to hide and re-show picker
507 var dateChanged = false,
509 newDate, newViewDate;
518 if (!this.keyboardNavigation) break;
519 dir = e.keyCode == 37 ? -1 : 1;
522 newDate = this.moveYear(this.date, dir);
523 newViewDate = this.moveYear(this.viewDate, dir);
524 } else if (e.shiftKey){
525 newDate = this.moveMonth(this.date, dir);
526 newViewDate = this.moveMonth(this.viewDate, dir);
528 newDate = new Date(this.date);
529 newDate.setUTCDate(this.date.getUTCDate() + dir);
530 newViewDate = new Date(this.viewDate);
531 newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir);
533 if (this.dateWithinRange(newDate)){
535 this.viewDate = newViewDate;
536 this.setValue(this.formatDate(this.date));
544 if (!this.keyboardNavigation) break;
545 dir = e.keyCode == 38 ? -1 : 1;
547 newDate = this.moveYear(this.date, dir);
548 newViewDate = this.moveYear(this.viewDate, dir);
549 } else if (e.shiftKey){
550 newDate = this.moveMonth(this.date, dir);
551 newViewDate = this.moveMonth(this.viewDate, dir);
553 newDate = new Date(this.date);
554 newDate.setUTCDate(this.date.getUTCDate() + dir * 7);
555 newViewDate = new Date(this.viewDate);
556 newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir * 7);
558 if (this.dateWithinRange(newDate)){
560 this.viewDate = newViewDate;
561 this.setValue(this.formatDate(this.date));
568 this.setValue(this.formatDate(this.date));
573 this.setValue(this.formatDate(this.date));
586 setStartDate: function(startDate)
588 this.startDate = startDate || -Infinity;
589 if (this.startDate !== -Infinity) {
590 this.startDate = this.parseDate(this.startDate);
593 this.updateNavArrows();
596 setEndDate: function(endDate)
598 this.endDate = endDate || Infinity;
599 if (this.endDate !== Infinity) {
600 this.endDate = this.parseDate(this.endDate);
603 this.updateNavArrows();
606 setDaysOfWeekDisabled: function(daysOfWeekDisabled)
608 this.daysOfWeekDisabled = daysOfWeekDisabled || [];
609 if (typeof(this.daysOfWeekDisabled) !== 'object') {
610 this.daysOfWeekDisabled = this.daysOfWeekDisabled.split(/,\s*/);
612 this.daysOfWeekDisabled = this.daysOfWeekDisabled.map(function (d) {
613 return parseInt(d, 10);
616 this.updateNavArrows();
619 updateNavArrows: function()
625 var d = new Date(this.viewDate),
626 year = d.getUTCFullYear(),
627 month = d.getUTCMonth();
629 Roo.each(this.picker().select('.prev', true).elements, function(v){
631 switch (this.viewMode) {
634 if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear() && month <= this.startDate.getUTCMonth()) {
640 if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear()) {
647 Roo.each(this.picker().select('.next', true).elements, function(v){
649 switch (this.viewMode) {
652 if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear() && month >= this.endDate.getUTCMonth()) {
658 if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear()) {
666 moveMonth: function(date, dir)
668 if (!dir) return date;
669 var new_date = new Date(date.valueOf()),
670 day = new_date.getUTCDate(),
671 month = new_date.getUTCMonth(),
674 dir = dir > 0 ? 1 : -1;
677 // If going back one month, make sure month is not current month
678 // (eg, Mar 31 -> Feb 31 == Feb 28, not Mar 02)
680 return new_date.getUTCMonth() == month;
682 // If going forward one month, make sure month is as expected
683 // (eg, Jan 31 -> Feb 31 == Feb 28, not Mar 02)
685 return new_date.getUTCMonth() != new_month;
687 new_month = month + dir;
688 new_date.setUTCMonth(new_month);
689 // Dec -> Jan (12) or Jan -> Dec (-1) -- limit expected date to 0-11
690 if (new_month < 0 || new_month > 11)
691 new_month = (new_month + 12) % 12;
693 // For magnitudes >1, move one month at a time...
694 for (var i=0; i<mag; i++)
695 // ...which might decrease the day (eg, Jan 31 to Feb 28, etc)...
696 new_date = this.moveMonth(new_date, dir);
697 // ...then reset the day, keeping it in the new month
698 new_month = new_date.getUTCMonth();
699 new_date.setUTCDate(day);
701 return new_month != new_date.getUTCMonth();
704 // Common date-resetting loop -- if date is beyond end of month, make it
707 new_date.setUTCDate(--day);
708 new_date.setUTCMonth(new_month);
713 moveYear: function(date, dir)
715 return this.moveMonth(date, dir*12);
718 dateWithinRange: function(date)
720 return date >= this.startDate && date <= this.endDate;
726 this.picker().remove();
731 Roo.apply(Roo.bootstrap.DateField, {
742 html: '<i class="fa fa-arrow-left"/>'
752 html: '<i class="fa fa-arrow-right"/>'
794 days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
795 daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
796 daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
797 months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
798 monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
821 Roo.apply(Roo.bootstrap.DateField, {
825 cls: 'datepicker dropdown-menu roo-dynamic',
829 cls: 'datepicker-days',
833 cls: 'table-condensed',
835 Roo.bootstrap.DateField.head,
839 Roo.bootstrap.DateField.footer
846 cls: 'datepicker-months',
850 cls: 'table-condensed',
852 Roo.bootstrap.DateField.head,
853 Roo.bootstrap.DateField.content,
854 Roo.bootstrap.DateField.footer
861 cls: 'datepicker-years',
865 cls: 'table-condensed',
867 Roo.bootstrap.DateField.head,
868 Roo.bootstrap.DateField.content,
869 Roo.bootstrap.DateField.footer