普普通通HTML的input调用Ext js DatePicker的实现方法
普通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/> tag
bindToInput : false,
initComponent:function(){
Ext.ux.DatePicker.superclass.initComponent.call(this);
if(this.bindToInput){//create container to render
this.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 onclick
bindingTo: 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 container
createAlignToContainer : 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");
},
// override
showMonthPicker : 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 days
this.monthPicker.slideIn('t', {duration:0.2});
}else{//format no days
this.monthPicker.show();
this.monthPicker.child('> table',false).setWidth(this.el.getWidth() - 2);
this.monthPicker.setWidth(this.el.getWidth() - 2);
}
}
},
// override
show : 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 selected
validateDate : 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 datePicker
if(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();
}
}
效果：