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

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

作者头像
路过君
发布2020-06-19 17:24:03
1.6K0
发布2020-06-19 17:24:03
举报
文章被收录于专栏:路过君BLOG from CSDN

效果

组件定义

代码语言:javascript
复制
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);
    }
});

使用

代码语言:javascript
复制
...
{
	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 归档