<el-date-picker v-model="downloadFrom.times" type="datetimerange" :picker-options="pickerDates" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" style="width: 100%;"> </el-date-picker>
基础的暂且不提。这个干啥的大家应该都知道。
1.自定义快捷选中日期:
data -- return中配置
pickerDates: { shortcuts: [ { text: '今日', onClick(picker) { const end = new Date(); const start = new Date(); picker.$emit('pick', [start.setHours(0, 0, 0, 0), end]); } }, { text: '近三日', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 2); picker.$emit('pick', [start.setHours(0, 0, 0, 0), end]); } }, { text: '近一周', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 6); picker.$emit('pick', [start.setHours(0, 0, 0, 0), end]); } }, { text: '近一个月', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 29); picker.$emit('pick', [start.setHours(0, 0, 0, 0), end]); } }, { text: '近三个月', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 89); picker.$emit('pick', [start.setHours(0, 0, 0, 0), end]); } }, { text: '近半年', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 182); picker.$emit('pick', [start.setHours(0, 0, 0, 0), end]); } } ] }
2.如果只是要求不能选中今日之后的日期的话
pickerDates: { //日期禁止选择今天之后的 disabledDate(time) { return time.getTime() > Date.now() - 8.64e7; }, },