更新记录

1.0.0（2021-08-10） 下载此版本

去掉选择框与清空图标

平台兼容性

uni-app

其他

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

DatetimePicker 时间选择器

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

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

若只是需要单独选择日期和时间，不需要时间戳输入和输出，可使用原生的 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 中使用组件

<template>
    <view class="page">
        <text class="example-info">可以同时选择日期和时间的选择器</text>
        <uni-section :title="'日期用法：' + single" type="line"></uni-section>
        <view class="example-body">
            <uni-datetime-picker type="date" :value="single" start="2021-3-20" end="2021-6-20" @change="change" />
        </view>
        <uni-section :title="'时间戳用法：' + single" type="line"></uni-section>
        <view class="example-body">
            <uni-datetime-picker returnType="timestamp" @change="changeLog($event)" start="2021-3-20" end="2021-5-20"  />
        </view>
        <uni-section :title="'日期时间用法：' + datetimesingle" type="line"></uni-section>
        <view class="example-body">
            <uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog" />
        </view>
        <uni-section :title="'v-model用法：' + single" type="line"></uni-section>
        <view class="example-body">
            <uni-datetime-picker v-model="single" />
        </view>
        <uni-section :title="'插槽用法：' + single" type="line"></uni-section>
        <view class="example-body">
            <uni-datetime-picker v-model="single">我是一个插槽，点击我</uni-datetime-picker>
        </view>
        <uni-section :title="'无边框用法：' + single" type="line"></uni-section>
        <view class="example-body">
            <uni-datetime-picker v-model="single" :border="false" />
        </view>
        <uni-section :title="'disabled用法：' + single" type="line"></uni-section>
        <view class="example-body">
            <uni-datetime-picker v-model="single" disabled />
        </view>
        <uni-section :title="'日期范围用法：' + '[' + range + ']'" type="line"></uni-section>
        <view class="example-body">
            <uni-datetime-picker v-model="range" type="daterange" start="2021-3-20" end="2021-5-20"
                rangeSeparator="至" />
        </view>
        <uni-section :title="'日期时间范围用法：' + '[' + datetimerange + ']' " type="line"></uni-section>
        <view class="example-body">
            <uni-datetime-picker v-model="datetimerange" type="datetimerange"
                start="2021-3-20 12:00:00" end="2021-6-20 20:00:00" rangeSeparator="至" />
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                single: '2021-04-3',
                datetimesingle: '2021-04-3',
                range: ['2021-03-8', '2021-4-20'],
                datetimerange: ['2021-03-20 20:10:10', '2021-05-10 10:10:10'],
            }
        },

        watch: {
            datetimesingle(newval) {
                console.log('单选:', this.datetimesingle);
            },
            range(newval) {
                console.log('范围选:', this.range);
            },
            datetimerange(newval) {
                console.log('范围选:', this.datetimerange);
            }
        },
        mounted() {
            setTimeout(() => {
                this.datetimesingle = '2021-5-1'
                this.single = '2021-5-1'
            },1000)
        },

        methods:{
            change(e) {
                this.single = e
                console.log('-change事件:', e);
            }
        }
    }
</script>

<style lang="scss">
    @import '@/common/uni-nvue.scss';
</style>

API

DatetimePicker Props

DatetimePicker Events

Popup Methods

组件示例

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