uni-app时间选择器并选择时间段

效果图：

1.在script中引用自定义组件：mx-datepicker.vue

import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";

2.注册组件：

components: {
            MxDatePicker
        },

 3.新建时间选择页面代码：

<template>
    <view>
        <view class="test">
            <view>日期选择 - 示例</view>
            { {date}}
            <button type="primary" @click="onShowDatePicker('date')">选择日期</button>
            { {time}}
            <button type="primary" @click="onShowDatePicker('time')">选择时间</button>
            { {datetime}}
            <button type="primary" @click="onShowDatePicker('datetime')">选择日期时间</button>
            { {range[0]}} - { {range[1]}}
            <button type="primary" @click="onShowDatePicker('range')">选择日期范围</button>
            { {rangetime[0]}} - { {rangetime[1]}}
            <button type="primary" @click="onShowDatePicker('rangetime')">选择日期时间范围</button>
        </view>
        <mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'开始'"
            :end-text="'结束'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
    </view>
</template>
<script>
    import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
    export default {
        components: {
            MxDatePicker
        },
        data() {
            return {
                showPicker: false,
                date: '2019/01/01',
                time: '15:00:12',
                datetime: '2019/01/01 15:00:12',
                range: [],
                rangetime: ['2019/01/08 14:00', '2019/01/16 13:59'],
                type: 'rangetime',
                value: ''
            }
        },
        methods: {
            onShowDatePicker(type) { //显示
                console.log(JSON.stringify(type))
                this.type = type;
                this.showPicker = true;
                this.value = this[type];
            },
            onSelected(e) { //选择
                console.log(JSON.stringify(e))
                this.showPicker = false;
                if (e) {
                    this[this.type] = e.value;
                    //选择的值
                    console.log('value => ' + e.value);
                    //原始的Date对象
                    console.log('date => ' + e.date);
                }
            }
        }
    }
</script>
<style>
    .test {
        text-align: center;
        padding: 10px 0;
    }

    button {
        margin: 20upx;
        font-size: 28upx;
    }
</style>

代码说明：

（1）.时间、日期点击事件onShowDatePicker，传递的参数是选择时间日期的类型

type：date =》日期选择

type：time =》时间选择

 

type：datetime =》日期+时间选择

 

 type：range =》日期范围选择

 type：rangetime =》时间+日期范围选择

 

 组件使用：

 

4.mx-datepicker.vue

 

<template>
    <view v-if="isShow" class="picker">
        <!-- 日期选择器 -->
        <view v-if="type!='time'" class="picker-modal">
            <view class="picker-modal-header">
                <view class="picker-icon picker-icon-zuozuo" :hover-stay-time="100" hover-class="picker-icon-active" @click="onSetYear('-1')"></view>
                <view class="picker-icon picker-icon-zuo" :hover-stay-time="100" hover-class="picker-icon-active" @click="onSetMonth('-1')"></view>
                <text class="picker-modal-header-title">{ {title}}</text>
                <view class="picker-icon picker-icon-you" :hover-stay-time="100" hover-class="picker-icon-active" @click="onSetMonth('+1')"></view>
                <view class="picker-icon picker-icon-youyou" :hover-stay-time="100" hover-class="picker-icon-active" @click="onSetYear('+1')"></view>
            </view>
            <swiper class="picker-modal-body" :circular="true" :duration="200" :skip-hidden-item-layout="true" :current="calendarIndex" @change="onSwiperChange">
                <swiper-item class="picker-calendar" v-for="(calendar,calendarIndex2) in calendars" :key="calendarIndex2">
                    <view class="picker-calendar-view" v-for="(week,index) in weeks" :key="index - 7">
                        <view class="picker-calendar-view-item">{ {week}}</view>
                    </view>
                    <view class="picker-calendar-view" v-for="(date,dateIndex) in calendar" :key="dateIndex" @click="onSelectDate(date)">
                        <!-- 背景样式 -->
                        <view v-show="date.bgStyle.type" :class="'picker-calendar-view-'+date.bgStyle.type" :style="{background: date.bgStyle.background}"></view>
                        <!-- 正常和选中样式 -->
                        <view class="picker-calendar-view-item" :style="{opacity: date.statusStyle.opacity, color: date.statusStyle.color, background: date.statusStyle.background}">
                            <text>{ {date.title}}</text>
                        </view>
                        <!-- 小圆点样式 -->
                        <view class="picker-calendar-view-dot" :style="{opacity: date.dotStyle.opacity, background: date.dotStyle.background}"></view>
                        <!-- 信息样式 -->
                        <view v-show="date.tips" class="picker-calendar-view-tips">{ {date.tips}}</view>
                    </view>