<el-date-picker v-model="rangeValue" type="daterange" value-format="yyyy-MM-dd" unlink-panels
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false" editable="false" :picker-options="pickerOptions" />
控制日期不能输入且为必填项
如果初始化显示时间
created() {
let end = new Date()
end = formateTimestamp(end.getTime())
const endTime = end.split(' ')
let start = new Date()
start = formateTimestamp(start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
const startTime = start.split(' ')
this.rangeValue = [startTime[0], endTime[0]]
}
// 将时间戳格式化
export function formateTimestamp(time) {
if (typeof (time) === 'undefined') {
return ''
}
var oDate = new Date(time)
var oYear = oDate.getFullYear()
var oMonth = oDate.getMonth() + 1
var oDay = oDate.getDate()
var oHour = oDate.getHours()
var oMin = oDate.getMinutes()
var oSen = oDate.getSeconds()
var oTime = oYear + '-' + getzf(oMonth) + '-' + getzf(oDay) + ' ' + getzf(oHour) + ':' + getzf(oMin) + ':' + getzf(oSen) // 最后拼接时间
return oTime
}
// 补0操作,当时间数据小于10的时候，给该数据前面加一个0
function getzf(num) {
if (parseInt(num) < 10) {
num = '0' + num
}
return num
}
快捷键
pickerOptions: {
shortcuts: [{
text: '最近三天',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 3
picker.$emit('pick', [start, end])
}
}, {
text: '最近一周',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30
picker.$emit('pick', [start, end])
}
}]
}
// 只能选择31天的范围
pickerRangeOptions: {
onPick: ({ maxDate, minDate }) => {
this.cuttentTime = minDate.getTime()
if (maxDate) {
this.cuttentTime = ''
}
},
disabledDate: (time) => {
if (this.cuttentTime !== '') {
const one = 30 *24 * 3600 * 1000
const minTime = this.cuttentTime - one
const maxTime = this.cuttentTime + one
return time.getTime() < minTime || time.getTime() > maxTime
}
}
}
// 不能跨月，且不是按天数
// 只能选择一个月的范围
pickerTrueOptions: {
onPick: ({ maxDate, minDate }) => {
this.selectedDate = minDate.getTime()
if (maxDate) {
this.selectedDate= ''
}
},
disabledDate: (time) => {
cosnt self = this
if (self.selectedDate) {
const startDay = (new Date(self.selectedDate).getDate() - 1) * 24 * 3600 * 1000
const endDay = (new Date(new Date(self.selectedDate).getFullYear(), new Date(self.selectedDate).getMonth() + 1, 0)
const minTime = self.selectedDate - startDay
const maxTime = self.selectedDate - endDay
return time.getTime() < minTime || time.getTime() > maxTime
}
}
}