vue+elementui 日期选择器

// 这个日期选择器的规则是开始的日期不能超过当天的日期
// 结束的日期不能超过开始的日期并且只能选开始日期选择的这一年的日期 结束的日期默认年份是开始日期选择的年份

在这里插入图片描述

 <el-form:model="DateTimeModel"ref="DateTimeRef":rules="DateTimeRules":inline="true"><el-form-item prop="beginTime"><el-date-pickerv-model="DateTimeModel.beginTime"value-format="yyyy-MM"type="month":picker-options="pickerOptionsone"placeholder="选择起始日期"@change="changeOptios"></el-date-picker></el-form-item><el-form-item><span class="centerZhi">至</span></el-form-item><el-form-item prop="endTime"><el-date-picker:default-value="startYearTime"v-model="DateTimeModel.endTime"value-format="yyyy-MM"type="month":picker-options="pickerOptions"placeholder="选择结束月份"@change="changeOptiosEnd"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="DateTimePrimary">确定</el-button></el-form-item></el-form>

在这里插入图片描述

pickerOptionsone: {disabledDate: (time) => {return time > Date.now();},},pickerOptions: {disabledDate: (time) => {let minYear = this.year;this.startYearTime = minYear;let man = this.DateTimeModel.beginTime;return (//   判断今天日期之后的日期不可选time > Date.now() ||//   判断只能选择第一个框年份的日期time.getTime() > new Date(minYear, 12, 0) ||// 判断第一个框选择的日期之前的不可以选择time.getTime() < new Date(man).setHours(0, 0, 0, 0));},},

在这里插入图片描述

 // 起始年份月份changeOptios(val) {this.year = val.split("-")[0];const month = val.split("-")[1];if (month < 10) {this.beginMonth = month.split("0")[1];} else {this.beginMonth = month;}},// 结束时间changeOptiosEnd(val) {const month = val.split("-")[1];if (month < 10) {this.endMonth = month.split("0")[1];} else {this.endMonth = month;}},

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/29401.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！