我们都知道ExtJs有日期组件DateField,但直到ExtJs 5.0版本该日期组件也只能选择日期,不能选择时间(具体到时、分、秒),而实际工作中又常常会有需要日期和时间同时选择的需求,我们只能自己扩展了,网上也有一些扩展好的现成组件,要么是早期版本的,ExtJs5.0版本的无法用,要么就是测试不充分,代码拿过来也用不了。于是笔者就只能自己动手了。先来看一下完成后的效果图:

先说一下思路:

我们需要如上图这样的组件,首先我们得有一个能够设置时、分、秒的组件,我们取名TimePickerField;然后将这个TimePickerField实例化到DatePicker上,当然我们不能直接在DatePicker源码上去改,所以我们就需要继承DatePicker扩展出另一个组件,取名DateTimePicker;而最终要实现的DateTimeField就要使用到这个DateTimePicker,同理,DateTimeField需要继承Ext.form.field.Date来做扩展。

从上面的思路中我们可以知道要完成这样一个扩展组件,至少需要三个文件:

1、TimePickerField.js

2、DateTimePicker.js

3、DateTimeField.js

以上是大致的扩展思路及扩展组件的继承关系,需要获取完整源码请点击这里

Extjs 5 可选择日期+时间的组件DateTimeField的更多相关文章

  1. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  2. 第二百一十九节,jQuery EasyUI,DateTimeBox(日期时间输入框)组件

    jQuery EasyUI,DateTimeBox(日期时间输入框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 DateTimeBox(日期时间输入框 ...

  3. element-UI时间控件:日期时间的选择范围的控制方法

    例:如一段已知的时间范围,为2018-10-01 - 2019-01-01 :当前为2018-07-09日,则今天以前的时间不能选择,以及2019-01-01以后的时间不能选:实现如下: <el ...

  4. Bootstrap-datepicker日期时间选择器的简单使用

    日期时间选择器 目前,bootstrap有两种日历.datepicker和datetimepicker,后者是前者的拓展. Bootstrap日期和时间组件: 使用示例: 从左到右依次是十年视图.年视 ...

  5. DateTimePicker 日期时间选择器

    在同一个选择器里选择日期和时间 DateTimePicker 由 DatePicker 和 TimePicker 派生,Picker Options 或者其他选项可以参照 DatePicker 和 T ...

  6. 微信小程序----日期时间选择器(自定义精确到分秒或时段)

    声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变.造成原因:这一点就是由于在bindc ...

  7. DateTimeBox( 日期时间输入框)

    本节课重点了解 EasyUI 中 DateTimeBox(日期时间输入框)组件的使用方法,这个组件依赖于 DateBox(日期输入框)组件和 TimeSpinner(时间微调)组件. 一. 加载方式/ ...

  8. SqlServer数据库表导入SqlLite数据库表保持日期时间类型字段的格式

    在写查询功能的过程中遇到一个这样的问题:按日期范围查询,sql语句是:where dt>=用户选择起始日期&&dt<=用户选择结束日期.数据库中的数据如图1,我选择的测试数 ...

  9. 小程序实现日期时间控件picker

    小程序自带的组件中有日期跟时间的picker,但就缺个日期时间picker组件,那没办法,只能自己弄一个,这个组件不是很难,比较难的地方是要根据不同年份(是否闰年)跟月份决定一个月里有多少天. 我直接 ...

随机推荐

  1. js 的胖箭头问题

    我们在声明函数的时候通常是 var foo function(a){ console.log(a) }; 用ES6 我们写成了这样 var foo = a =>{ console.log(a); ...

  2. 使用js合并table中的单元格

    用primefaces做的报表,领导要求合并相同内容的单元格,但是primefaces没有找到可以合并单元格的组件,想来想去,只有页面加载后用js合并了. http://blog.csdn.net/d ...

  3. Memcached stats sizes 命令

    Memcached stats sizes 命令用于显示所有item的大小和个数. 该信息返回两列,第一列是 item 的大小,第二列是 item 的个数. 语法: stats sizes 命令的基本 ...

  4. Session存储

    session其实分为服务器端Session和客户端Session. 当用户首次与Web服务器建立连接的时候,服务器会给用户分发一个sessionid作为标识.用户每次提交页面,浏览器都会把这个ses ...

  5. http协议报头详解

    目录: 1. http协议简介 2. http报头举例 3. http报头详解 4. 几个字段的说明 5. 总结 6. 参考文章 1. http协议简介 HTTP是Hyper Text Transfe ...

  6. form组件的验证

    django 的form组件可以实现自定义的验证规则. 创建基于Form的类,在类中创建字段,定义规则. 创建该类的对象,并将待验证的数据传入,使用is_valid()函数. is_valid()函数 ...

  7. activity之间通过全局变量传递数据

    activity之间通过全局变量传递数据 一.简介 Application域中的onCreate方法是Android程序的入口,Android程序运行的时候就自动加载Application的对象,感觉 ...

  8. 【Demo】CSS3 过渡

    CSS3 过渡transition 应用于宽度属性的过渡效果,时长为 2 秒: div { transition: width 2s; -webkit-transition: width 2s; /* ...

  9. hdu3544找规律

    如果x>1&&y>1,可以简化到其中一个为1的情况,这是等价的,当其中一个为1(假设为x),另一个一定能执行y-1次, 这是一个贪心问题,把所有的执行次数加起来比较就能得到 ...

  10. Java编码方式再学

    一直以来对编码方式对了解不是很深入.建议读下这几篇博文 学点编码知识又不会死:Unicode的流言终结者和编码大揭秘 编码研究笔记 这几篇博文上回答了内心存在的一些问题,这些问题可能也是大家经常遇到的 ...