80 lines
2.8 KiB
Vue
80 lines
2.8 KiB
Vue
<template>
|
||
<!-- pages/component/dateTimePicker/dateTimePicker.wxml -->
|
||
<view class="tui-picker-content">
|
||
<!-- <view class="tui-picker-name">时间选择器（选择时分）</view>
|
||
<picker mode="time" value="{{time}}" start="09:00" end="17:30" bindchange="changeTime">
|
||
<view class="tui-picker-detail">
|
||
午饭时间: {{time}}
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<view class="tui-picker-content">
|
||
<view class="tui-picker-name">日期选择器（选择年月日）</view>
|
||
<picker mode="date" value="{{date}}" start="2017-10-01" end="2017-10-08" bindchange="changeDate">
|
||
<view class="tui-picker-detail">
|
||
国庆出游: {{date}}
|
||
</view>
|
||
</picker>
|
||
</view> -->
|
||
|
||
<view class="tui-picker-content">
|
||
<view class="tui-picker-name">日期时间选择器（精确到秒）</view>
|
||
<picker mode="multiSelector" :value="dateTime" @change="changeDateTime" @columnchange="changeDateTimeColumn" :range="dateTimeArray">
|
||
<view class="tui-picker-detail">选择日期时间: {{ dateTimeArray[0][dateTime[0]] }}:{{ dateTimeArray[1][dateTime[1]] }}:{{ dateTimeArray[2][dateTime[2]] }}</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<!-- <view class="tui-picker-content">
|
||
<view class="tui-picker-name">日期时间选择器（精确到分）</view>
|
||
<picker mode="multiSelector" value="{{dateTime1}}" bindchange="changeDateTime1" bindcolumnchange="changeDateTimeColumn1" range="{{dateTimeArray1}}">
|
||
<view class="tui-picker-detail">
|
||
选择日期时间: {{dateTimeArray1[0][dateTime1[0]]}}-{{dateTimeArray1[1][dateTime1[1]]}}-{{dateTimeArray1[2][dateTime1[2]]}} {{dateTimeArray1[3][dateTime1[3]]}}:{{dateTimeArray1[4][dateTime1[4]]}}
|
||
</view>
|
||
</picker> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
var dateTimePicker = require('../../common/dateTimePicker');
|
||
export default {
|
||
data() {
|
||
return {
|
||
dateTimeArray: null,
|
||
dateTime: null,
|
||
startYear: 2000,
|
||
endYear: 2050
|
||
};
|
||
},
|
||
onLoad() {
|
||
// 获取完整的年月日 时分秒，以及默认显示的数组
|
||
var obj = dateTimePicker.dateTimePicker(this.startYear, this.endYear);
|
||
this.setData({
|
||
dateTime: obj.dateTime,
|
||
dateTimeArray: obj.dateTimeArray
|
||
});
|
||
},
|
||
methods: {
|
||
changeDateTime(e) {
|
||
this.setData({
|
||
dateTime: e.detail.value
|
||
});
|
||
},
|
||
|
||
changeDateTimeColumn(e) {
|
||
console.log('colum:', e);
|
||
var arr = this.dateTime;
|
||
var dateArr = this.dateTimeArray;
|
||
arr[e.detail.column] = e.detail.value;
|
||
this.setData({
|
||
dateTimeArray: dateArr,
|
||
dateTime: arr
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style>
|
||
@import './dateTimePicker.css';
|
||
</style>
|