vant的时间选择器：
<van-popup:show="showPop"position="bottom"label="有效日期"custom-style="height: 50%;"@close="onCancel"><view v-if="showTwoTime"><van-datetime-pickertype="date":value="currentDate"@confirm="confirm1"@cancel="onCancel":min-date="minDate":formatter="formatter"/></view><view v-if="!showTwoTime"><van-datetime-pickertype="date":value="currentDate"@confirm="confirm2"@cancel="onCancel":min-date="minDate":formatter="formatter"/> </view></van-popup>
这里需要开始时间和结束时间：
提示：因此增加了showTwoTime的判定：
解决方案：
提示：这里是时间转换的方法：
confirm1(value) {this.plan.start_time = this.formatTime(value.detail, 'Y/M/D')this.showTwoTime = false},confirm2(value) {this.showPop = falsethis.plan.end_time = this.formatTime(value.detail, 'Y/M/D')this.showTwoTime = true},formatTime(date) {date = new Date(date)console.log(date)var year = date.getFullYear()var month = date.getMonth() + 1var day = date.getDate()return [year, month, day].map(this.formatNumber).join('/')},formatNumber(n) {n = n.toString()return n[1] ? n : '0' + n},
解决方案：
提示：全部方法：
<van-popup:show="showPop"position="bottom"label="有效日期"custom-style="height: 50%;"@close="onCancel"><view v-if="showTwoTime"><van-datetime-pickertype="date":value="currentDate"@confirm="confirm1"@cancel="onCancel":min-date="minDate":formatter="formatter"/></view><view v-if="!showTwoTime"><van-datetime-pickertype="date":value="currentDate"@confirm="confirm2"@cancel="onCancel":min-date="minDate":formatter="formatter"/> </view></van-popup>
//data的定义showPop: false,currentDate: new Date().getTime(),minDate: new Date().getTime(),showTwoTime: true,
//方法的定义changeFn() {this.changeDate = this.currentDate},confirm1(value) {this.plan.start_time = this.formatTime(value.detail, 'Y/M/D') ///'Y/M/D'为了提示自己时间格式this.showTwoTime = false},confirm2(value) {this.showPop = falsethis.plan.end_time = this.formatTime(value.detail, 'Y/M/D')this.showTwoTime = true},formatTime(date) {date = new Date(date) //从时间选择器中得到的时间格式为时间搓,因此需要转换为标准制式时间单位console.log(date) var year = date.getFullYear()var month = date.getMonth() + 1var day = date.getDate() //这里只表现到日,时,分,秒自习行添加方法!return [year, month, day].map(this.formatNumber).join('/') //转换为产品经理想要的展示形式},formatNumber(n) {n = n.toString()return n[1] ? n : '0' + n //加0操作!},formatter(type, value) {//展示的格式处理if (type === 'year') {return `${value}年`}if (type === 'month') {return `${value}月`}if (type === 'day') {return `${value}日`}return value},
展示效果
