前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >EXTJS7 自定义日期时间选择输入框

EXTJS7 自定义日期时间选择输入框

作者头像
路过君
发布2020-06-19 17:24:03
1.5K0
发布2020-06-19 17:24:03
举报

效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

组件定义

Ext.define('PSR.field.Datetime', {
    extend: 'Ext.field.Container',
    xtype: 'psr-datetimefield',
    items: [{
        xtype: 'datefield', placeholder: '日期',
        dateFormat: 'Y-m-d',
        flex: 1
    }, {
        xtype: 'timefield', placeholder: '时间',
        format: 'H:i:s',
        flex: 1
    }],
    getValue: function () {
        var date = this.getAt(0).getRawValue();
        var time = this.getAt(1).getRawValue();
        return date && time ? (date + ' ' + time) : null;
    },
    setValue: function (value) {
        var datetime = value ? Ext.Date.parse(value, "Y-m-d H:i:s") : null;
        this.getAt(0).setValue(datetime);
        this.getAt(1).setValue(datetime);
    }
});

使用

...
{
	xtype: 'formpanel',
	items:[{
		xtype: 'psr-datetimefield',
		name: 'datetimeprop',
		label: '日期时间'
	}]
}
...
form.setValues({datetimeprop: '2020-04-10 14:27:00'});
var values = form.getValues();  // values: {datetimeprop: '2020-04-10 14:27:00'}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-04-10 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 效果
  • 组件定义
  • 使用
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档