在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>

你可能感兴趣的:(JavaScript,html,css,ext,prototype)