使用html
<Dropdown
trigger="custom"
:visible="isdrop"
@on-clickoutside="isdrop = false"
>
<div href="javascript:void(0)">
<input
type="text"
autocomplete="off"
spellcheck="false"
:placeholder="
$t('lang.components_RightCard_mapPlot.msg_618')
"
number="false"
v-model="formItem.cpTime"
class="
ivu-input ivu-input-default ivu-input-with-suffix
inputWidth
"
@focus="onfocus()"
/>
</div>
<template #list>
<xun
:value="[legendItem.startTime]"
:disableList="[
legendItem.product.startDate,
legendItem.product.endDate,
]"
@handleChangeXun="handleChangeXun"
></xun>
</template>
</Dropdown>:value 是默认展示的值
:disableList 是可以展示的区间
handleChangeXun 是回调的方法
引用方法
components: {
xun: () => import("./xunSimple.vue"),
},点击后的回调方法
handleChangeXun(v, inputVal) {
console.log(v, inputVal)
},xun.vue
<template #list>
<div class="schedule">
<div
class="ivu-picker-panel-body-wrapper"
visible="false"
steps=""
split-panels="false"
>
<div class="ivu-picker-panel-body">
<div class="ivu-date-picker-header">
<span
class="
ivu-picker-panel-icon-btn
ivu-date-picker-prev-btn
ivu-date-picker-prev-btn-arrow-double
"
@click="reduceYear"
><i class="ivu-icon ivu-icon-ios-arrow-back"></i
></span>
<span
><span class="ivu-date-picker-header-label"
>{
{ year
}}{
{ $t("lang.components_TopCard_UserInfomation.msg_32") }}</span
>
<span class="ivu-date-picker-header-label" v-show="month"
>{
{ month
}}{
{ $t("lang.components_TopCard_UserInfomation.msg_33") }}</span
></span
><span
class="
ivu-picker-panel-icon-btn
ivu-date-picker-next-btn
ivu-date-picker-next-btn-arrow-double
"
@click="addYear"
><i class="ivu-icon ivu-icon-ios-arrow-forward"></i
></span>
</div>
<div class="ivu-picker-panel-content">
<div
class="ivu-date-picker-cells ivu-date-picker-cells-month"
show-week-numbers="false"
>
<span
class="ivu-date-picker-cells-cell"
v-for="item in 12"
:key="item"
@click="getMonth(item, getMonthClass(item))"
:class="getMonthClass(item)"
><em
>{
{ item
}}{
{ $t("lang.components_TopCard_UserInfomation.msg_33") }}</em
></span
>
</div>
<div class="xunBottom">
<span
v-for="item in 3"
:key="item"
@click="clickXun(item, getXunClass(item))"
:class="getXunClass(item)"
>{
{
item == 1
? $t("lang.components_RightCard_mapPlot.msg_622")
: item == 2
? $t("lang.components_RightCard_mapPlot.msg_623")
: $t("lang.components_RightCard_mapPlot.msg_624")
}}</span
>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
dayjs.extend(utc);
dayjs.extend(timezone);
export default {
name: "xunSimple",
data() {
return {
year: null,
month: null,
dates: null,
xun: null,
inputStart: "",
StartDate: "",
};
},
props: {
value: {
type: Array,
default: () => [],
},
disableList: {
type: Array,
default: () => [],
},
},
watch: {
StartDate: {
handler(v) {
this.CheckArr();
},
},
},
created() {},
methods: {
// 获取旬区间
getCurrentMonthLast(y, m, i) {
let firstDay, lastDay;
if (i == 1) {
firstDay = new Date(y, m - 1, 1);
lastDay = new Date(y, m - 1, 10);
} else if (i == 2) {
firstDay = new Date(y, m - 1, 11);
lastDay = new Date(y, m - 1, 20);
} else {
firstDay = new Date(y, m - 1, 21);
lastDay = new Date(y, m, 0);
}
let timeZone = "Asia/Shanghai";
let arr = [
dayjs.tz(firstDay, timeZone).format("YYYY-MM-DD"),
dayjs.tz(lastDay, timeZone).format("YYYY-MM-DD"),
];
let inputValue =
y +
this.$t("lang.components_TopCard_UserInfomation.msg_32") +
m +
this.$t("lang.components_TopCard_UserInfomation.msg_33") +
(i == 1
? this.$t("lang.components_RightCard_mapPlot.msg_622")
: i == 2
? this.$t("lang.components_RightCard_mapPlot.msg_623")
: this.$t("lang.components_RightCard_mapPlot.msg_624"));
return {
arr: arr,
inputValue: inputValue,
};
},
// 获取时间区间和input值
getXunDate(value) {
let date = value ? new Date(value) : new Date();
this.year = date.getFullYear();
this.month = date.getMonth() + 1;
this.dates = date.getDate();
if (this.dates > 0 && this.dates <= 10) {
this.xun = "1";
} else if (this.dates > 10 && this.dates <= 20) {
this.xun = "2";
} else {
this.xun = "3";
}
let Value = this.getCurrentMonthLast(this.year, this.month, this.xun).arr;
let inputVal =
this.year +
this.$t("lang.components_TopCard_UserInfomation.msg_32") +
this.month +
this.$t("lang.components_TopCard_UserInfomation.msg_33") +
(this.xun == 1
? this.$t("lang.components_RightCard_mapPlot.msg_622")
: this.xun == 2
? this.$t("lang.components_RightCard_mapPlot.msg_623")
: this.$t("lang.components_RightCard_mapPlot.msg_624"));
return {
inputVal: inputVal,
xun: Value,
};
},
CheckArr() {
if (this.StartDate.length == 2) {
this.$emit("handleChangeXun", this.StartDate, this.inputStart);
}
},
addYear() {
this.year = this.year + 1;
},
reduceYear() {
this.year = this.year - 1;
},
getMonth(v, type) {
if (type !== "ivu-date-picker-cells-cell-disabled") {
this.month = v;
this.xun = null;
}
},
clickXun(v, type) {
if (type !== "xunBottom-disable") {
this.xun = v;
if (this.year && this.month && this.xun) {
let obj = this.getCurrentMonthLast(this.year, this.month, this.xun);
let inputVal = obj.inputValue;
let arr = obj.arr;
this.StartDate = arr;
this.inputStart = inputVal;
}
}
},
getMonthClass(index) {
if (this.year) {
let isDisable = this.checkDateInDateArr(
this.disableList[0] ? this.disableList[0].substr(0, 7) : "",
this.disableList[1] ? this.disableList[1].substr(0, 7) : "",
this.year + "-" + index
);
if (isDisable) {
return "ivu-date-picker-cells-cell-disabled";
} else {
if (this.month == index) {
return "ivu-date-picker-cells-cell-selected";
} else {
return "ivu-date-picker-cells-cell";
}
}
}
},
getXunClass(index) {
if (this.year) {
let isDisable = this.checkDateInDateArr(
this.disableList[0] ? this.disableList[0].substr(0, 7) : "",
this.disableList[1] ? this.disableList[1].substr(0, 7) : "",
this.year + "-" + this.month
);
if (isDisable) {
return "xunBottom-disable";
} else {
let _isDisable = false;
let startDate = this.disableList[0]
? new Date(this.disableList[0])
: "";
let endDate = this.disableList[1]
? new Date(this.disableList[1])
: "";
if (startDate) {
if (
startDate.getMonth() + 1 == this.month &&
startDate.getFullYear() == this.year
) {
let dates = startDate.getDate();
if (index == 1 && dates > 10) {
_isDisable = true;
} else if (index == 2 && dates > 20) {
_isDisable = true;
}
}
}
if (endDate) {
if (
endDate.getMonth() + 1 == this.month &&
endDate.getFullYear() == this.year
) {
let dates = endDate.getDate();
if (index == 3 && dates < 21) {
_isDisable = true;
} else if (index == 2 && dates < 11) {
_isDisable = true;
}
}
}
if (_isDisable) {
return "xunBottom-disable";
} else {
if (this.xun == index) {
return "xunBottom-selected";
} else {
return "xunBottom-cell";
}
}
}
}
},
checkDateInDateArr(startDate = "", endDate = "", checkDate = "") {
let _startDate = startDate ? new Date(startDate.replace(/\-/g, "/")) : "";
let _endDate = endDate ? new Date(endDate.replace(/\-/g, "/")) : "";
let _checkDate = checkDate ? new Date(checkDate.replace(/\-/g, "/")) : "";
let isDisable = false;
if (startDate && endDate) {
if (_checkDate >= _startDate && _checkDate <= _endDate) {
isDisable = false;
} else {
isDisable = true;
}
} else if (startDate && !endDate) {
if (_checkDate >= _startDate) {
isDisable = false;
} else {
isDisable = true;
}
} else if (!startDate && endDate) {
if (_checkDate <= _endDate) {
isDisable = false;
} else {
isDisable = true;
}
}
return isDisable;
},
},
mounted() {
setTimeout(() => {
let start = this.value[0]
? this.getXunDate(this.value[0])
: this.getXunDate();
this.StartDate = start.xun;
this.inputStart = start.inputVal;
});
},
};
</script>
<style scoped>
.schedule {
width: 100%;
}
.xunBottom {
display: flex;
justify-content: space-around;
padding: 8px 7px 10px;
border-top: 1px solid #e8eaec;
font-size: 14px;
cursor: pointer;
}
.xunBottom-selected {
background: #2d8cf0;
color: #fff;
padding: 5px;
border-radius: 3px;
}
.xunBottom-cell {
padding: 5px;
border-radius: 3px;
}
.xunBottom-disable {
background: #f7f7f7;
color: #c5c8ce;
padding: 5px;
border-radius: 3px;
}
.xunBottom-cell:hover {
background: #e1f0fe;
padding: 5px;
border-radius: 3px;
}
.inputStyle {
border: none;
width: 40%;
text-align: center;
}
.inputStyle:focus-visible {
outline: 0;
}
</style>