在ExtJS2.0中使用datefield编写开始/结束时间组件
在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>