在ExtJS2.0中使用datefield编写开始/结束时间组件

crabdave

浏览: 1295118 次
性别:
来自: 北京

最近访客更多访客>>

hwj385327450

ergjss

寒号鸟whpj

linkoog

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ExtJS

EXT JavaScript CSS prototype HTML

在ExtJS2.0中使用datefield编写开始/结束时间组件

效果:

源代码如下:

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

分享到：

利用java反射机制调用类的私有方法 | 在DB2中使用过的一些日期函数

2009-04-08 10:17
浏览 3451
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论