sencha touch datepicker/datepickerfield(时间选择控件)扩展

参考资料： https://market.sencha.com/extensions/datetimepicker

适用于2.4.1版本

uxPickerTime

使用方法参考：datepicker控件

  1 Ext.define('ux.picker.Time', {

  2     extend: 'Ext.picker.Picker',

  3     xtype: 'uxPickerTime',

  4     alternateClassName: 'uxPickerTime',

  5     requires: ['Ext.DateExtras', 'Ext.util.InputBlocker'],

  6 

  7     /**

  8     * @event change

  9     * Fired when the value of this picker has changed and the done button is pressed.

 10     * @param {Ext.picker.Date} this This Picker

 11     * @param {Date} value The date value

 12     */

 13 

 14     config: {

 15         /**

 16         * @cfg {Number} yearFrom

 17         * 开始年份,如果他比yearTo大，则选择顺序颠倒

 18         * @accessor

 19         */

 20         yearFrom: 2014,

 21 

 22         /**

 23         * @cfg {Number} [yearTo=new Date().getFullYear()]

 24         * 结束年份

 25         * @accessor

 26         */

 27         yearTo: 2000,

 28 

 29         /**

 30         * @cfg {String} monthText

 31         * 月显示值

 32         * @accessor

 33         */

 34         monthText: '月',

 35 

 36         /**

 37         * @cfg {String} dayText

 38         * 日显示值

 39         * @accessor

 40         */

 41         dayText: '日',

 42 

 43         /**

 44         * @cfg {String} yearText

 45         * 年显示值

 46         * @accessor

 47         */

 48         yearText: '年',

 49 

 50         /**

 51         * @cfg {String} hourText

 52         * 小时显示值

 53         */

 54         hourText: '时',

 55 

 56         /**

 57         * @cfg {String} minuteText

 58         * 分显示值

 59         */

 60         minuteText: '分',

 61 

 62         /**

 63         * @cfg {String} ampmText

 64         * 上午/下午显示值

 65         */

 66         ampmText: '上午/下午',

 67         /**

 68         * @cfg {Array} slotOrder

 69         * 默认的选项列表

 70         * @accessor

 71         */

 72         slotOrder: ['year', 'month', 'day', 'hour', 'minute'], //

 73 

 74         /**

 75         * @cfg {Int} 

 76         *分钟间隔

 77         * @accessor

 78         */

 79         minuteInterval: 1,

 80 

 81         /**

 82         * @cfg {Boolean} ampm

 83         *是否使用12小时制

 84         * @accessor

 85         */

 86         ampm: false,

 87         useTitles: true

 88     },

 89 

 90     platformConfig: [{

 91         theme: ['Windows'],

 92         doneButton: {

 93             iconCls: 'check2',

 94             ui: 'round',

 95             text: ''

 96         }

 97     }],

 98 

 99     initialize: function () {

100         this.callParent();

101 

102         this.on({

103             scope: this,

104             delegate: '> slot',

105             slotpick: this.onSlotPick

106         });

107 

108         this.on({

109             scope: this,

110             show: this.onSlotPick

111         });

112     },

113 

114     setValue: function (value, animated) {

115         if (Ext.isDate(value)) {

116             var ampm = 'AM',

117             currentHours = hour = value.getHours();

118             if (this.getAmpm()) {

119                 if (currentHours > 12) {

120                     ampm = "PM";

121                     hour -= 12;

122                 } else if (currentHours == 12) {

123                     ampm = "PM";

124                 } else if (currentHours == 0) {

125                     hour = 12;

126                 }

127             }

128             value = {

129                 day: value.getDate(),

130                 month: value.getMonth() + 1,

131                 year: value.getFullYear(),

132                 hour: hour,

133                 minute: value.getMinutes(),

134                 ampm: ampm

135             };

136         }

137 

138         this.callParent([value, animated]);

139         this.onSlotPick();

140     },

141     //获取值

142     getValue: function (useDom) {

143         var values = {},

144             items = this.getItems().items,

145             ln = items.length,

146             daysInMonth, day, month, year, hour, minute, item, i;

147 

148         for (i = 0; i < ln; i++) {

149             item = items[i];

150             if (item instanceof Ext.picker.Slot) {

151                 values[item.getName()] = item.getValue(useDom);

152             }

153         }

154 

155         //if all the slots return null, we should not return a date

156         if (values.year === null && values.month === null && values.day === null && values.hour === null && values.minute === null) {

157             return null;

158         }

159 

160         year = Ext.isNumber(values.year) ? values.year : 1;

161         month = Ext.isNumber(values.month) ? values.month : 1;

162         day = Ext.isNumber(values.day) ? values.day : 1;

163         hour = Ext.isNumber(values.hour) ? values.hour : 1;

164         minute = Ext.isNumber(values.minute) ? values.minute : 1;

165 

166         if (month && year && month && day) {

167             daysInMonth = this.getDaysInMonth(month, year);

168         }

169         day = (daysInMonth) ? Math.min(day, daysInMonth) : day;

170         if (values.ampm && values.ampm == "PM" && hour < 12) {

171             hour = hour + 12;

172         }

173         if (values.ampm && values.ampm == "AM" && hour == 12) {

174             hour = 0;

175         }

176         return new Date(year, month - 1, day, hour, minute);

177     },

178 

179     /**

180     * Updates the yearFrom configuration

181     */

182     updateYearFrom: function () {

183         if (this.initialized) {

184             this.createSlots();

185         }

186     },

187 

188     /**

189     * Updates the yearTo configuration

190     */

191     updateYearTo: function () {

192         if (this.initialized) {

193             this.createSlots();

194         }

195     },

196 

197     /**

198     * Updates the monthText configuration

199     */

200     updateMonthText: function (newMonthText, oldMonthText) {

201         var innerItems = this.getInnerItems,

202             ln = innerItems.length,

203             item, i;

204 

205         //loop through each of the current items and set the title on the correct slice

206         if (this.initialized) {

207             for (i = 0; i < ln; i++) {

208                 item = innerItems[i];

209 

210                 if ((typeof item.title == "string" && item.title == oldMonthText) || (item.title.html == oldMonthText)) {

211                     item.setTitle(newMonthText);

212                 }

213             }

214         }

215     },

216 

217     /**

218     * Updates the {@link #dayText} configuration.

219     */

220     updateDayText: function (newDayText, oldDayText) {

221         var innerItems = this.getInnerItems,

222             ln = innerItems.length,

223             item, i;

224 

225         //loop through each of the current items and set the title on the correct slice

226         if (this.initialized) {

227             for (i = 0; i < ln; i++) {

228                 item = innerItems[i];

229 

230                 if ((typeof item.title == "string" && item.title == oldDayText) || (item.title.html == oldDayText)) {

231                     item.setTitle(newDayText);

232                 }

233             }

234         }

235     },

236 

237     /**

238     * Updates the yearText configuration

239     */

240     updateYearText: function (yearText) {

241         var innerItems = this.getInnerItems,

242             ln = innerItems.length,

243             item, i;

244 

245         //loop through each of the current items and set the title on the correct slice

246         if (this.initialized) {

247             for (i = 0; i < ln; i++) {

248                 item = innerItems[i];

249 

250                 if (item.title == this.yearText) {

251                     item.setTitle(yearText);

252                 }

253             }

254         }

255     },

256 

257     // @private

258     constructor: function () {

259         this.callParent(arguments);

260         this.createSlots();

261     },

262 

263     /**

264     * Generates all slots for all years specified by this component, and then sets them on the component

265     * @private

266     */

267     createSlots: function () {

268         var me = this,

269             slotOrder = me.getSlotOrder(),

270             yearsFrom = me.getYearFrom(),

271             yearsTo = me.getYearTo(),

272             years = [],

273             days = [],

274             months = [],

275                hours = [],

276             minutes = [],

277             ampm = [],

278             reverse = yearsFrom > yearsTo,

279             ln, i, daysInMonth;

280 

281         if (!this.getAmpm()) {

282             var index = slotOrder.indexOf('ampm')

283             if (index >= 0) {

284                 slotOrder.splice(index);

285             }

286         }

287         //填充年列表

288         while (yearsFrom) {

289             years.push({

290                 text: yearsFrom,

291                 value: yearsFrom

292             });

293 

294             if (yearsFrom === yearsTo) {

295                 break;

296             }

297 

298             if (reverse) {

299                 yearsFrom--;

300             } else {

301                 yearsFrom++;

302             }

303         }

304         //填充天列表

305         daysInMonth = me.getDaysInMonth(1, new Date().getFullYear());

306 

307         for (i = 0; i < daysInMonth; i++) {

308             days.push({

309                 text: i + 1,

310                 value: i + 1

311             });

312         }

313         //填充月列表

314         for (i = 0, ln = Ext.Date.monthNames.length; i < ln; i++) {

315             months.push({

316                 text: Ext.Date.monthNames[i],

317                 value: i + 1

318             });

319         }

320         //填充小时列表

321         var hourLimit = (this.getAmpm()) ? 12 : 23

322         var hourStart = (this.getAmpm()) ? 1 : 0

323         for (i = hourStart; i <= hourLimit; i++) {

324             hours.push({

325                 text: this.pad2(i),

326                 value: i

327             });

328         }

329         //填充分钟列表

330         for (i = 0; i < 60; i += this.getMinuteInterval()) {

331             minutes.push({

332                 text: this.pad2(i),

333                 value: i

334             });

335         }

336         //填充上午/下午

337         ampm.push({

338             text: '上午',

339             value: 'AM'

340         }, {

341             text: '下午',

342             value: 'PM'

343         });

344 

345         var slots = [];

346 

347         slotOrder.forEach(function (item) {

348             slots.push(me.createSlot(item, days, months, years, hours, minutes, ampm));

349         });

350 

351         me.setSlots(slots);

352     },

353 

354     /**

355     * Returns a slot config for a specified date.

356     * @private

357     */

358     createSlot: function (name, days, months, years, hours, minutes, ampm) {

359         switch (name) {

360             case 'year':

361                 return {

362                     name: 'year',

363                     align: 'center',

364                     data: years,

365                     title: this.getYearText(),

366                     flex: 3

367                 };

368             case 'month':

369                 return {

370                     name: name,

371                     align: 'center',

372                     data: months,

373                     title: this.getMonthText(),

374                     flex: 3

375                 };

376             case 'day':

377                 return {

378                     name: 'day',

379                     align: 'center',

380                     data: days,

381                     width: '1px',

382                     title: this.getDayText(),

383                     flex: 2

384                 };

385             case 'hour':

386                 return {

387                     name: 'hour',

388                     align: 'center',

389                     data: hours,

390                     title: this.getHourText(),

391                     flex: 2

392                 };

393             case 'minute':

394                 return {

395                     name: 'minute',

396                     align: 'center',

397                     data: minutes,

398                     title: this.getMinuteText(),

399                     flex: 2

400                 };

401             case 'ampm':

402                 return {

403                     name: 'ampm',

404                     align: 'center',

405                     data: ampm,

406                     title: this.getAmpmText(),

407                     flex: 2

408                 };

409         }

410     },

411 

412     onSlotPick: function () {

413         var value = this.getValue(true),

414             slot = this.getDaySlot(),

415             year = value.getFullYear(),

416             month = value.getMonth(),

417             days = [],

418             daysInMonth, i;

419         if (!value || !Ext.isDate(value) || !slot) {

420             return;

421         }

422 

423         this.callParent(arguments);

424 

425         //get the new days of the month for this new date

426         daysInMonth = this.getDaysInMonth(month + 1, year);

427         for (i = 0; i < daysInMonth; i++) {

428             days.push({

429                 text: i + 1,

430                 value: i + 1

431             });

432         }

433         // We don't need to update the slot days unless it has changed

434         if (slot.getStore().getCount() == days.length) {

435             return;

436         }

437 

438         slot.getStore().setData(days);

439 

440         // Now we have the correct amount of days for the day slot, lets update it

441         var store = slot.getStore(),

442             viewItems = slot.getViewItems(),

443             valueField = slot.getValueField(),

444             index, item;

445 

446         index = store.find(valueField, value.getDate());

447         if (index == -1) {

448             return;

449         }

450 

451         item = Ext.get(viewItems[index]);

452 

453         slot.selectedIndex = index;

454         slot.scrollToItem(item);

455         slot.setValue(slot.getValue(true));

456 

457 

458     },

459 

460     getDaySlot: function () {

461         var innerItems = this.getInnerItems(),

462             ln = innerItems.length,

463             i, slot;

464 

465         if (this.daySlot) {

466             return this.daySlot;

467         }

468 

469         for (i = 0; i < ln; i++) {

470             slot = innerItems[i];

471             if (slot.isSlot && slot.getName() == "day") {

472                 this.daySlot = slot;

473                 return slot;

474             }

475         }

476 

477         return null;

478     },

479 

480     // @private

481     getDaysInMonth: function (month, year) {

482         var daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

483         return month == 2 && this.isLeapYear(year) ? 29 : daysInMonth[month - 1];

484     },

485 

486     // @private

487     isLeapYear: function (year) {

488         return !!((year & 3) === 0 && (year % 100 || (year % 400 === 0 && year)));

489     },

490 

491     onDoneButtonTap: function () {

492         var oldValue = this._value,

493             newValue = this.getValue(true),

494             testValue = newValue;

495 

496         if (Ext.isDate(newValue)) {

497             testValue = newValue.toDateString();

498         }

499         if (Ext.isDate(oldValue)) {

500             oldValue = oldValue.toDateString();

501         }

502         if (testValue != oldValue) {

503             this.fireEvent('change', this, newValue);

504         }

505         this.hide();

506         Ext.util.InputBlocker.unblockInputs();

507     },

508     pad2: function (number) {

509         return (number < 10 ? '0' : '') + number;

510     }

511 });

uxFieldTime

使用方法参考：datepickerfield控件

  1 Ext.define('ux.field.Time', {

  2     extend: 'Ext.field.Text',

  3     alternateClassName: 'uxFieldTime',

  4     xtype: 'uxFieldTime',

  5     requires: [

  6         'ux.picker.Time',

  7         'Ext.DateExtras'

  8     ],

  9 

 10     /**

 11     * @event change

 12     * Fires when a date is selected

 13     * @param {Ext.field.DatePicker} this

 14     * @param {Date} newDate The new date

 15     * @param {Date} oldDate The old date

 16     */

 17 

 18     config: {

 19         ui: 'select',

 20 

 21         /**

 22         * @cfg {Object/ux.picker.Time} picker

 23         * An object that is used when creating the internal {@link ux.picker.Time} component or a direct instance of {@link ux.picker.Time}.

 24         * @accessor

 25         */

 26         picker: true,

 27 

 28         /**

 29         * @cfg {Boolean}

 30         * @hide

 31         * @accessor

 32         */

 33         clearIcon: false,

 34 

 35         /**

 36         * @cfg {Object/Date} value

 37         * Default value for the field and the internal {@link ux.picker.Time} component. Accepts an object of 'year',

 38         * 'month' and 'day' values, all of which should be numbers, or a {@link Date}.

 39         *

 40         * Example: {year: 1989, day: 1, month: 5} = 1st May 1989 or new Date()

 41         * @accessor

 42         */

 43 

 44 

 45         /**

 46         * @cfg {Boolean} destroyPickerOnHide

 47         * 完成选择时隐藏或者销毁该控件，默认销毁

 48         * @accessor

 49         */

 50         destroyPickerOnHide: false,

 51 

 52         /**

 53         * @cfg {String} dateFormat 默认时间格式

 54         * 接受任何有效的时间格式. 请参考 {@link Ext.Date}.

 55         */

 56         dateFormat: 'Y-m-d H:i',

 57 

 58         /**

 59         * @cfg {Object}

 60         * @hide

 61         */

 62         component: {

 63             useMask: true

 64         }

 65     },

 66 

 67     initialize: function () {

 68         var me = this,

 69             component = me.getComponent();

 70 

 71         me.callParent();

 72 

 73         component.on({

 74             scope: me,

 75             masktap: 'onMaskTap'

 76         });

 77 

 78 

 79         component.doMaskTap = Ext.emptyFn;

 80 

 81         if (Ext.browser.is.AndroidStock2) {

 82             component.input.dom.disabled = true;

 83         }

 84     },

 85 

 86     syncEmptyCls: Ext.emptyFn,

 87 

 88     applyValue: function (value) {

 89         if (!Ext.isDate(value) && !Ext.isObject(value)) {

 90             return null;

 91         }

 92 

 93         if (Ext.isObject(value)) {

 94             return new Date(value.year, value.month - 1, value.day, value.hour, value.minute);

 95         }

 96 

 97         return value;

 98     },

 99 

100     updateValue: function (newValue, oldValue) {

101         var me = this,

102             picker = me._picker;

103 

104         if (picker && picker.isPicker) {

105             picker.setValue(newValue);

106         }

107 

108         // Ext.Date.format expects a Date

109         if (newValue !== null) {

110             me.getComponent().setValue(Ext.Date.format(newValue, me.getDateFormat() || Ext.util.Format.defaultDateFormat));

111         } else {

112             me.getComponent().setValue('');

113         }

114 

115         if (newValue !== oldValue) {

116             me.fireEvent('change', me, newValue, oldValue);

117         }

118     },

119 

120     /**

121     * Updates the date format in the field.

122     * @private

123     */

124     updateDateFormat: function (newDateFormat, oldDateFormat) {

125         var value = this.getValue();

126         if (newDateFormat != oldDateFormat && Ext.isDate(value)) {

127             this.getComponent().setValue(Ext.Date.format(value, newDateFormat || Ext.util.Format.defaultDateFormat));

128         }

129     },

130 

131     /**

132     * Returns the {@link Date} value of this field.

133     * If you wanted a formated date

134     * @return {Date} The date selected

135     */

136     getValue: function () {

137         if (this._picker && this._picker instanceof ux.picker.Time) {

138             return this._picker.getValue();

139         }

140         return this._value;

141     },

142 

143     /**

144     * Returns the value of the field formatted using the specified format. If it is not specified, it will default to

145     * {@link #dateFormat} and then {@link Ext.util.Format#defaultDateFormat}.

146     * @param {String} format The format to be returned.

147     * @return {String} The formatted date.

148     */

149     getFormattedValue: function (format) {

150         var value = this.getValue();

151         return (Ext.isDate(value)) ? Ext.Date.format(value, format || this.getDateFormat() || Ext.util.Format.defaultDateFormat) : value;

152     },

153 

154     applyPicker: function (picker, pickerInstance) {

155         if (pickerInstance && pickerInstance.isPicker) {

156             picker = pickerInstance.setConfig(picker);

157         }

158 

159         return picker;

160     },

161 

162     getPicker: function () {

163         var picker = this._picker,

164             value = this.getValue();

165 

166         if (picker && !picker.isPicker) {

167             picker = Ext.factory(picker, ux.picker.Time);

168             if (value != null) {

169                 picker.setValue(value);

170             }

171         }

172 

173         picker.on({

174             scope: this,

175             change: 'onPickerChange',

176             hide: 'onPickerHide'

177         });

178 

179         this._picker = picker;

180 

181         return picker;

182     },

183 

184     /**

185     * @private

186     * Listener to the tap event of the mask element. Shows the internal DatePicker component when the button has been tapped.

187     */

188     onMaskTap: function () {

189         if (this.getDisabled()) {

190             return false;

191         }

192 

193         this.onFocus();

194 

195         return false;

196     },

197 

198     /**

199     * Called when the picker changes its value.

200     * @param {ux.picker.Time} picker The date picker.

201     * @param {Object} value The new value from the date picker.

202     * @private

203     */

204     onPickerChange: function (picker, value) {

205         var me = this,

206             oldValue = me.getValue();

207 

208         me.setValue(value);

209         me.fireEvent('select', me, value);

210         me.onChange(me, value, oldValue);

211     },

212 

213     /**

214     * Override this or change event will be fired twice. change event is fired in updateValue

215     * for this field. TOUCH-2861

216     */

217     onChange: Ext.emptyFn,

218 

219     /**

220     * Destroys the picker when it is hidden, if

221     * {@link Ext.field.DatePicker#destroyPickerOnHide destroyPickerOnHide} is set to `true`.

222     * @private

223     */

224     onPickerHide: function () {

225         var me = this,

226             picker = me.getPicker();

227 

228         if (me.getDestroyPickerOnHide() && picker) {

229             picker.destroy();

230             me._picker = me.getInitialConfig().picker || true;

231         }

232     },

233 

234     reset: function () {

235         this.setValue(this.originalValue);

236     },

237 

238     onFocus: function (e) {

239         var component = this.getComponent();

240         this.fireEvent('focus', this, e);

241 

242         if (Ext.os.is.Android4) {

243             component.input.dom.focus();

244         }

245         component.input.dom.blur();

246 

247         if (this.getReadOnly()) {

248             return false;

249         }

250 

251         this.isFocused = true;

252 

253         this.getPicker().show();

254     },

255 

256     // @private

257     destroy: function () {

258         var picker = this._picker;

259 

260         if (picker && picker.isPicker) {

261             picker.destroy();

262         }

263 

264         this.callParent(arguments);

265     }

266     //<deprecated product=touch since=2.0>

267 }, function () {

268     this.override({

269         getValue: function (format) {

270             if (format) {

271                 //<debug warn>

272                 Ext.Logger.deprecate("format argument of the getValue method is deprecated, please use getFormattedValue instead", this);

273                 //</debug>

274                 return this.getFormattedValue(format);

275             }

276             return this.callOverridden();

277         }

278     });

279 

280     /**

281     * @method getDatePicker

282     * @inheritdoc Ext.field.DatePicker#getPicker

283     * @deprecated 2.0.0 Please use #getPicker instead

284     */

285     Ext.deprecateMethod(this, 'getDatePicker', 'getPicker');

286     //</deprecated>

287 });

效果图：

只需要时、分选项如下：

1             xtype: 'uxFieldTime',

2             picker: {

3                 slotOrder: ['hour', 'minute']

4             },

5             dateFormat: 'H:i',

6             value: new Date(),

7             label: '时间：',

8             placeHolder: '请输入时间'

一些额外的css：

 1 /*#region pick */

 2 

 3 .x-picker-slot-title {

 4     height:auto;

 5     text-align:center;

 6     padding:0.2em 0;

 7 }

 8 .x-picker-slot .x-dataview-item {

 9     padding:0 8px !important;

10 }

11 .x-webkit .x-layout-box.x-horizontal > .x-layout-box-item.x-picker-slot {

12     width:auto !important;

13 }

14 /*#endregion*/