|
由于开发过程中需要用到时间选择器，所以写了一个小插件。 先来看官方的文档： 官方文档  官方功能不完善，所以稍微改动一下；
{{showTime}}
{{placeholder}}
export default {
name: 'dy-Date-Picker',
props: {
timeType: {
type: String,
default: () => 'day'
},
disabled: {
type: Boolean,
default: () => false
},
// 是否显示图标
iconshow: {
type: Boolean,
default: () => true
},
placeholder: {
type: String,
default () {
return '请选择'
}
},
childValue: {
default () {
return ''
}
},
minSelect: {
type: String,
default: () => '1900/01/01'
},
maxSelect: {
type: String,
default: () => '2050/12/31'
}
},
data() {
return {
index: [0],
array: [],
yearArr: [], // 年份数组
monthArr: [], // 月份数组
yearIndex: 0, // 年份选中下标
dayArr:[0,1,2,3,4,5,6,7],//天数
hourArr:[[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24],[5,10,15,20,25,30,35,40,45,50,55]],
showTime: this.moment(this.childValue)
}
},
methods: {
moment(strTime) {
let type = this.timeType
if (!strTime) {
return
}
let value = 0;
if(type == 'tian'){
value = 0;
return value;
}else if (type == 'hour'){
value = 0;
return value;
}
let time = new Date(strTime)
let y = time.getFullYear();
let m = time.getMonth() + 1
m = m < 10 ? `0${m}` : m
let d = time.getDate()
d = d < 10 ? `0${d}` : d
let hh = time.getHours()
hh = hh < 10 ? `0${hh}` : hh
let mm = time.getMinutes()
mm = mm < 10 ? `0${mm}` : mm
let ss = time.getSeconds()
ss = ss < 10 ? `0${ss}` : ss
value = `${y}/${m}/${d} ${hh}:${mm}:${ss}`
if (type === 'year') {
value = `${y}`
}
if (type === 'month') {
value = `${y}-${m}`
}
if (type === 'day') {
value = `${y}-${m}-${d}`
}
return value
},
/**
* [setDefaultValue 设置默认值]
*/
setDefaultValue() {
let date = this.moment(new Date().getTime()) //获取当前时间；并展示
this.valueEchoed(date)
},
bindDateChange(e) {
this.childValue = e.target.value;
},
dateInit() {
let type = this.timeType;
if(type == 'tian'){
this.array[0] = this.dayArr;
return ;
}else if(type == 'hour'){
this.array = this.hourArr;
return ;
}
this.array = []
this.yearArr = []
this.monthArr = []
let minDate = this.moment(this.minSelect) || []
let maxDate = this.moment(this.maxSelect) || []
minDate = minDate ? minDate.split(' ') : ''
maxDate = maxDate ? maxDate.split(' ') : ''
minDate = minDate[0] ? minDate[0].split('-') : 1900
maxDate = maxDate[0] ? maxDate[0].split('-') : 2050
let {
monthStar,
monthEnd
} = ''
let yearStar = minDate[0] ? parseInt(minDate[0]) : 1900
let yearEnd = maxDate[0] ? parseInt(maxDate[0]) : 2050
if (type === 'day') {
let dateStar = minDate[2] ? parseInt(minDate[2]) : 1
let dateEnd = maxDate[2] ? parseInt(maxDate[2]) : 31
}
if (type === 'month' || type === 'day') {
monthStar = minDate[1] ? parseInt(minDate[1]) : 1
monthEnd = maxDate[1] ? parseInt(maxDate[1]) : 12
}
for (let y = yearStar; y |