ant-design-vue ui 日期选择器(一)限制只能选择当前月份 以及 只能选择当前时间之前的时间
UI库:ant-design-vue ui
一、需求:限制只能选择当前月份的时间。默认展示当天。
html部分:
<a-range-picker :default-value="requestTime" format="YYYY-MM-DD" :disabled-date="disabledDate" @change="dateChange" style="width: 258px"> <a-icon slot="suffixIcon" type="calendar" /> </a-range-picker>
js部分:
设置当前时间:
import moment from 'moment'; let sevenDaysBefore = new Date(new Date().toLocaleDateString()).getTime(); export default { data() { return { requestTime: [moment(format(new Date(sevenDaysBefore)), 'YYYY-MM-DD'), moment(format(new Date()), 'YYYY-MM-DD')], } }, methods: { moment, disabledDate(current) { const yearStart = moment().startOf('month'); // 当前月份的第一天 const yearEnd = moment().endOf('month'); // 当前月份的最后一天 return yearStart > current || current >= yearEnd; }, dateChange(value) { if (value.length > 0) {this.data.requestBegTime = format(value[0]._d); // 获取到选中的时间赋值,然后通过点击事件调用接口 this.data.requestEndTime = format(value[1]._d); } else { this.data.requestBegTime = ''; this.data.requestEndTime = ''; } }, }, };
二、只能选择当前时间之前的时间。默认展示当天。
disabledDate(current) { const yearStart = moment().startOf('month'); const yearEnd = moment().endOf('day'); return current >= yearEnd; },