vue之ele中的时间组件，设置禁用的日期
只允许选择当月的最后一天和下月的第一天
转载于：链接: link.
<template>
<div class="container">
<el-date-picker
v-model="value"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
export default {
data () {
return {
value: {},
pickerOptions: {}
}
},
mounted () {
// 页面初始化时配置 pickerOptions
this.disabledDate()
},
methods: {
disabledDate () {
let now = new Date() //当前日期
// now.getFullYear() -- 当前年 now.getMonth() -- 当前月
let monthEndDate = new Date(now.getFullYear(), now.getMonth() + 1, 0) // 获取本月的结束日期
let timeEnd = Date.parse(monthEndDate)
// 设置某段日期的禁用状态
this.pickerOptions.disabledDate = time => (time.getTime() < timeEnd) || (time.getTime() > timeEnd + 60 * 60 * 24 * 1000)
}
}
}
只允许选择每一个月的最后一天
- :picker-options=“pickerOptionsFlag ? pickerOptions : {}”
<!-- 单选日期等 -->
<template>
<div class="xSelect_container">
<!-- :type="dataTpye" -->
<el-date-picker
class="xSelect_wrap"
:style="
labelWType == 1
? 'width: calc(100% - 100px)'
: 'width: calc(100% - 110px)'
"
style="height: '32px'"
v-model="value1"
value-format="yyyy-MM-dd"
@change="selectDate"
:placeholder="dataTpye == 'date' ? '选择日期' : '选择月份'"
:picker-options="pickerOptionsFlag ? pickerOptions : {}"
>
</el-date-picker>
<span
:style="labelWType == 1 ? 'width:100px' : 'width:110px'"
class="xSelect_label"
><span class="xSelect_check" v-show="isCheck"></span>
<span>{{ defaultConfig.title }}</span>
</span>
</div>
</template>
<script>
export default {
name: "SingleData",
components: {},
props: {
//给 label 设置宽度 默认94 类型2 为110
labelWType: {
type: Number,
default: 1,
},
defaultConfig: {
type: Object,
default: () => {},
},
isCheck: {
type: Boolean,
default: false,
},
dataTpye: {
type: String,
default: "date",
},
//当前 组件的title
titleType: {
type: String,
title: "",
},
pickerOptionsFlag: {
type: Boolean,
default:false
},
// 公告的 清除
commomClear: {
type: Boolean,
default: false,
},
},
data() {
return {
value1: "",
pickerOptions: {
disabledDate: (time) => {
let year = time.getFullYear();
let month = time.getMonth() + 1;
let newDate = new Date(year, month, 0);
return newDate.getDate() !== time.getDate();
},
},
};
},
watch: {
commomClear(val) {
// 担保额度查询 截止时间
if (val && this.titleType == "clearGLQdeadline") {
this.value1 = "";
this.$store.commit("clearGLQdeadline", false);
}
}
methods: {
selectDate() {
this.$emit("selectDate", this.value1);
},
},
};
</script>
<style lang="scss" scoped>
.xSelect_wrap {
overflow: hidden;
line-height: 32px;
height: 32px;
border: 1px solid #dcdfe6;
}
::v-deep .el-input__inner {
border: none;
margin-top: -10px;
}
::v-deep .el-input__icon {
margin-top: -5px;
}
</style>
<div class="odd_number">
<SingleData
:defaultConfig="dataDeadline"
:isCheck="true"
dataTpye="month"
titleType="clearBankCLQueryDataDeadline"
:commomClear="clearBankCLQueryDataDeadline"
@selectDate="dataDeadlineChange"
:pickerOptionsFlag="true"
/>
</div>
只允许选择的日期是，不超过今天的日期
- 假如今天为2021年7月23号，那么只能选择的日期为23号之前！
- pickerOptionsFlag 为判断标志，是否需要这个日期限制
<el-date-picker
v-model="scope.row[item.prop]"
type="date"
value-format="yyyy-MM-dd"
:placeholder="item.placeholder"
:picker-options="pickerOptionsFlag ? pickerOptions : {}"
>
</el-date-picker>
created() {
this.disabledDate(); // 格式化
},
methods: {
disabledDate () {
let now = new Date()
let monthEndDate = new Date(now.getFullYear(), now.getMonth() , now.getDate());
let timeEnd = Date.parse(monthEndDate)
// 设置当前时间截止日 必须小于日历组件的时间！
this.pickerOptions.disabledDate = time => ( time.getTime() > timeEnd )
},
}
根据后台返回的数据 显示对应的日期
<template>
<div style="height: 100%">
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期"
@change="changeData"
:picker-options="pickerOptions"
>
</el-date-picker>
</div>
</template>
<script>
export default {
name: "Test",
components: {},
data() {
let _this = this;
return {
pickerMaxDates: [
// 后台返回的是这种格式
"2021-09-30",
"2021-09-28",
"2021-09-07",
"2021-09-03",
"2021-09-01",
"2021-08-28",
],
pickerOptions: {
disabledDate(time) {
return (
_this.disabledEndDate(time)
);
},
},
value1: "",
};
},
methods: {
changeData(val) {
console.log("val", val);
},
dateFormat(dateData) {
var date = new Date(dateData)
var y = date.getFullYear()
var m = date.getMonth() + 1
m = m < 10 ? ('0' + m) : m
var d = date.getDate()
d = d < 10 ? ('0' + d) : d
const time = y + '-' + m + '-' + d
return time
},
// 设置日期禁用日期
disabledEndDate(time) {
let dateTime = this.dateFormat(time);
// console.log("time", time); // time -> Sun Aug 29 2021 00:00:00 GMT+0800 (中国标准时间)
let time2 = [];
for (let i = 0; i < this.pickerMaxDates.length; i++) {
time2.push(new Date(this.pickerMaxDates[i]).getTime());
}
// console.log("time2",time2); // [1632960000000, 1632787200000, 1630972800000, 1630627200000, 1630454400000, 1630108800000]
var t = new Date(dateTime).getTime(); // 当前面板里的时间戳
// console.log("t", t); // t 1630195200000
if (time2.indexOf(t) == -1) {
//disabledDate属性：true为禁用，false为可用 如果面板里的时间戳不包含在可选时间戳里面则禁用
return true;
}
},
},
};
</script>
<style lang="scss" scoped>
</style>
根据后台返回的数据 显示对应的年月的数据
<template>
<div style="height: 100%">
<el-date-picker
v-model="value"
type="month"
placeholder="选择日期"
@change="changeData"
:picker-options="pickerOptions"
>
</el-date-picker>
</div>
</template>
<script>
export default {
name: "Test",
components: {},
data() {
let _this = this;
return {
pickerMaxDates: [
// 后台返回的是这种格式
"2022-04",
"2022-02",
"2022-01",
"2021-09",
"2021-08",
"2021-06",
"2021-04",
"2021-02",
"2021-01",
"2020-10",
"2020-08",
"2020-05",
],
pickerOptions: {
disabledDate(time) {
return _this.disabledEndDate(time);
},
},
value: "",
};
},
methods: {
changeData(val) {
console.log("val", val);
},
dateFormat(dateData) {
var date = new Date(dateData);
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? "0" + m : m;
const time = y + "-" + m ;
return time;
},
// 设置日期禁用日期
disabledEndDate(time) {
let dateTime = this.dateFormat(time);
let time2 = [];
for (let i = 0; i < this.pickerMaxDates.length; i++) {
time2.push(new Date(this.pickerMaxDates[i]).getTime());
}
var t = new Date(dateTime).getTime(); // 当前面板里的时间戳
if (time2.indexOf(t) == -1) {
//disabledDate属性：true为禁用，false为可用 如果面板里的时间戳不包含在可选时间戳里面则禁用
return true;
}
},
},
};
</script>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
