做运营必知网站,seo营销技巧,河南安阳市房价,wordpress速度优化插件需求#xff1a;
如图所示#xff0c;下图为新增的一个弹层页面#xff0c;同时有个需求#xff0c;日期选择需要限制一个月的时间范围#xff08;一月默认为30天#xff09;#xff1a; 查看官方文档我们需要主要使用到如下表格的一些东西#xff1a;
参数说明类型可…需求
如图所示下图为新增的一个弹层页面同时有个需求日期选择需要限制一个月的时间范围一月默认为30天 查看官方文档我们需要主要使用到如下表格的一些东西
参数说明类型可选值默认值shortcuts设置快捷选项需要传入 { text, onClick } 对象用法参考 demo 或下表Object[]——disabledDate设置禁用状态参数为当前日期要求返回 BooleanFunction——cellClassName设置日期的 classNameFunction(Date)——firstDayOfWeek周起始日Number1 到 77onPick选中日期后会执行的回调只有当 daterange 或 datetimerange 才生效Function({ maxDate, minDate })——
下方为使用的代码
el-col :span24el-form-item label选择日期 classdate_boxspan classreqicon*/spanel-date-pickerstylewidth: 300pxv-modeldatetypedaterangechangedatechange:picker-optionspickerOptions 此处增加value-formatyyyy-MM-ddrange-separator-start-placeholder开始日期end-placeholder结束日期/el-date-pickeri classel-icon-date data_icon/ispan classreqtitle v-showisreq请选择日期/span/el-form-item/el-col 在data中新增 data() {return {rules: {branchNo: [{required: true,message: 请选择平台仓库,trigger: change,},]},startPickerTime:,pickerOptions:{onPick:obj{this.startPickerTimenew Date(obj.minDate).getTime()},disabledDate:time{if(this.startPickerTime){const timeFrame24*3600*1000*30let minFramethis.startPickerTime-timeFramelet maxFramethis.startPickerTimetimeFramelet pickerTypetime.getTime()maxFrame||time.getTime()minFramereturn pickerType}}}};},
解释
1. startPickerTime: 为第一次选中的值
2.使用onPick回调函数选择第一次时间时触发上方的obj对象输出obj如下图 {minDate: 2023-12-31T16:00:00.000Z,maxDate: 2024-01-19T16:00:00.000Z} 3. 通过disabledDate设置某个时间范围是否禁用可选 timeFrame为时间范围我这为30天 minFrame为最小选中范围第一次选中时间-时间范围 maxFrame为最大选中的范围第二次选中时间-时间范围 pickerType为布尔值返回false或true 禁用--minFrame--timeFrame--maxFrame--禁用 设定范围为[minFramemaxFrame] 效果如下图所示
未选中 第一次选中
当前选中的时间为16号最大范围为2月15号范围外的时间已经禁用了 最小范围为上一年的12月17号 结束希望对大家有所帮助哦
