在ExtJS2.0中使用datefield编写开始/结束时间组件
效果:
源代码如下:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title></title><link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script><style>
</style><script type="text/javascript"> // Add the additional 'advanced' VTypes Ext.apply(Ext.form.VTypes, { daterange: function(val, field) { var date = field.parseDate(val); // We need to force the picker to update values to recaluate the disabled dates display var dispUpd = function(picker) { var ad = picker.activeDate; picker.activeDate = null; picker.update(ad); }; if (field.startDateField) { var sd = Ext.getCmp(field.startDateField); sd.maxValue = date; if (sd.menu && sd.menu.picker) { sd.menu.picker.maxDate = date; dispUpd(sd.menu.picker); } } else if (field.endDateField) { var ed = Ext.getCmp(field.endDateField); ed.minValue = date; if (ed.menu && ed.menu.picker) { ed.menu.picker.minDate = date; dispUpd(ed.menu.picker); } } /* Always return true since we're only using this vtype * to set the min/max allowed values (these are tested * for after the vtype test) */ return true; } });
Ext.onReady(function(){ // Ext.QuickTips.init();
// turn on validation errors beside the field globally // Ext.form.Field.prototype.msgTarget = 'side';
var form_add_maintenance = new Ext.FormPanel({ labelWidth: 100, // url:'/save-maintenance.epl', frame:true, title:'Add maintenance', bodyStyle:'padding:5px 5px 0', width:400, defaults:{width:250}, defaultType:'textfield', renderTo:Ext.getBody(), items: [{ fieldLabel:'Description', name:'description', allowBlank:false },{ xtype:'datefield', fieldLabel:'Start Date/Time', id:'datetime_start', name:'datetime_start', allowBlank:false, emptyText:'YYYY-MM-DD HH:MM:SS', // format:Date.patterns.ISO8601Long, vtype:'daterange', endDateField:'datetime_end' // id of the end date field },{ xtype:'datefield', fieldLabel:'End Date/Time', id:'datetime_end', name:'datetime_end', allowBlank:false, emptyText:'YYYY-MM-DD HH:MM:SS', //format:Date.patterns.ISO8601Long, vtype:'daterange', startDateField:'datetime_start' // id of the start date field } ], buttons: [{ text: 'Save' ,id:'save' },{ text: 'Cancel' }] }); Ext.getCmp('save').addListener('click',function(){alert(Ext.getCmp('datetime_start').getValue().format('Y-m-d'));},this,this); });</script>
</head><body></body></html>
相关资源：extjs4.2选择两个月的日期控件