1、日期选择器不能跨年选择:
<el-date-picker v-model='timerange' :picker-options='rangeoption' type='daterange'
placement='bottom-end'
size='small'
:clearable="false"
style='width: 260px;' range-separator='至'
placeholder='请选择日期范围'
start-placeholder='开始日期'
end-placeholder='结束日期'
@change='changeBytime'>
</el-date-picker>
定义时:
choiceDate: '',
rangeoption: {
onPick: ({
maxDate,
minDate
}) => {
this.choiceDate = minDate.getTime()
if (maxDate) {
this.choiceDate = ''
}
},
disabledDate: (time) => {
const self = this
if (self.choiceDate) {
const selectDate = new Date(self.choiceDate)
const nowYear = selectDate.getFullYear() // 当前年
// 本年的开始时间
const yearStartDate = new Date(nowYear, 0, 1).getTime()
// 本年的结束时间
const yearEndDate = new Date(nowYear, 12, 0).getTime()
return (
time.getTime() < yearStartDate || time.getTime() > yearEndDate
)
}
}
},
2、默认显示当前月第一天到今天
created() {
let me=this;
let mydate = new Date();
me.searchParams.search.endtime = me.getTodaydate(mydate);
let lw = new Date(mydate - 1000 * 60 * 60 * 24 * 30);
me.searchParams.search.starttime = me.getTodaydate(lw);
me.$set(me.searchParams, 'timerange', [me.searchParams.search.starttime , me.searchParams.search.endtime])
},
getTodaydate (val) {
let endY = val.getFullYear();
let endM = val.getMonth() + 1;
let endD = val.getDate();
let enddate = endY + '-' + (endM < 10 ? '0' + endM : endM) + '-' + (endD < 10 ? '0' + endD : endD)
return enddate
},
<el-date-picker v-model="searchParams.timerange" :picker-options="rangeoption" type="daterange" placement="bottom-end"
style="width: 260px;"
clearable unlink-panels
range-separator="至" placeholder="请选择日期范围"
size='small'
>
</el-date-picker>
定义时:
rangeoption:{
//不能选择今天之后的日期
disabledDate (date) {
return date && date.valueOf() > Date.now() ;
}
},
3、年第一天到当前日期
<el-date-picker v-model='timerange' :picker-options='rangeoption' type='daterange'
placement='bottom-end'
size='small'
:clearable="false"
style='width: 260px;' range-separator='至' placeholder='请选择日期范围'
start-placeholder='开始日期'
end-placeholder='结束日期'
@change='changeBytime'>
</el-date-picker>
定义: timerange:[],
rangeoption: {
shortcuts: [
{
text: '近一周',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
picker.$emit('pick', [start, end])
}
},
{
text: '近两周',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 13)
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])
}
}
],
onPick: ({
maxDate,
minDate
}) => {
this.choiceDate = minDate.getTime()
if (maxDate) {
this.choiceDate = ''
}
},
disabledDate: (time) => {
const self = this
if (self.choiceDate) {
const selectDate = new Date(self.choiceDate)
const nowYear = selectDate.getFullYear() // 当前年
// 本年的开始时间
const yearStartDate = new Date(nowYear, 0, 1).getTime()
// 本年的结束时间
const yearEndDate = new Date(nowYear, 12, 0).getTime()
return (
time.getTime() < yearStartDate || time.getTime() > yearEndDate
)
}
}
},
changeBytime (val) {
let me = this
me.timerange = val
if (me.timerange !== null) {
me.searchParams.search.begindate = utils.formatDate(me.timerange[0], 'yyyy-MM-dd')
me.searchParams.search.enddate = utils.formatDate(me.timerange[1], 'yyyy-MM-dd')
} else {
me.searchParams.search.begindate = ''
me.searchParams.search.enddate = ''
}
},
created(){
const today = new Date();
const year = today.getFullYear();
this.timerange = [
`${year}-01-01`,
`${year}-${today.getMonth() + 1}-${today.getDate()}`
];
}