更新记录

1.1（2021-06-15）

增加语言库

1.0（2021-06-12）

增加交互方式

增加标记日期 功能

btnFlg true 按钮选择 false 点击日期直接选择

filterData 格式 ['2021-03-05','2021-03-05']

lang 语种 支持 cn 中文 en 英文

平台兼容性

重要通知：组件升级更新 2.0.0 后，支持日期+时间范围选择，组件 ui 将使用日历选择日期，ui 变化较大，同时支持 PC 和 移动端。此版本不向后兼容，不再支持单独的时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）。若仍需使用旧版本，可在插件市场下载*非uni_modules版本*，旧版本将不再维护

DatetimePicker 时间选择器

组件名：uni-datetime-picker 代码块： uDatetimePicker

uni-datetime-picker-Plus

增加国际化语种支持

增加交互方式

增加标记日期 功能

btnFlg true 按钮选择 false 点击日期直接选择

filterData 格式 ['2021-03-05','2021-03-05']

lang 语种 支持 cn 中文 en 英文

该组件的优势是，支持时间戳输入和输出（起始时间、终止时间也支持时间戳），可同时选择日期和时间。

若只是需要单独选择日期和时间，不需要时间戳输入和输出，可使用原生的 picker 组件。

点击 picker 默认值规则：

• 若设置初始值 value, 会显示在 picker 显示框中
• 若无初始值 value，则初始值 value 为当前本地时间 Date.now()， 但不会显示在 picker 显示框中

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

如需通过npm方式使用uni-ui组件，另见文档：https://ext.dcloud.net.cn/plugin?id=55

基本用法

在 template 中使用组件

<uni-datetime-picker></uni-datetime-picker>
<uni-datetime-picker v-model="vModelDatetime" start="2010-6-10 08:30:30" end="2021-6-10 08:30:30"></uni-datetime-picker>
<uni-datetime-picker :value="timestamp" return-type="timestamp" start="1276129830000" end="1623285030000" @change="timestampChange"></uni-datetime-picker>
<uni-datetime-picker type="date" :value="date" start="2020-6-15" end="2025-6-15" @change="dateChange"></uni-datetime-picker>
<uni-datetime-picker type="time" :value="time" start="06:30:30" end="12:30:30" @change="timeChange"></uni-datetime-picker>

API

DatetimePicker Props

DatetimePicker Events

组件示例

点击查看：https://hellouniapp.dcloud.net.cn/pages/extUI/datetime-picker/datetime-picker