vant显示日期格式_vant的日期控件(时间选择器)的使用

一

做移动端开发需要经常设置时间选择,因此做总结如下

具体页面样式

image.png

直接上代码

查询

export default {

name: 'logQuery',

data () {

return {

columns: [{

text: '登录操作',

type: 'A'

}, {

text: '账务交易',

type: 'B'

}, {

text: '明细查询',

type: 'C'

}, {

text: '其他操作',

type: 'D'

}],

showPicker: false,

minDate: new Date(2019, 0, 1),

maxDate: new Date(),

minDate1: new Date(2019, 0, 1),

maxDate1: new Date(),

currentDate: new Date(),

currentDate1: new Date(),

showPickerDate: false,

showPickerDate1: false,

logtype: '',

bgDate: '', // 查询时间

endDate: ''

}

},

watch: { // 使用时间选择器,需要配合watch监听选择时间值的变化,进而设置最小值和最大值

bgDate: function (val) {

if (val === '') {

return

}

let bgDate1 = new Date(val)

bgDate1.setMonth(bgDate1.getMonth() + 3)

let date = bgDate1.getFullYear() + '-' + (bgDate1.getMonth() + 1) + '-' + bgDate1.getDate()

this.minDate1 = new Date(val)

this.maxDate1 = new Date(date)

},

endDate: function (val) {

if (val === '') {

return

}

let bgDate2 = new Date(val)

bgDate2.setMonth(bgDate2.getMonth() - 3)

let date = bgDate2.getFullYear() + '-' + (bgDate2.getMonth() + 1) + '-' &#