Extjs 5 可选择日期+时间的组件DateTimeField
我们都知道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的更多相关文章
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
- 第二百一十九节,jQuery EasyUI,DateTimeBox(日期时间输入框)组件
jQuery EasyUI,DateTimeBox(日期时间输入框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 DateTimeBox(日期时间输入框 ...
- element-UI时间控件:日期时间的选择范围的控制方法
例:如一段已知的时间范围,为2018-10-01 - 2019-01-01 :当前为2018-07-09日,则今天以前的时间不能选择,以及2019-01-01以后的时间不能选:实现如下: <el ...
- Bootstrap-datepicker日期时间选择器的简单使用
日期时间选择器 目前,bootstrap有两种日历.datepicker和datetimepicker,后者是前者的拓展. Bootstrap日期和时间组件: 使用示例: 从左到右依次是十年视图.年视 ...
- DateTimePicker 日期时间选择器
在同一个选择器里选择日期和时间 DateTimePicker 由 DatePicker 和 TimePicker 派生,Picker Options 或者其他选项可以参照 DatePicker 和 T ...
- 微信小程序----日期时间选择器(自定义精确到分秒或时段)
声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变.造成原因:这一点就是由于在bindc ...
- DateTimeBox( 日期时间输入框)
本节课重点了解 EasyUI 中 DateTimeBox(日期时间输入框)组件的使用方法,这个组件依赖于 DateBox(日期输入框)组件和 TimeSpinner(时间微调)组件. 一. 加载方式/ ...
- SqlServer数据库表导入SqlLite数据库表保持日期时间类型字段的格式
在写查询功能的过程中遇到一个这样的问题:按日期范围查询,sql语句是:where dt>=用户选择起始日期&&dt<=用户选择结束日期.数据库中的数据如图1,我选择的测试数 ...
- 小程序实现日期时间控件picker
小程序自带的组件中有日期跟时间的picker,但就缺个日期时间picker组件,那没办法,只能自己弄一个,这个组件不是很难,比较难的地方是要根据不同年份(是否闰年)跟月份决定一个月里有多少天. 我直接 ...
随机推荐
- sleep(),wait(),yield()和join()方法的区别
sleep() sleep()方法需要指定等待的时间,它可以让当前正在执行的线程在指定的时间内暂停执行,进入阻塞状态,该方法既可以让其他同优先级或者高优先级 的线程得到执行的机会,也可以让低优先级的线 ...
- CGI-FASTCGI-PHPFPM
随意记录,摘自知乎 原文链接:https://segmentfault.com/q/1010000000256516 首先,CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式 ...
- java23种设计模式之三: 适配器模式
一.适配器模式 就是个通过一个中间件转化,可以将不匹配的两件事整合到一起,把不匹配变的匹配. 二.适配器分类 1.类适配器 2.对象适配器 三. 适配器的3种组成 1.类适配器组成 1.2个接口 ...
- 轻量级 HTTP(s) 代理 TinyProxy
J CentOS 下安装 TinyProxy yum install -y tinyproxy 启动.停止.重启 # 启动service tinyproxy start# 停止service ti ...
- angular指令与指令交互
app.directive('mansory',function(){ return { controller:function($scope){ this.changed = function(){ ...
- [sping]xml配置文件中factory-bean与factory-method(spring使用工厂方法注入bean)
public class CarFactory { //非静态方法 public Car createCar(){ Car car = new Car(); car.setBrand("BM ...
- WPF TextBox 获得焦点后,文本框中的文字全选中
textbox.GotFocus 事件处理 Textbox.SelectAll() 是不行的, 这样处理会发生的情况是: 1) textbox1 当前没有焦点, 内容为 someText. 2) 鼠标 ...
- git代码版本回退
git log 用于查看我们修改提交的快照记录(commit记录),然后会有个commit修改记录的id编号,该命令显示从最近到最远的提交日志,我们可以看到3次提交记录,如下: git checkou ...
- Pytorch入门笔记
import torch.nn as nn import torch.nn.functional as F class Net(nn.Module): def __init__(self): #nn. ...
- 关闭多个screen
由于开了很多个screen同时工作,关闭是一个一个比较麻烦,写个命令在这以便日后想不起来时可以用到. 1.先看看有多少个screen screen -ls |awk '/Socket/'|awk ...