---
title: "Ext.picker.Date"
description: "xtype 为 datepicker 的 Ext JS 原生组件参考。"
---

> Documentation Index
> Fetch the complete documentation index at: https://ag.879818327.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# Ext.picker.Date

源码定义：`ext-all-debug.js:106443`。分类：选择器与滑块。

## 创建示例

```javascript
var component = Ext.create("Ext.picker.Date", {
  xtype: "datepicker",
  ariaTitle: 'Date Picker: {0}',
  baseCls: Ext.baseCSSPrefix + 'datepicker',
  border: true,
  childEls: [,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `ariaTitle` | `String` | `'Date Picker: {0}'` | 配置组件的 `ariaTitle` 选项。 | `ariaTitle: 'Date Picker: {0}'` |
| `baseCls` | `Mixed` | `Ext.baseCSSPrefix + 'datepicker'` | 配置 `baseCls` 对应的 CSS 类名。 | `baseCls: Ext.baseCSSPrefix + 'datepicker'` |
| `border` | `Boolean` | `true` | 控制是否显示组件边框。 | `border: true` |
| `childEls` | `Array` | `[` | 组件创建后需要引用的子 DOM 元素集合。 | `childEls: [` |
| `disableAnim` | `Boolean` | `false` | 控制是否启用 `disableAnim` 行为。 | `disableAnim: false` |
| `disabledDatesText` | `String` | `'Disabled'` | 配置组件的 `disabledDatesText` 选项。 | `disabledDatesText: 'Disabled'` |
| `disabledDaysText` | `String` | `'Disabled'` | 配置组件的 `disabledDaysText` 选项。 | `disabledDaysText: 'Disabled'` |
| `focusOnSelect` | `Boolean` | `true` | 控制是否启用 `focusOnSelect` 行为。 | `focusOnSelect: true` |
| `focusOnShow` | `Boolean` | `false` | 控制是否启用 `focusOnShow` 行为。 | `focusOnShow: false` |
| `initHour` | `Number` | `12` | 配置组件的 `initHour` 选项。 | `initHour: 12` |
| `maxText` | `String` | `'This date is after the maximum date'` | 配置 `maxText` 限制值。 | `maxText: 'This date is after the maximum date'` |
| `minText` | `String` | `'This date is before the minimum date'` | 配置 `minText` 限制值。 | `minText: 'This date is before the minimum date'` |
| `monthYearFormat` | `String` | `'F Y'` | 配置组件的 `monthYearFormat` 选项。 | `monthYearFormat: 'F Y'` |
| `monthYearText` | `String` | `'Choose a month (Control+Up/Down to move years)'` | 配置组件的 `monthYearText` 选项。 | `monthYearText: 'Choose a month (Control+Up/Down to move years)'` |
| `nextText` | `String` | `'Next Month (Control+Right)'` | 配置组件的 `nextText` 选项。 | `nextText: 'Next Month (Control+Right)'` |
| `numDays` | `Number` | `42` | 配置组件的 `numDays` 选项。 | `numDays: 42` |
| `prevText` | `String` | `'Previous Month (Control+Left)'` | 配置组件的 `prevText` 选项。 | `prevText: 'Previous Month (Control+Left)'` |
| `renderTpl` | `Array` | `[` | 配置生成组件内容的 `renderTpl` 模板。 | `renderTpl: [` |
| `showToday` | `Boolean` | `true` | 控制是否显示 `today`。 | `showToday: true` |
| `startDay` | `Number` | `0` | 配置组件的 `startDay` 选项。 | `startDay: 0` |
| `todayText` | `String` | `'Today'` | 配置组件的 `todayText` 选项。 | `todayText: 'Today'` |
| `todayTip` | `String` | `'{0} (Spacebar)'` | 配置组件的 `todayTip` 选项。 | `todayTip: '{0} (Spacebar)'` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `selectedCls`、`disabledCellCls` 状态。源码涉及 `callParent()`、`addEvents()`、`initDisabledDays()`。 | `component.initComponent()` |
| `getRefOwner` | `` | 读取并返回 `refOwner`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.getRefOwner()` |
| `getRefItems` | `` | 读取并返回 `refItems`。 | `component.getRefItems()` |
| `beforeRender` | `` | 生成 `before` 的渲染结果。 执行时会保留父类默认行为、更新 `monthBtn`、`todayBtn` 状态。源码涉及 `cacheWidth()`、`getComponentLayout()`、`callParent()`。 | `component.beforeRender()` |
| `cacheWidth` | `` | 缓存 `width`。源码涉及 `parseBox()`。 | `component.cacheWidth()` |
| `finishRenderChildren` | `` | 完成 `renderChildren`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.finishRenderChildren()` |
| `onRender` | `container, position` | 生成 `on` 的渲染结果。 执行时会保留父类默认行为、更新 `cells`、`textNodes` 状态。源码涉及 `callParent()`、`mon()`。 | `component.onRender(...)` |
| `initEvents` | `` | 初始化 `events`。 执行时会保留父类默认行为、刷新界面或布局、更新 `prevRepeater`、`nextRepeater` 状态。源码涉及 `callParent()`、`showPrevMonth()`、`update()`、`showNextMonth()`。 | `component.initEvents()` |
| `handleTabClick` | `e` | 处理 `tabClick`。 执行时会派发 `select` 事件、更新组件值、更新 `doCancelFocus` 状态。源码涉及 `getSelectedDate()`、`setValue()`、`fireEvent()`、`onSelect()`。 | `component.handleTabClick(...)` |
| `getSelectedDate` | `date` | 读取并返回 `selectedDate`。 | `component.getSelectedDate(...)` |
| `initDisabledDays` | `` | 初始化 `disabledDays`。 执行时会更新 `disabledDatesRE` 状态。 | `component.initDisabledDays()` |
| `setDisabledDates` | `dd` | 设置 `disabledDates`。 执行时会刷新界面或布局、更新 `disabledDates`、`disabledDatesRE` 状态。源码涉及 `initDisabledDays()`、`update()`。 | `component.setDisabledDates(...)` |
| `setDisabledDays` | `dd` | 设置 `disabledDays`。 执行时会刷新界面或布局、更新 `disabledDays` 状态。源码涉及 `update()`。 | `component.setDisabledDays(...)` |
| `setMinDate` | `dt` | 设置 `minDate`。 执行时会刷新界面或布局、更新 `minDate` 状态。源码涉及 `update()`。 | `component.setMinDate(...)` |
| `setMaxDate` | `dt` | 设置 `maxDate`。 执行时会刷新界面或布局、更新 `maxDate` 状态。源码涉及 `update()`。 | `component.setMaxDate(...)` |
| `setValue` | `value` | 设置 `value`。 执行时会刷新界面或布局、更新 `value` 状态。源码涉及 `update()`。 | `component.setValue(...)` |
| `getValue` | `` | 读取并返回 `value`。 | `component.getValue()` |
| `getDayInitial` | `value` | 读取并返回 `dayInitial`。 | `component.getDayInitial(...)` |
| `focus` | `` | 将焦点移动到组件。 执行时会刷新界面或布局。源码涉及 `update()`。 | `component.focus()` |
| `onEnable` | `` | 处理 `enable` 回调。 执行时会保留父类默认行为、刷新界面或布局。源码涉及 `callParent()`、`setDisabledStatus()`、`update()`。 | `component.onEnable()` |
| `onDisable` | `` | 处理 `disable` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`、`setDisabledStatus()`。 | `component.onDisable()` |
| `setDisabledStatus` | `disabled` | 设置 `disabledStatus`。 | `component.setDisabledStatus(...)` |
| `getActive` | `` | 读取并返回 `active`。 | `component.getActive()` |
| `runAnimation` | `isHide` | 执行 `animation`。 | `component.runAnimation(...)` |
| `hideMonthPicker` | `animate` | 隐藏 `monthPicker`。源码涉及 `shouldAnimate()`、`runAnimation()`。 | `component.hideMonthPicker(...)` |
| `doShowMonthPicker` | `` | 执行 `showMonthPicker` 操作。源码涉及 `showMonthPicker()`。 | `component.doShowMonthPicker()` |
| `doHideMonthPicker` | `` | 执行 `hideMonthPicker` 操作。源码涉及 `hideMonthPicker()`。 | `component.doHideMonthPicker()` |
| `showMonthPicker` | `animate` | 显示 `monthPicker`。源码涉及 `createMonthPicker()`、`getActive()`、`shouldAnimate()`、`runAnimation()`。 | `component.showMonthPicker(...)` |
| `shouldAnimate` | `animate` | 判断是否应执行 `animate`。 | `component.shouldAnimate(...)` |
| `createMonthPicker` | `` | 创建 `monthPicker`。 执行时会更新 `monthPicker` 状态。源码涉及 `on()`。 | `component.createMonthPicker()` |
| `onOkClick` | `picker, value` | 处理 `okClick` 回调。 执行时会更新组件值。源码涉及 `getActive()`、`setValue()`、`hideMonthPicker()`。 | `component.onOkClick(...)` |
| `onCancelClick` | `` | 处理 `cancelClick` 回调。源码涉及 `selectedUpdate()`、`hideMonthPicker()`。 | `component.onCancelClick()` |
| `showPrevMonth` | `e` | 显示 `prevMonth`。 执行时会更新组件值。源码涉及 `setValue()`。 | `component.showPrevMonth(...)` |
| `showNextMonth` | `e` | 显示 `nextMonth`。 执行时会更新组件值。源码涉及 `setValue()`。 | `component.showNextMonth(...)` |
| `showPrevYear` | `` | 显示 `prevYear`。 执行时会更新组件值。源码涉及 `setValue()`。 | `component.showPrevYear()` |
| `showNextYear` | `` | 显示 `nextYear`。 执行时会更新组件值。源码涉及 `setValue()`。 | `component.showNextYear()` |
| `handleMouseWheel` | `e` | 处理 `mouseWheel`。源码涉及 `showPrevMonth()`、`showNextMonth()`。 | `component.handleMouseWheel(...)` |
| `handleDateClick` | `e, t` | 处理 `dateClick`。 执行时会派发 `select` 事件、更新组件值、更新 `doCancelFocus` 状态。源码涉及 `setValue()`、`fireEvent()`、`onSelect()`。 | `component.handleDateClick(...)` |
| `onSelect` | `` | 处理 `select` 回调。源码涉及 `hide()`。 | `component.onSelect()` |
| `selectToday` | `` | 选中 `today`。 执行时会派发 `select` 事件、更新组件值。源码涉及 `setValue()`、`fireEvent()`、`onSelect()`。 | `component.selectToday()` |
| `selectedUpdate` | `date` | 选中 `edUpdate`。 执行时会派发 `highlightitem` 事件。源码涉及 `fireEvent()`、`isVisible()`。 | `component.selectedUpdate(...)` |
| `fullUpdate` | `date` | 处理 `fullUpdate` 操作。 执行时会派发 `highlightitem` 事件、更新 `todayElSpan` 状态。源码涉及 `isVisible()`、`fireEvent()`。 | `component.fullUpdate(...)` |
| `update` | `date, forceRefresh` | 更新组件当前状态。 执行时会更新 `activeDate` 状态。源码涉及 `selectedUpdate()`、`fullUpdate()`。 | `component.update(...)` |
| `beforeDestroy` | `` | 在 `destroy` 前执行预处理。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.beforeDestroy()` |
| `onShow` | `` | 处理 `show` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`、`focus()`。 | `component.onShow()` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `select` | 用户选中值或记录时触发。 源码在 `handleTabClick()`、`handleDateClick()`、`selectToday()` 中通过 `fireEvent()` 触发。 | `listeners: { select: function () {} }` |

Source: https://ag.879818327.xyz/ext/picker/picker-date/index.mdx