【免费下载链接】element-reactElement UI项目地址https://gitcode.com/gh_mirrors/el/element-react点击查看免费下载本文以 element-react 的 DateTimePicker 为主题讲解如何通过isShowTime属性让DatePicker与DateRangePicker在同一个选择器面板中同时完成日期与时间的选定并配合shortcuts快捷选项实现一键填充。读完本文你将掌握日期时间点选择、日期时间范围选择、快捷选项、格式化与禁用日期等完整用法并理解其底层面板实现BasePicker、DatePanel、DateRangePanel的工作机制。一、什么是 DateTimePicker在 element-react 中DatePicker与DateRangePicker默认只负责日期的选择。当需要日期 时间例如会议预约、活动截止时间时只需为组件设置isShowTime{true}选择器面板就会在日期表下方追加时间编辑区与此刻 / 确定按钮从而在一个选择器中同时完成日期和时间的挑选。文档定义与源码实现在 site/docs/en-US/datetime-picker.md中文版见 site/docs/zh-CN/datetime-picker.md。组件层面的开关定义在 src/date-picker/panel/DatePanel.jsx 的propTypes中isShowTime: PropTypes.bool默认值为false见同文件 DatePanel.defaultProps。同样范围选择的isShowTime定义在 src/date-picker/panel/DateRangePanel.jsx。二、日期和时间点单个时刻的选择文档中的第一个示例展示了两类用法基础日期时间选择和带快捷选项的日期时间选择。二者均通过isShowTime{true}开启时间选择快捷选项的用法与 Date Picker 完全一致shortcuts数组的每一项包含text文本与onClick回调。constructor(props) { super(props) this.state {} } render() { const {value1, value2} this.state return ( div classNamesource div classNameblock span classNamedemonstrationDefault/span DatePicker isShowTime{true} value{value1} placeholderPick a day onChange{date{ console.debug(DatePicker1 changed: , date) this.setState({value1: date}) }} disabledDate{timetime.getTime() Date.now() - 8.64e7} / /div div classNameblock span classNamedemonstrationPicker with quick options/span DatePicker isShowTime{true} ref{ethis.datepicker2 e} value{value2} alignright placeholderPick a day onChange{date{ console.debug(DatePicker2 changed: , date) this.setState({value2: date}) }} shortcuts{[{ text: Today, onClick: (picker) { this.setState({value2: new Date()}) this.datepicker2.togglePickerVisible() } }, { text: Yesterday, onClick: (picker) { const date new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24); this.setState({value2: date}) this.datepicker2.togglePickerVisible() } }, { text: A week ago, onClick: (picker) { const date new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24 * 7); this.setState({value2: date}) this.datepicker2.togglePickerVisible() } }]} / /div /div ) }关键点说明isShowTime{true}开启后日期面板顶部出现日期 时间两个可编辑输入框底部出现此刻Now与确定Confirm按钮。相关渲染逻辑见 DatePanel.jsx 与 DatePanel.jsx点击此刻调用changeToNow()直接以当前时间回调onPick点击确定调用confirm()以面板当前date状态作为结果回调。shortcuts快捷项渲染在面板侧边栏el-picker-panel__sidebar点击时执行shortcut.onClick()见 DatePanel.jsx。回调中的picker参数即组件实例示例通过this.datepicker2.togglePickerVisible()手动收起面板togglePickerVisible()定义于 BasePicker.jsx本质是对pickerVisible状态取反。onChange当选中的值与旧值不一致时才会触发且传出的永远是Date实例或null。判定逻辑见 BasePicker.jsx 的onPicked与 BasePicker.jsx 的valueEquals。disabledDate接收一个返回布尔值的函数返回true的日期将被禁用。示例中time.getTime() Date.now() - 8.64e7表示禁用今天零点之前的日期8.64e7即一天的毫秒数。三、日期和时间范围一个区间内的时刻文档的第二个示例演示日期时间范围选择同样只需给DateRangePicker设置isShowTime{true}即可在双日历范围面板上分别选择起始与结束的日期、时间。constructor(props) { super(props) this.state {value1: null, value2: null} } render() { const {value1, value2} this.state return ( div classNamesource div classNameblock span classNamedemonstrationDefault/span DateRangePicker isShowTime{true} value{value1} placeholderPick a range onChange{date{ console.debug(DateRangePicker1 changed: , date) this.setState({value1: date}) }} / /div div classNameblock span classNamedemonstrationWith quick options/span DateRangePicker isShowTime{true} value{value2} placeholderPick a range alignright ref{ethis.daterangepicker2 e} onChange{date{ console.debug(DateRangePicker2 changed: , date) this.setState({value2: date}) }} shortcuts{[{ text: Last week, onClick: () { const end new Date(); const start new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); this.setState({value2: [start, end]}) this.daterangepicker2.togglePickerVisible() } }, { text: Last month, onClick: () { const end new Date(); const start new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); this.setState({value2: [start, end]}) this.daterangepicker2.togglePickerVisible() } }, { text: Last 3 months, onClick: () { const end new Date(); const start new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); this.setState({value2: [start, end]}) this.daterangepicker2.togglePickerVisible() } }]} / /div /div ) }范围选择的使用要点value为双元素数组[startDate, endDate]onChange回传的同样是一个Date[]数组或null。范围值的格式化由RANGE_FORMATTER/RANGE_PARSER完成见 src/date-picker/constants.js默认以-作为分隔符连接起止时间分隔符可通过rangeSeparator属性自定义见 DateRangePicker.jsx。开启isShowTime后的面板结构时间编辑区被拆分为开始日期 开始时间与结束日期 结束时间两组输入框见 DateRangePanel.jsx底部提供清除Clear与确定Confirm按钮——清除调用handleClear()清空起止值并回调onPick([], false)确定调用handleConfirm()将[minDate, maxDate]作为最终结果见 DateRangePanel.jsx。快捷选项与单值选择相同通过shortcuts数组配置。示例中Last week / Last month / Last 3 months分别用3600 * 1000 * 24 * N的毫秒偏移量向前推 7 / 30 / 90 天构造[start, end]数组并写入状态再调用togglePickerVisible()关闭面板。四、属性AttributesDateRangePicker与DatePicker在开启isShowTime后属性体系完全沿用 DatePicker 的定义文档明确注明See DatePicker即和 DatePicker 相同。下表来自 site/docs/en-US/date-picker.md可与 src/date-picker/Types.js 中的类型声明相互印证。通用属性Common Props参数说明类型可选值默认值placeholder占位提示文本string——format日期时间格式化串string年yyyy月MM日dd小时HH分mm秒ssyyyy-MM-dddatetime 类型实际为yyyy-MM-dd HH:mm:ss见下文align面板对齐方向stringleft, center, rightleftisShowTrigger是否显示触发图标boolean—trueisReadOnly是否只读boolean—falseisDisabled是否禁用boolean—falseisShowTime是否显示时间选择boolean—falsefirstDayOfWeek每周起始日Number0 至 60onFocus聚焦回调(SyntheticEvent)()——onBlur失焦回调(SyntheticEvent)()——DatePicker 属性参数说明类型可选值默认值value当前选中值Date/null——shortcuts快捷选项{text: string, onClick: ()()}[]——selectionMode日历粒度stringyear, month, week, daydaydisabledDate是否禁用某日期(Date, selectionMode)boolean——showWeekNumber是否显示周数boolean—falseDateRangePanel 属性参数说明类型可选值默认值value当前选中范围Date[]/null——shortcuts快捷选项{text: string, onClick: ()()}[]——showWeekNumber是否显示周数boolean—falserangeSeparator范围分隔符string— - 五、源码级原理isShowTime 是如何工作的1. 类型与默认格式isShowTime开启后组件内部类型被识别为datetime单值或datetimerange范围。对应的默认格式化串定义在 src/date-picker/constants.jsdatetime: yyyy-MM-dd HH:mm:ssdatetimerange: yyyy-MM-dd HH:mm:ss也就是说即便不显式传入format日期时间选择器也会按年-月-日 时:分:秒的完整精度显示。getFormat()的逻辑是有format属性用format否则取类型默认值见 BasePicker.jsx。日期与时间的格式化、解析分别由 src/date-picker/utils/index.js 的formatDate/parseDate完成。2. 面板中的时间联动单值面板 DatePanel.jsx 在isShowTime为真时顶部渲染两个输入框日期框绑定visibleDate时间框绑定visibleTime时间框聚焦时弹出 TimePanel见 DatePanel.jsx。时间选择结果通过handleTimePick(pickedDate, isKeepPanel)回填到当前state.date的时、分、秒见 DatePanel.jsx从而保证先选日期后选时间或先选时间后选日期两条路径最终合并为同一个完整时间戳。时间格式自动降级若format不含ss时间输入框只显示HH:mm见 DatePanel.jsx 的timeFormatgetter。范围面板 DateRangePanel.jsx 则分别维护minDate与maxDate左侧时间选择通过handleMinTimePick只改写起始时间的时、分、秒右侧通过handleMaxTimePick只改写结束时间见 DateRangePanel.jsx。若结束时间尚未确定handleMaxTimePick还会自动以当前时间晚于起始时间为前提补一个结束时间。3. 值传递链路所有选择器最终都继承自 BasePicker.jsx面板内的onPick统一指向BasePicker.onPicked例如 DatePicker.jsx 中DatePanel的onPick{this.onPicked.bind(this)}。onPicked内部做值相等性比较valueEquals仅在真正变化时触发用户传入的onChange同时通知外层Form的onFieldChange见 BasePicker.jsx。输入框文本与Date值之间的双向转换走dateToStr/parseDateBasePicker.jsx因此用户也可以直接在输入框中键入形如2023-08-15 14:30:00的合法文本解析成功后同样会驱动onChange。4. 触发图标与面板显隐isShowTrigger控制输入框右侧的日历/时间图标是否显示图标类名由triggerClass()决定日期类类型为el-icon-date时间类类型为el-icon-time见 BasePicker.jsx。点击图标无值时打开面板、有值时清空当前值并回调onChange(null)BasePicker.jsx。面板通过MountBody挂载到 body 并配合 Popper 定位align属性映射到 PLACEMENT_MAPleft → bottom-start、center → bottom-center、right → bottom-end。六、常见场景与注意事项只想选某天某时刻使用DatePickerisShowTime{true}配合onChange拿到完整Date对象后自行格式化展示。需要开始/结束时刻使用DateRangePickerisShowTime{true}onChange回传[start, end]数组若想自定义起止时间的连接符用rangeSeparator覆盖默认的 - 。快捷填充无论单值还是范围shortcuts的onClick都要通过组件 ref 调用togglePickerVisible()主动收起面板该方法已确认仅存在于 BasePicker.jsx否则面板会停留在打开状态。禁用历史日期disabledDate的判定以天为单位示例中的写法time.getTime() Date.now() - 8.64e7等价于禁用昨天及以前可据此按需调整阈值。默认精度不传format时datetime 与 datetimerange 默认精度为秒yyyy-MM-dd HH:mm:ss如需只精确到分钟传入formatyyyy-MM-dd HH:mm时间输入框会自动降级为HH:mm。综上element-react 的 DateTimePicker 能力由DatePicker/DateRangePicker与isShowTime属性共同提供其核心实现在 src/date-picker 目录下文档示例代码可直接在 site/pages/datetime-picker/index.jsx 对应的演示页面中运行验证。赞分享【免费下载链接】element-reactElement UI项目地址https://gitcode.com/gh_mirrors/el/element-react点击查看免费下载相关推荐Element UI 中的 DateTimePicker 日期时间选择器详解Element UI 中的 DateTimePicker 日期时间选择器详解 概述 DateTimePicker 是 Element UI 提供的一个功能强大的前端UI组件设计系统Element UI 中的 DateTimePicker 日期时间选择器详解Element UI 中的 DateTimePicker 日期时间选择器详解 什么是 DateTimePicker DateTimePicker 是 Eleme前端UI组件设计系统Element UI 日期时间选择器(DateTimePicker)使用指南Element UI 日期时间选择器 DateTimePicker 使用指南 概述 Element UI 的 DateTimePicker 组件是一个功能强大的前端UI组件设计系统上一篇Awesome Claude Skills高级用户指南专家级使用技巧下一篇Darknet模型版本控制使用DVC管理大型权重文件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考