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

最新推荐文章于 2016-05-13 19:59:50 发布

crabdave

最新推荐文章于 2016-05-13 19:59:50 发布

阅读量170

点赞数

分类专栏： ExtJS 文章标签： EXT JavaScript CSS prototype HTML ViewUI

本文链接：https://blog.csdn.net/crabdave/article/details/83369934

版权

ExtJS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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

crabdave

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在ExtJS2.0中使用datefield编写开始/结束时间组件

在ExtJS2.0中使用datefield编写开始/结束时间组件效果: 源代码如下:&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=GBK" /&gt;&lt;title&gt;&lt;/title&gt;&lt;link rel="st
复制链接

扫一扫

专栏目录