文档下载网站 建设,做cpa用什么网站,做网站的时候宽度都怎么弄,手工制作玩具这个需求是可以选择之后来计算,选择当前日期之后自动计算当前日期前后的十天以内的日期
如下图 就是19号前面十天的日期 以及后面十天的日期(包含当天) 需要用到elementUI
el-date-picker是Element UI库中的一个组件#xff0c;用于日期选择 el-date-picker v-model用于日期选择 el-date-picker v-modeltime stylewidth:350px classcustom-select sizemini :typedateTypesizesmall start-placeholder开始日期 end-placeholder结束日期 :value-formatdateFormat:picker-optionspickerOptions changetimeChane2 formatyyyy-MM-dd range-separator至value-formatyyyy-MM-dd clearable/el-date-picker
以下是需要的变量
data:{time: [],dateType: daterange,dateFormat: yyyy-MM-dd HH:mm:ss,choiceDate: null,//重点pickerOptions: {onPick: ({ maxDate, minDate }) {this.choiceDate minDate.getTime()if (maxDate) this.choiceDate },disabledDate: time {// 如何选择了一个日期if (this.choiceDate) {// 10天的时间戳const one 9 * 24 * 3600 * 1000// 当前日期 - one 10天之前const minTime this.choiceDate - one// 当前日期 one 10天之后const maxTime this.choiceDate onereturn (time.getTime() minTime ||time.getTime() maxTime ||// 限制不能选择今天及以后time.getTime() Date.now())} else {// 如果没有选择日期就要限制不能选择今天及以后return time.getTime() Date.now()}}},}v-modeltime表示双向绑定一个数组time用来保存日期选择器选择的时间。dateTypedaterange表示日期选择器的类型为日期范围选择即可以选择起始日期和结束日期。dateFormatyyyy-MM-dd HH:mm:ss表示日期的格式为年-月-日 时:分:秒。pickerOptions是一个自定义选项对象其中onPick函数会在用户选择日期范围时被调用这个函数会把最小日期minDate保存在choiceDate中同时如果有最大日期maxDate就会清空choiceDate。disabledDate是一个禁用日期的函数可以根据返回值来禁用某些日期。其中如果choiceDate存在则限制可以选择的日期为当前选择日期的前后10天以内并且不能选择今天及以后的日期。如果choiceDate不存在则只能禁用今天及以后的日期。
