日期时间选择器 DatePicker
一款高颜值、多场景的日期时间选择器，提供自定义颜色/格式/文案等。
该插件采用scss编译，如遇到样式/层级问题可以到源码修改。 如果对您有帮助，可以评论或赞赏一下，谢谢！
属性说明
format
示例：yyyy/mm/dd hh:ii:ss => /03/26 23:39
ConfirmObject
{value: ..., //当前选择的值(String/Array)date: ..., //当前所选值的原始Date对象}
使用示例
<template><view><view class="test"><view>日期选择 - 示例</view>{{date}}<button type="primary" @click="DatePicker('date')">选择日期</button>{{time}}<button type="primary" @click="DatePicker('time')">选择时间</button>{{datetime}}<button type="primary" @click="DatePicker('datetime')">选择日期时间</button>{{range[0]}} - {{range[1]}}<button type="primary" @click="DatePicker('range')">选择日期范围</button>{{rangetime[0]}} - {{rangetime[1]}}<button type="primary" @click="DatePicker('rangetime')">选择日期时间范围</button></view><mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'入住'" :end-text="'离店'" :show-seconds="true" @confirm="ed" @cancel="ed" /></view></template><script>import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";export default {components: {MxDatePicker},data() {return {show: false,showPicker: false,date: '/06/01',time: '15:00:12',datetime: '/01/01 15:00:12',range: ['/08/01','/08/10'],rangetime: ['-08-01','-08-10'],type: 'rangetime',value: ''}},methods: {DatePicker(type){//显示this.type = type;this.showPicker = true;this.value = this[type];},ed(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>
