ExtJs日期时间选择控件（精确到秒）

叁歲伎倆 2021-06-24 13:58 518阅读 0赞

一。一些废话  
近日来，有几个项目用到了EXTJS作为Web前端。也看到了一些童鞋苦苦在网上寻觅可以选择时间的控件，由于EXTJS版本差异较大，利用官方3.2的Demo制作了一个可以选择到秒的时间控件，该控件只能够用于ExtJs2.2以上的版本。经过测试ExtJs2.02版本不适用该控件，如果你还在使用2.02这个版本或者更老，请绕道。废话不说了，看代码：  
二。文件明细：  
Spinner.js  
SpinnerField.js  
DateTimeField.js  
三。各文件详解  
1.Spinner.js  
EXTJS个版本略有不同，最后的文件解压后请覆盖源文件。这里不做详细介绍。  
2.SpinnerField.js  
EXTJS个版本略有不同，最后的文件解压后请覆盖源文件。这里不做详细介绍。  
3.DateTimeField.js

[view source][]

[print][] [?][Link 1]

`001.` `// 命名空间归属`

`002.` `Ext.ns(``'Ext.ux.form'``);`

`003.` `// 在该命名空间内，开辟一个名为TimePickerField的区域，我们可以当他是一个时间选择器`

`004.` `Ext.ux.form.TimePickerField = ``function``(config){`

`005.` `// 调用构造方法，也就是说定义了他的所属--this`

`006.` `// this指的是什么呢？这里需要注意，首先这个东东属于这个类（对象），其次这个类（对象）在没有被调用之前或者实例之前是不会被构造的`

`007.` `// 那么这个this实际上是指我们实例化后的datetimefield`

`008.` `Ext.ux.form.TimePickerField.superclass.constructor.call(``this``, config);`

`009.` `}`

`010.` `// 给刚刚定义的TimePickerField加点菜吧。`

`011.` `// 首先它继承与Ext.form.Field，是一个扩展`

`012.` `Ext.extend(Ext.ux.form.TimePickerField, Ext.form.Field, {`

`013.` `defaultAutoCreate: {`

`014.` `tag: ``'div'``// 定义了一个DIV标签`

`015.` `},`

`016.` `cls: ``'x-form-timepickerfield'``,``// 它的样式`

`017.` `hoursSpinner: ``null``,``// 属性：小时选择器`

`018.` `minutesSpinner: ``null``,``// 属性：分钟选择器`

`019.` `secondsSpinner: ``null``,``// 属性：秒选择器`

`020.` `spinnerCfg: {`

`021.` `width: 40``// 选择器的宽度定位40px`

`022.` `},`

`023.`

`024.` `// 约束：选择数值约束，如果小于最小值该如何，如果大于最大值该如何，这里的处理方式我详细说明一下（这个约束是触发的，我们输入的值或者我们点击上下箭头选择的值后都会进入该约束检查。）`

`025.` `spinnerFixBoundries: ``function``(value){`

`026.` `// 这里有可能会造成不解，我解释一下。`

`027.` `// 如果我们选择秒的时候，有一个向上的箭头和向下的箭头，如果我点击向上的箭头则秒数加1，点击向下的箭头则秒数减1。`

`028.` `// 如果我选择了59秒后，点击向上的箭头，由于时间秒数约束，不可能出现60，那我们要怎么办？会如何？当然是，58,59,0,1这样的序列`

`029.` `// 所以最大值定义为59，如果超过59那么秒数归零，就是这个逻辑。`

`030.` `if` `(value < ``this``.field.minValue) {`

`031.` `value = ``this``.field.maxValue;`

`032.` `}`

`033.` `if` `(value > ``this``.field.maxValue) {`

`034.` `value = ``this``.field.minValue;`

`035.` `}`

`036.` `// 这里返回了一个带有精度的值`

`037.` `return` `this``.fixPrecision(value);`

`038.` `},`

`039.` `// 渲染，这个没什么可说的了所有的渲染都差不多是位置和范围之类的`

`040.` `onRender: ``function``(ct, position){`

`041.` `Ext.ux.form.TimePickerField.superclass.onRender.call(``this``, ct, position);`

`042.` `this``.rendered = ``false``;`

`043.` `this``.date = ``new` `Date();`

`044.` `// 定义一个对象，他即将有三个属性，时分秒数值，往下看。`

`045.` `var` `values = {};`

`046.` `// 如果实例时已经被设定了初始值，那么将这些值赋予values这个对象中。`

`047.` `// 再将这些值表示在时分秒选择器中`

`048.` `if` `(``this``.value) {`

`049.` `values = ``this``._valueSplit(``this``.value);`

`050.` `this``.date.setHours(values.h);`

`051.` `this``.date.setMinutes(values.m);`

`052.` `this``.date.setSeconds(values.s);`

`053.` `delete` `this``.value;`

`054.` `}`

`055.` `// 如果实例时没被设定了初始值，简单了，时分秒选择器的初始值就不用改变了，只要values得到这些值备用即可`

`056.` `else` `{`

`057.` `values = {`

`058.` `h: ``this``.date.getHours(),`

`059.` `m: ``this``.date.getMinutes(),`

`060.` `s: ``this``.date.getSeconds()`

`061.` `};`

`062.` `}`

`063.` `// 定义一个外围包裹，就是想把时分秒这三个选择器给包起来成为一组，下面会实例这三个选择器的，往下看。`

`064.` `var` `spinnerWrap = Ext.DomHelper.append(``this``.el, {`

`065.` `tag: ``'div'`

`066.` `});`

`067.` `var` `cfg = Ext.apply({}, ``this``.spinnerCfg, {`

`068.` `renderTo: spinnerWrap,`

`069.` `readOnly: ``this``.readOnly,`

`070.` `disabled: ``this``.disabled,`

`071.` `listeners: {`

`072.` `spin: {`

`073.` `fn: ``this``.onSpinnerChange,`

`074.` `scope: ``this`

`075.` `},`

`076.` `valid: {`

`077.` `fn: ``this``.onSpinnerChange,`

`078.` `scope: ``this`

`079.` `},`

`080.` `afterrender: {`

`081.` `fn: ``function``(spinner){`

`082.` `spinner.wrap.applyStyles(``'float: left'``);`

`083.` `},`

`084.` `single: ``true`

`085.` `}`

`086.` `}`

`087.` `});`

`088.` `// 接下来实例（Ext.ux.form.SpinnerField）了几个选择器，时分秒。`

`089.` `this``.hoursSpinner = ``new` `Ext.ux.form.SpinnerField(Ext.apply({}, cfg, {`

`090.` `minValue: 0,`

`091.` `maxValue: 23,`

`092.` `cls: ``'first'``,`

`093.` `value: values.h`

`094.` `}));`

`095.` `this``.minutesSpinner = ``new` `Ext.ux.form.SpinnerField(Ext.apply({}, cfg, {`

`096.` `minValue: 0,`

`097.` `maxValue: 59,`

`098.` `value: values.m`

`099.` `}));`

`100.` `this``.secondsSpinner = ``new` `Ext.ux.form.SpinnerField(Ext.apply({}, cfg, {`

`101.` `minValue: 0,`

`102.` `maxValue: 59,`

`103.` `value: values.s`

`104.` `}));`

`105.` `Ext.DomHelper.append(spinnerWrap, {`

`106.` `tag: ``'div'``,`

`107.` `cls: ``'x-form-clear-left'`

`108.` `});`

`109.` `// 渲染完毕释放出去`

`110.` `this``.rendered = ``true``;`

`111.` `},`

`112.` `// 如果实例时已经被设定了初始值，那么调用这个方法，将这些值赋予values这个对象中。`

`113.` `_valueSplit: ``function``(v){`

`114.` `var` `split = v.split(``':'``);`

`115.` `return` `{`

`116.` `h: split.length > 0 ? split[0] : 0,`

`117.` `m: split.length > 1 ? split[1] : 0,`

`118.` `s: split.length > 2 ? split[2] : 0`

`119.` `};`

`120.` `},`

`121.` `// 注意了，这里加了一个动作的监听，也可以说是自己弄了一个自定义监听`

`122.` `onSpinnerChange: ``function``(){`

`123.` `if` `(!``this``.rendered) {`

`124.` `return``;`

`125.` `}`

`126.` `// 这里注册了这个监听类别，指明了监听的对象`

`127.` `this``.fireEvent(``'change'``, ``this``, ``this``.getRawValue());`

`128.` `},`

`129.` `// 禁用`

`130.` `disable: ``function``(){`

`131.` `Ext.ux.form.TimePickerField.superclass.disable.call(``this``);`

`132.` `this``.hoursSpinner.disable();`

`133.` `this``.minutesSpinner.disable();`

`134.` `this``.secondsSpinner.disable();`

`135.` `},`

`136.` `// 解用`

`137.` `enable: ``function``(){`

`138.` `Ext.ux.form.TimePickerField.superclass.enable.call(``this``);`

`139.` `this``.hoursSpinner.enable();`

`140.` `this``.minutesSpinner.enable();`

`141.` `this``.secondsSpinner.enable();`

`142.` `},`

`143.` `// 只读`

`144.` `setReadOnly: ``function``(r){`

`145.` `Ext.ux.form.TimePickerField.superclass.setReadOnly.call(``this``, r);`

`146.` `this``.hoursSpinner.setReadOnly(r);`

`147.` `this``.minutesSpinner.setReadOnly(r);`

`148.` `this``.secondsSpinner.setReadOnly(r);`

`149.` `},`

`150.` `// 清除所有的无效验证`

`151.` `clearInvalid: ``function``(){`

`152.` `Ext.ux.form.TimePickerField.superclass.clearInvalid.call(``this``);`

`153.` `this``.hoursSpinner.clearInvalid();`

`154.` `this``.minutesSpinner.clearInvalid();`

`155.` `this``.secondsSpinner.clearInvalid();`

`156.` `},`

`157.` `// 拿到那个值，可以认为是vlaues对象`

`158.` `getRawValue: ``function``(){`

`159.` `if` `(!``this``.hoursSpinner) {`

`160.` `this``.date = ``new` `Date();`

`161.` `return` `{`

`162.` `h: ``this``.date.getHours(),`

`163.` `m: ``this``.date.getMinutes(),`

`164.` `s: ``this``.date.getSeconds()`

`165.` `};`

`166.` `}`

`167.` `else` `{`

`168.` `return` `{`

`169.` `h: ``this``.hoursSpinner.getValue(),`

`170.` `m: ``this``.minutesSpinner.getValue(),`

`171.` `s: ``this``.secondsSpinner.getValue()`

`172.` `};`

`173.` `}`

`174.` `},`

`175.` `// 赋值`

`176.` `setRawValue: ``function``(v){`

`177.` `this``.hoursSpinner.setValue(v.h);`

`178.` `this``.minutesSpinner.setValue(v.m);`

`179.` `this``.secondsSpinner.setValue(v.s);`

`180.` `},`

`181.` `// 有效验证`

`182.` `isValid: ``function``(preventMark){`

`183.` `return` `this``.hoursSpinner.isValid(preventMark) &&`

`184.` `this``.minutesSpinner.isValid(preventMark) &&`

`185.` `this``.secondsSpinner.isValid(preventMark);`

`186.` `},`

`187.` `// 验证`

`188.` `validate: ``function``(){`

`189.` `return` `this``.hoursSpinner.validate() &&`

`190.` `this``.minutesSpinner.validate() &&`

`191.` `this``.secondsSpinner.validate();`

`192.` `},`

`193.` `// 这里可以自己修改想要的格式，这个值将作为返回值到调用该类的元控件中也就是DateTimeField的实例`

`194.` `getValue: ``function``(){`

`195.` `var` `v = ``this``.getRawValue();`

`196.` `return` `String.leftPad(v.h, 2, ``'0'``) + ``':'` `+`

`197.` `String.leftPad(v.m, 2, ``'0'``) +`

`198.` `':'` `+`

`199.` `String.leftPad(v.s, 2, ``'0'``);`

`200.` `},`

`201.` `setValue: ``function``(value){`

`202.` `if` `(!``this``.rendered) {`

`203.` `this``.value = value;`

`204.` `return``;`

`205.` `}`

`206.` `value = ``this``._valueSplit(value);`

`207.` `this``.setRawValue(value);`

`208.` `this``.validate();`

`209.` `}`

`210.` `});`

`211.`

`212.` `// 下面就没什么好说的了，就是将上面自定义的类（对象），成为一个总选择器一部分。`

`213.` `Ext.form.TimePickerField = Ext.ux.form.TimePickerField;`

`214.` `Ext.reg(``'timepickerfield'``, Ext.form.TimePickerField);`

`215.` `Ext.ns(``'Ext.ux.form'``);`

`216.` `Ext.DateTimePicker = Ext.extend(Ext.DatePicker, {`

`217.` `timeFormat: ``'g:i:s A'``,`

`218.` `timeLabel: ``'时间'``,`

`219.` `timeWidth: 100,`

`220.` `initComponent: ``function``(){`

`221.` `Ext.DateTimePicker.superclass.initComponent.call(``this``);`

`222.` `this``.id = Ext.id();`

`223.` `},`

`224.` `onRender: ``function``(container, position){`

`225.` `Ext.DateTimePicker.superclass.onRender.apply(``this``, arguments);`

`226.` `var` `table = Ext.get(Ext.DomQuery.selectNode(``'table tbody'``, container.dom));`

`227.` `var` `tfEl = Ext.DomHelper.insertBefore(table.last(), {`

`228.` `tag: ``'tr'``,`

`229.` `children: [{`

`230.` `tag: ``'td'``,`

`231.` `cls: ``'x-date-bottom'``,`

`232.` `html: ``this``.timeLabel,`

`233.` `style: ``'width:30;'`

`234.` `}, {`

`235.` `tag: ``'td'``,`

`236.` `cls: ``'x-date-bottom ux-timefield'``,`

`237.` `colspan: ``'2'`

`238.` `}]`

`239.` `}, ``true``);`

`240.` `this``.tf.render(table.child(``'td.ux-timefield'``));`

`241.` `var` `p = ``this``.getEl().parent(``'div.x-layer'``);`

`242.` `if` `(p) {`

`243.` `p.setStyle(``"height"``, p.getHeight() + 31);`

`244.` `}`

`245.` `},`

`246.` `setValue: ``function``(value){`

`247.` `var` `old = ``this``.value;`

`248.` `if` `(!``this``.tf) {`

`249.` `this``.tf = ``new` `Ext.ux.form.TimePickerField();`

`250.` `this``.tf.ownerCt = ``this``;`

`251.` `}`

`252.` `this``.value = ``this``.getDateTime(value);`

`253.` `},`

`254.` `getDateTime: ``function``(value){`

`255.` `if` `(``this``.tf) {`

`256.` `var` `dt = ``new` `Date();`

`257.` `var` `timeval = ``this``.tf.getValue();`

`258.` `value = Date.parseDate(value.format(``this``.dateFormat) + ``' '` `+ ``this``.tf.getValue(),``this``.format);`

`259.` `}`

`260.` `return` `value;`

`261.` `},`

`262.` `selectToday: ``function``(){`

`263.` `if` `(``this``.todayBtn && !``this``.todayBtn.disabled) {`

`264.` `this``.value = ``this``.getDateTime(``new` `Date());`

`265.` `this``.fireEvent(``"select"``, ``this``, ``this``.value);`

`266.` `}`

`267.` `}`

`268.` `});`

`269.` `Ext.reg(``'datetimepickerfield'``, Ext.DateTimePicker);`

`270.` `if` `(parseInt(Ext.version.substr(0, 1), 10) > 2) {`

`271.` `Ext.menu.DateTimeItem = Ext.DateTimePicker;`

`272.` `Ext.override(Ext.menu.DateMenu, {`

`273.` `initComponent: ``function``(){`

`274.` `this``.on(``'beforeshow'``, ``this``.onBeforeShow, ``this``);`

`275.` `if` `(``this``.strict = (Ext.isIE7 && Ext.isStrict)) {`

`276.` `this``.on(``'show'``, ``this``.onShow, ``this``, {`

`277.` `single: ``true``,`

`278.` `delay: 20`

`279.` `});`

`280.` `}`

`281.` `Ext.apply(``this``, {`

`282.` `plain: ``true``,`

`283.` `showSeparator: ``false``,`

`284.` `items: ``this``.picker = ``new` `Ext.DatePicker(Ext.apply({`

`285.` `internalRender: ``this``.strict || !Ext.isIE,`

`286.` `ctCls: ``'x-menu-date-item'`

`287.` `}, ``this``.initialConfig))`

`288.` `});`

`289.` `Ext.menu.DateMenu.superclass.initComponent.call(``this``);`

`290.` `this``.relayEvents(``this``.picker, [``"select"``]);`

`291.` `this``.on(``'select'``, ``this``.menuHide, ``this``);`

`292.` `if` `(``this``.handler) {`

`293.` `this``.on(``'select'``, ``this``.handler, ``this``.scope || ``this``);`

`294.` `}`

`295.` `}`

`296.` `});`

`297.` `}`

`298.` `else` `{`

`299.` `Ext.menu.DateTimeItem = ``function``(config){`

`300.` `Ext.menu.DateTimeItem.superclass.constructor.call(``this``, ``new``Ext.DateTimePicker(config), config);`

`301.` `this``.picker = ``this``.component;`

`302.` `this``.addEvents(``'select'``);`

`303.`

`304.` `this``.picker.on(``"render"``, ``function``(picker){`

`305.` `picker.getEl().swallowEvent(``"click"``);`

`306.` `picker.container.addClass(``"x-menu-date-item"``);`

`307.` `});`

`308.`

`309.` `this``.picker.on(``"select"``, ``this``.onSelect, ``this``);`

`310.` `};`

`311.`

`312.` `Ext.extend(Ext.menu.DateTimeItem, Ext.menu.DateMenu, {`

`313.` `onSelect: ``function``(picker, date){`

`314.` `this``.fireEvent(``"select"``, ``this``, date, picker);`

`315.` `Ext.menu.DateTimeItem.superclass.handleClick.call(``this``);`

`316.` `}`

`317.` `});`

`318.` `}`

`319.`

`320.` `Ext.menu.DateTimeMenu = ``function``(config){`

`321.` `Ext.menu.DateTimeMenu.superclass.constructor.call(``this``, config);`

`322.` `this``.plain = ``true``;`

`323.` `var` `di = ``new` `Ext.menu.DateTimeItem(config);`

`324.` `this``.add(di);`

`325.` `this``.picker = di;`

`326.` `this``.relayEvents(di, [``"select"``]);`

`327.`

`328.` `this``.on(``'beforeshow'``, ``function``(){`

`329.` `if` `(``this``.picker) {`

`330.` `this``.picker.hideMonthPicker(``true``);`

`331.` `}`

`332.` `}, ``this``);`

`333.` `};`

`334.` `Ext.extend(Ext.menu.DateTimeMenu, Ext.menu.Menu, {`

`335.` `cls: ``'x-date-menu'``,`

`336.` `beforeDestroy: ``function``(){`

`337.` `this``.picker.destroy();`

`338.` `},`

`339.` `hide: ``function``(deep){`

`340.` `if` `(``this``.picker.tf.innerList) {`

`341.` `if` `((Ext.EventObject.within(``this``.picker.tf.innerList)) || (Ext.get(Ext.EventObject.getTarget()) == ``this``.picker.tf.innerList))`

`342.` `return` `false``;`

`343.` `}`

`344.` `if` `(``this``.el && ``this``.isVisible()) {`

`345.` `this``.fireEvent(``"beforehide"``, ``this``);`

`346.` `if` `(``this``.activeItem) {`

`347.` `this``.activeItem.deactivate();`

`348.` `this``.activeItem = ``null``;`

`349.` `}`

`350.` `this``.el.hide();`

`351.` `this``.hidden = ``true``;`

`352.` `this``.fireEvent(``"hide"``, ``this``);`

`353.` `}`

`354.` `if` `(deep === ``true` `&& ``this``.parentMenu) {`

`355.` `this``.parentMenu.hide(``true``);`

`356.` `}`

`357.` `}`

`358.` `});`

`359.`

`360.` `Ext.ux.form.DateTimeField = Ext.extend(Ext.form.DateField, {`

`361.` `dateFormat: ``'Y-m-d'``,`

`362.` `timeFormat: ``'H:i:s'``,`

`363.` `defaultAutoCreate: {`

`364.` `tag: ``"input"``,`

`365.` `type: ``"text"``,`

`366.` `size: ``"20"``,`

`367.` `autocomplete: ``"off"`

`368.` `},`

`369.` `initComponent: ``function``(){`

`370.` `Ext.ux.form.DateTimeField.superclass.initComponent.call(``this``);`

`371.` `this``.format = ``this``.dateFormat + ``' '` `+ ``this``.timeFormat;`

`372.` `this``.afterMethod(``'afterRender'``, ``function``(){`

`373.` `this``.getEl().applyStyles(``'top:0'``);`

`374.` `});`

`375.` `},`

`376.` `getValue: ``function``(){`

`377.` `return` `this``.parseDate(Ext.form.DateField.superclass.getValue.call(``this``)) || ``''``;`

`378.` `},`

`379.` `onTriggerClick: ``function``(){`

`380.` `if` `(``this``.disabled) {`

`381.` `return``;`

`382.` `}`

`383.` `if` `(``this``.menu == ``null``) {`

`384.` `this``.menu = ``new` `Ext.menu.DateTimeMenu();`

`385.` `}`

`386.` `Ext.apply(``this``.menu.picker, {`

`387.` `minDate: ``this``.minValue,`

`388.` `maxDate: ``this``.maxValue,`

`389.` `disabledDatesRE: ``this``.ddMatch,`

`390.` `disabledDatesText: ``this``.disabledDatesText,`

`391.` `disabledDays: ``this``.disabledDays,`

`392.` `disabledDaysText: ``this``.disabledDaysText,`

`393.` `format: ``this``.format,`

`394.` `timeFormat: ``this``.timeFormat,`

`395.` `dateFormat: ``this``.dateFormat,`

`396.` `showToday: ``this``.showToday,`

`397.` `minText: String.format(``this``.minText, ``this``.formatDate(``this``.minValue)),`

`398.` `maxText: String.format(``this``.maxText, ``this``.formatDate(``this``.maxValue))`

`399.` `});`

`400.` `if` `(``this``.menuEvents) {`

`401.` `this``.menuEvents(``'on'``);`

`402.` `}`

`403.` `else` `{`

`404.` `this``.menu.on(Ext.apply({}, ``this``.menuListeners, {`

`405.` `scope: ``this`

`406.` `}));`

`407.` `}`

`408.` `this``.menu.picker.setValue(``this``.getValue() || ``new` `Date());`

`409.` `this``.menu.show(``this``.el, ``"tl-bl?"``);`

`410.` `}`

`411.` `});`

`412.` `Ext.reg(``'datetimefield'``, Ext.ux.form.DateTimeField);```

[view source]: http://extjs.org.cn/node/616#viewSource
[print]: http://extjs.org.cn/node/616#printSource
[Link 1]: http://extjs.org.cn/node/616#about

ExtJs日期时间选择控件（精确到秒）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 css之input时间控件精确到时分秒

相关 Qt dateEdit 选择日期控件

相关 JS实现显示当前时间，精确到秒

相关两个日期相差多少时间，精确到秒

相关【数据库】——mysql比较时间大小，精确到秒

相关 HTML5新控件 - 日期和时间选择输入

相关 MySQL：日期&时间字段如何精确到毫秒

相关日期控件控制日期选择

相关 Android —— 日期时间控件

相关 ExtJs日期时间选择控件（精确到秒）