[内容]
picker date模式,加了startdate和enddate,startdate为2019-01-27,enddate为2019-04-27,选择1月31号时,直接跳到4月27,选择不上1月31,选择2月1号时,有跳到了1月27,选择不上2月1日,用官方代码试验的。
重现步骤
[步骤]
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-title uni-common-pl">地区选择器</view>
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
当前选择
</view>
<view class="uni-list-cell-db">
<picker @change="bindPickerChange" :value="index" :range="array">
<view class="uni-input">{{array[index]}}</view>
</picker>
</view>
</view>
</view>
<view class="uni-title uni-common-pl">时间选择器</view>
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
当前选择
</view>
<view class="uni-list-cell-db">
<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
<view class="uni-input">{{time}}</view>
</picker>
</view>
</view>
</view>
<view class="uni-title uni-common-pl">日期选择器</view>
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
当前选择
</view>
<view class="uni-list-cell-db">
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
<view class="uni-input">{{date}}</view>
</picker>
</view>
</view>
</view>
</view>
</template>
<script>
import {DateUtils} from './app.js'
export default {
data() {
const currentDate = this.getDate({
format: true
});
return {
title: 'picker',
array: ['中国', '美国', '巴西', '日本'],
index: 0,
date: currentDate,
time: '12:01'
}
},
computed: {
// startDate() {
// let a = DateUtils.toLong(DateUtils.addDays('2019-01-27', 1));
// console.log(a);
// return a;
// },
// endDate() {
// let b = DateUtils.toLong(DateUtils.addDays('2019-01-27',7));
// console.log(b);
// return b;
// }
startDate() {
// let a = DateUtils.toLong(DateUtils.addDays('2019-01-27', 1));
// console.log(a);
let a = this.getDate('start');
console.log(a);
return a;
},
endDate() {
// let b = DateUtils.toLong(DateUtils.addDays('2019-01-27',90));
let b = this.getDate('end');
console.log(b);
return b;
}
},
methods: {
bindPickerChange: function(e) {
console.log('picker发送选择改变,携带值为', e.target.value)
this.index = e.target.value
},
bindDateChange: function(e) {
this.date = e.target.value
},
bindTimeChange: function(e) {
this.time = e.target.value
},
getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (type === 'start') {
// year = year - 60;
day = day;
} else if (type === 'end') {
// year = year + 2;
month = month + 3;
}
month = month > 9 ? month : '0' + month;;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
}
}
}
</script>
<style>
</style>
[结果]
[期望]
[如果语言难以表述清晰,可以拍一个视频或截图,有图有真相]
IDE运行环境说明
HBuilderX]
[IDE版本号]
HBuilderX 1.3.2 20181214
[windows版本号]
window 7
联系方式
[QQ] 1149603879
0 个回复