* @event select
* Fires when select a date.
* @param {Roo.bootstrap.MonthField} this
- * @param {Mixed} date The date value
+ * @param {String} oldvalue The old value
+ * @param {String} newvalue The new value
*/
select : true
});
Roo.extend(Roo.bootstrap.MonthField, Roo.bootstrap.Input, {
- format : "F",
-
onRender: function(ct, position)
{
this.language = this.language in Roo.bootstrap.MonthField.dates ? this.language : "en";
this.isRTL = Roo.bootstrap.MonthField.dates[this.language].rtl || false;
- this.format = this.format || 'F';
this.isInline = false;
this.isInput = true;
this.component = this.el.select('.add-on', true).first() || false;
this.component = (this.component && this.component.length === 0) ? false : this.component;
this.hasInput = this.component && this.inputEL().length;
- this.minViewMode = 1;
- this.viewMode = 1;
-
this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.MonthField.template);
this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
this.picker().addClass('datepicker-dropdown');
- this.startViewMode = this.viewMode;
-
Roo.each(this.picker().select('tbody > tr > td', true).elements, function(v){
v.setStyle('width', '189px');
});
this.fillMonths();
+
this.update();
if(this.isInline) {
this.show();
}
+
},
- setValue: function(v)
+ setValue: function(v, suppressEvent)
{
+ var o = this.getValue();
+
Roo.bootstrap.MonthField.superclass.setValue.call(this, v);
this.update();
- this.fireEvent('select', this, this.date);
+ if(suppressEvent !== true){
+ this.fireEvent('select', this, o, v);
+ }
},
if(nodeName.toLowerCase() != 'span' || className.indexOf('disabled') > -1 || className.indexOf('month') == -1){
return;
}
- var v = Roo.bootstrap.MonthField.dates[this.language].months[Roo.bootstrap.MonthField.dates[this.language].monthsShort.indexOf(html)];
-
- this.setValue(v);
+
+ this.vIndex = Roo.bootstrap.MonthField.dates[this.language].monthsShort.indexOf(html);
+
+ this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
+
this.hide();
},
fillMonths: function()
{
- var i = 0
+ var i = 0;
var months = this.picker().select('>.datepicker-months td', true).first();
months.dom.innerHTML = '';
tag: 'span',
cls: 'month',
html: Roo.bootstrap.MonthField.dates[this.language].monthsShort[i++]
- }
+ };
months.createChild(month);
}
update: function()
{
- this.fill();
+ var _this = this;
+
+ if(typeof(this.vIndex) == 'undefined' && this.value.length){
+ this.vIndex = Roo.bootstrap.MonthField.dates[this.language].months.indexOf(this.value);
+ }
+
+ Roo.each(this.pickerEl.select('> .datepicker-months tbody > tr > td > span', true).elements, function(e, k){
+ e.removeClass('active');
+
+ if(typeof(_this.vIndex) != 'undefined' && k == _this.vIndex){
+ e.addClass('active');
+ }
+ })
},
place: function()
{
- if(this.isInline) return;
+ if(this.isInline) {
+ return;
+ }
this.picker().removeClass(['bottom', 'top']);
hide : function()
{
- if(this.isInline) return;
+ if(this.isInline) {
+ return;
+ }
this.picker().hide();
this.fireEvent('hide', this, this.date);
fireKey: function(e)
{
if (!this.picker().isVisible()){
- if (e.keyCode == 27) // allow escape to hide and re-show picker
+ if (e.keyCode == 27) {// allow escape to hide and re-show picker
this.show();
+ }
return;
}
- var dateChanged = false,
- dir, day, month,
- newDate, newViewDate;
-
-// switch(e.keyCode){
-// case 27: // escape
-// this.hide();
-// e.preventDefault();
-// break;
-// case 37: // left
-// case 39: // right
-// if (!this.keyboardNavigation) break;
-// dir = e.keyCode == 37 ? -1 : 1;
-//
-// if (e.ctrlKey){
-// newDate = this.moveYear(this.date, dir);
-// newViewDate = this.moveYear(this.viewDate, dir);
-// } else if (e.shiftKey){
-// newDate = this.moveMonth(this.date, dir);
-// newViewDate = this.moveMonth(this.viewDate, dir);
-// } else {
-// newDate = new Date(this.date);
-// newDate.setUTCDate(this.date.getUTCDate() + dir);
-// newViewDate = new Date(this.viewDate);
-// newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir);
-// }
-// if (this.dateWithinRange(newDate)){
-// this.date = newDate;
-// this.viewDate = newViewDate;
-// this.setValue(this.formatDate(this.date));
-//// this.update();
-// e.preventDefault();
-// dateChanged = true;
-// }
-// break;
-// case 38: // up
-// case 40: // down
-// if (!this.keyboardNavigation) break;
-// dir = e.keyCode == 38 ? -1 : 1;
-// if (e.ctrlKey){
-// newDate = this.moveYear(this.date, dir);
-// newViewDate = this.moveYear(this.viewDate, dir);
-// } else if (e.shiftKey){
-// newDate = this.moveMonth(this.date, dir);
-// newViewDate = this.moveMonth(this.viewDate, dir);
-// } else {
-// newDate = new Date(this.date);
-// newDate.setUTCDate(this.date.getUTCDate() + dir * 7);
-// newViewDate = new Date(this.viewDate);
-// newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir * 7);
-// }
-// if (this.dateWithinRange(newDate)){
-// this.date = newDate;
-// this.viewDate = newViewDate;
-// this.setValue(this.formatDate(this.date));
-//// this.update();
-// e.preventDefault();
-// dateChanged = true;
-// }
-// break;
-// case 13: // enter
-// this.setValue(this.formatDate(this.date));
-// this.hide();
-// e.preventDefault();
-// break;
-// case 9: // tab
-// this.setValue(this.formatDate(this.date));
-// this.hide();
-// break;
-// case 16: // shift
-// case 17: // ctrl
-// case 18: // alt
-// break;
-// default :
-// this.hide();
-//
-// }
+ var dir;
+
+ switch(e.keyCode){
+ case 27: // escape
+ this.hide();
+ e.preventDefault();
+ break;
+ case 37: // left
+ case 39: // right
+ dir = e.keyCode == 37 ? -1 : 1;
+
+ this.vIndex = this.vIndex + dir;
+
+ if(this.vIndex < 0){
+ this.vIndex = 0;
+ }
+
+ if(this.vIndex > 11){
+ this.vIndex = 11;
+ }
+
+ if(isNaN(this.vIndex)){
+ this.vIndex = 0;
+ }
+
+ this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
+
+ break;
+ case 38: // up
+ case 40: // down
+
+ dir = e.keyCode == 38 ? -1 : 1;
+
+ this.vIndex = this.vIndex + dir * 4;
+
+ if(this.vIndex < 0){
+ this.vIndex = 0;
+ }
+
+ if(this.vIndex > 11){
+ this.vIndex = 11;
+ }
+
+ if(isNaN(this.vIndex)){
+ this.vIndex = 0;
+ }
+
+ this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
+ break;
+
+ case 13: // enter
+
+ if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){
+ this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
+ }
+
+ this.hide();
+ e.preventDefault();
+ break;
+ case 9: // tab
+ if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){
+ this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
+ }
+ this.hide();
+ break;
+ case 16: // shift
+ case 17: // ctrl
+ case 18: // alt
+ break;
+ default :
+ this.hide();
+
+ }
},
remove: function()
projects / roojs1 / blobdiff