<template>
<view>
<view class="test">
<view>日期选择 - 示例</view>
{
{
date}}
<button type="primary" @click="onShowDatePicker('date')">选择日期</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/30',
time: '15:00:12',
datetime: '2019/01/01 15:00:12',
range: ['2019/01/01','2019/01/06'],
rangetime: ['2019/01/08 14:00','2019/01/16 13:59'],
type: 'rangetime',
value: ''
}
},
created() {
let self = this;
self.date = self.dataFormat(new Date())
// new Date(element.followTime)
console.log("当前日期:",self.date);
},
methods: {
// 初始化日期
dataFormat(time){
// return `${time.getFullYear()}-${time.getMonth() + 1 >= 10 ? (time.getMonth() + 1) : '0' + (time.getMonth() + 1)}-${time.getDate() >= 10 ? time.getDate() : '0' + time.getDate()}
// ${time.getHours() >= 10 ? time.getHours() : '0' + time.getHours()} : ${time.getMinutes()>=10?time.getMinutes():'0'+time.getMinutes()} : ${time.getSeconds() >= 10 ? time.getSeconds() : '0' + time.getSeconds()}`;
return `${
time.getFullYear()}/${
time.getMonth() + 1 >= 10 ? (time.getMonth() + 1) : '0'
+ (time.getMonth() + 1)}/${
time.getDate() >= 10 ? time.getDate() : '0' + time.getDate()}`;
},
onShowDatePicker(type){
//显示
this.type = type;
this.showPicker = true;
this.value = this[type];
console.log("this.type:",this.type);
console.log("this.value:",this.value);
},
onSelected(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>
以下为时间选择器的demo
详细demo github
<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/30',
time: '15:00:12',
datetime: '2019/01/01 15:00:12',
range: ['2019/01/01','2019/01/06'],
rangetime: ['2019/01/08 14:00','2019/01/16 13:59'],
type: 'rangetime',
value: ''
}
},
created() {
let self = this;
self.date = self.dataFormat(new Date())
// new Date(element.followTime)
console.log("当前日期:",self.date);
},
methods: {
// 初始化日期
dataFormat(time){
// return `${time.getFullYear()}-${time.getMonth() + 1 >= 10 ? (time.getMonth() + 1) : '0' + (time.getMonth() + 1)}-${time.getDate() >= 10 ? time.getDate() : '0' + time.getDate()}
// ${time.getHours() >= 10 ? time.getHours() : '0' + time.getHours()} : ${time.getMinutes()>=10?time.getMinutes():'0'+time.getMinutes()} : ${time.getSeconds() >= 10 ? time.getSeconds() : '0' + time.getSeconds()}`;
return `${
time.getFullYear()}/${
time.getMonth() + 1 >= 10 ? (time.getMonth() + 1) : '0'
+ (time.getMonth() + 1)}/${
time.getDate() >= 10 ? time.getDate() : '0' + time.getDate()}`;
},
onShowDatePicker(type){
//显示
this.type = type;
this.showPicker = true;
this.value = this[type];
console.log("this.type:",this.type);
console.log("this.value:",this.value);
},
onSelected(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>