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组件,那没办法,只能自己弄一个,这个组件不是很难,比较难的地方是要根据不同年份(是否闰年)跟月份决定一个月里有多少天. 我直接 ...
随机推荐
- 再也不学AJAX了!(三)跨域获取资源 ① - 同源策略
我们之前提到过,AJAX技术使开发者能够专注于互联网中数据的传输,而不再拘泥于数据传输的载体.通过AJAX技术,我们获取数据的方式变得更加灵活,可控和优雅. 但是AJAX技术并不是一把万能钥匙,互联网 ...
- 《面向对象的JavaScript》读书笔记
发现了2004年出版的一本好书,用两天快速刷了一遍,草草整理了一下笔记,在此备忘. 类:对象的设计蓝图或制作配方. 对象 === 实例 :老鹰是鸟类的一个实例 基于相同的类创建出许多不同的对象,类更多 ...
- 如何调试ubifs文件系统
注意内核版本为4.9 在drivers/mtd/ubi/debug.h中加入DEBUG的定义,如下 #ifndef __UBI_DEBUG_H__#define __UBI_DEBUG_H__#def ...
- maven 环境变量配置问题 cmd窗口报mvn -v不是内部或者外部的命令
早上整了一早上maven环境问题,配置的环境变量 系统变量 MAVEN_HOME C:\JavaTools\apache-maven-3.3.9 本机maven路径,Path变量中编辑,引用的是; ...
- Covariance and Contravariance (C#)
Covariance and Contravariance (C#) https://docs.microsoft.com/en-us/dotnet/articles/csharp/programmi ...
- jmeter随笔
1. ${__time(yyyy-MM-dd HH:mm:ss,)} 2. import use.GetRsaContent; String pfxPath = "pfx";Str ...
- Grunt Part 1
Grunt Part 1 Objectives and Outcomes In this exercise, you will learn to use Grunt, the task runner. ...
- android ui界面设计参数讲解
百度文库: http://wenku.baidu.com/link?url=s66Hw6byBEzmjL77doYL1YQN4Y_39F7MovaHKs5mVGrzTDOQCAmiM-1N_6Cdm- ...
- Vue 备
<div id="app"> <span :class='{red:addClass}'>jam</span> </div> < ...
- sass快速入门 - 笔记
一.使用变量 1.使用$符号来标识变量. 例: $nav-color:#F90; .nav{ $width:100px; width:$width; color:$nav-color; }