普通HTML的input调用Ext js DatePicker的实现方法
/*! * Ext JS Library 3.2.1 * Copyright(c) 2006-2010 Ext JS, Inc. * licensing@extjs.com * http://www.extjs.com/license */Ext.ns('Ext.ux');/* * @class Ext.ux.DatePicker * @extends Ext.DatePicker * Ext.ux.DatePicker */Ext.ux.DatePicker = Ext.extend(Ext.DatePicker,{// bind this component to normal <input/> tagbindToInput : false,initComponent:function(){Ext.ux.DatePicker.superclass.initComponent.call(this);if(this.bindToInput){//create container to renderthis.createAlignToContainer();this.render(this.alignToContainerId);}},// private onRender : function(container, position){Ext.ux.DatePicker.superclass.onRender.call(this, container, position);if(this.bindToInput){Ext.getDoc().on('mousedown',function(e,t,o){if(t == this.bindTo.dom || e.getTarget('div.x-date-picker')){//do nothing}else{// hide this component when click other area except <input/> tag and datepicker area this.hide();}},this);}},// bind a singleton datepicker to <input/> tag while it onclickbindingTo: function(bindTo){if(bindTo){this.bindTo = Ext.get(bindTo);if(this.bindTo){if(this.bindTo.dom.prev){this.prev = Ext.get(this.bindTo.dom.prev);}if(this.bindTo.dom.next){this.next = Ext.get(this.bindTo.dom.next);}if(this.bindToInput){this.alignToContainer.alignTo(bindTo,'tl-bl?');// alignment}}}},// create containercreateAlignToContainer : function(){var divElement = document.createElement('div');this.alignToContainerId = Ext.id();document.body.appendChild(divElement);divElement.setAttribute('id',this.alignToContainerId)this.alignToContainer = Ext.get(this.alignToContainerId);this.alignToContainer.applyStyles("position:absolute"); this.alignToContainer.applyStyles("z-index:99999");},// overrideshowMonthPicker : function(){ if(!this.disabled){ this.createMonthPicker(); var size = this.el.getSize(); this.monthPicker.setSize(size); this.monthPicker.child('table').setSize(size); this.mpSelMonth = (this.activeDate || this.value).getMonth(); this.updateMPMonth(this.mpSelMonth); this.mpSelYear = (this.activeDate || this.value).getFullYear(); this.updateMPYear(this.mpSelYear); if(this.format.indexOf('d') != -1){// format with daysthis.monthPicker.slideIn('t', {duration:0.2});}else{//format no daysthis.monthPicker.show();this.monthPicker.child('> table',false).setWidth(this.el.getWidth() - 2);this.monthPicker.setWidth(this.el.getWidth() - 2);} } },// overrideshow : function(){Ext.ux.DatePicker.superclass.show.call(this);if(this.format.indexOf('d') == -1){this.showMonthPicker();}},// override onMonthClick : function(e, t){ e.stopEvent(); var el = new Ext.Element(t), pn; if(el.is('button.x-date-mp-cancel')){if(this.format.indexOf('d') == -1){this.hide();}else{this.hideMonthPicker();} } else if(el.is('button.x-date-mp-ok')){ var d = new Date(this.mpSelYear, this.mpSelMonth, (this.activeDate || this.value).getDate()); if(d.getMonth() != this.mpSelMonth){ // 'fix' the JS rolling date conversion if needed d = new Date(this.mpSelYear, this.mpSelMonth, 1).getLastDateOfMonth(); } this.update(d);if(this.format.indexOf('d') == -1){this.bindTo.dom.value = d.format(this.format);this.setValue(Date.parseDate(d.format(this.format),this.format),true);this.hide();if(this.fireEvent('select', this, this.value) == true){this.validateDate();}}else{this.hideMonthPicker();} } else if((pn = el.up('td.x-date-mp-month', 2))){ this.mpMonths.removeClass('x-date-mp-sel'); pn.addClass('x-date-mp-sel'); this.mpSelMonth = pn.dom.xmonth; } else if((pn = el.up('td.x-date-mp-year', 2))){ this.mpYears.removeClass('x-date-mp-sel'); pn.addClass('x-date-mp-sel'); this.mpSelYear = pn.dom.xyear; } else if(el.is('a.x-date-mp-prev')){ this.updateMPYear(this.mpyear-10); } else if(el.is('a.x-date-mp-next')){ this.updateMPYear(this.mpyear+10); } }, // override onMonthDblClick : function(e, t){ e.stopEvent(); var el = new Ext.Element(t), pn, d; if((pn = el.up('td.x-date-mp-month', 2))){d = new Date(this.mpSelYear, pn.dom.xmonth, (this.activeDate || this.value).getDate()); this.update(d); if(this.format.indexOf('d') == -1){this.bindTo.dom.value = d.format(this.format);this.setValue(Date.parseDate(d.format(this.format),this.format),true);this.hide();if(this.fireEvent('select', this, this.value) == true){this.validateDate();}}else{this.hideMonthPicker();} } else if((pn = el.up('td.x-date-mp-year', 2))){d = new Date(pn.dom.xyear, this.mpSelMonth, (this.activeDate || this.value).getDate()); this.update(d); if(this.format.indexOf('d') == -1){this.bindTo.dom.value = d.format(this.format);this.setValue(Date.parseDate(d.format(this.format),this.format),true);this.hide();if(this.fireEvent('select', this, this.value) == true){this.validateDate();}}else{this.hideMonthPicker();} } },// private handleDateClick : function(e, t){ e.stopEvent(); if(!this.disabled && t.dateValue && !Ext.fly(t.parentNode).hasClass('x-date-disabled')){ this.cancelFocus = this.focusOnSelect === false; this.setValue(new Date(t.dateValue)); delete this.cancelFocus; if(this.fireEvent('select', this, this.value) == true){this.validateDate();} } }, // private selectToday : function(){ if(this.todayBtn && !this.todayBtn.disabled){ this.setValue(new Date().clearTime()); if(this.fireEvent('select', this, this.value) == true){this.validateDate();} } },//validate when a date is selectedvalidateDate : function(){if(this.bindToInput){if(this.bindTo){if(this.prev){if(Ext.get(this.prev)){var prev_date = Date.parseDate(Ext.get(this.prev).getValue(),this.format,true);if(prev_date){var this_date = Date.parseDate(this.getValue().format(this.format),this.format,true);if(prev_date.getTime() > this_date.getTime()){Ext.Msg.alert('warning','\u6240\u9009\u65f6\u95f4\u7684\u524d\u540e\u987a\u5e8f\u6709\u8bef\uff01\uff01\uff01',function(){this.bindTo.focus();this.bindTo.dom.select();},this);}}}}if(this.next){if(Ext.get(this.next)){var next_date = Date.parseDate(Ext.get(this.next).getValue(),this.format,true);if(next_date){var this_date = Date.parseDate(this.getValue().format(this.format),this.format,true);if(next_date.getTime() < this_date.getTime()){Ext.Msg.alert('warning','\u6240\u9009\u65f6\u95f4\u7684\u524d\u540e\u987a\u5e8f\u6709\u8bef\uff01\uff01\uff01',function(){this.bindTo.focus();this.bindTo.dom.select();},this);}}}}}}}});/* * bind a datePicker,an example like this: * <input type='text' id='from_date' name='date1' next='to_date' onclick='showDatePicker(this);'/> * <input type='text' id='to_date' name='date2' prev='from_date' onclick='showDatePicker(this);'/> */function showDatePicker(input){//singleton datePickerif(Ext.getCmp('x-datepicker-ux')){var datePicker = Ext.getCmp('x-datepicker-ux');datePicker.bindingTo(input);datePicker.show();}else{var datePicker = new Ext.ux.DatePicker({id: 'x-datepicker-ux',format: 'Y-m',bindToInput: true,handler: function(_datePicker,_date){_datePicker.bindTo.dom.value = _date.format(_datePicker.format);_datePicker.hide();}});datePicker.bindingTo(input);datePicker.show();}}
