关于时间向前推算到天，并且算闰年的计算
直接上代码了，具体需求看项目要求
body里面的代码是这样的，用的是elementUI
这里是设计要求，但是你要是往前推就可以用这个，当然关于当前是日期是否禁选，你直接参考elementUI就好了
<el-row class="mt24">
<el-col :span="12">
<el-form-item
label="周期单位"
prop="periodUnit"
>
<el-select
v-model="ruleForm.periodUnit"
:placeholder="$t('Cyc.Pleaseselect')"
:disabled="action == 3 ? true : false"
class="w240"
@change="_dateChange('periodUnit', 1)"
>
<el-option
v-for="item in unitsList"
:key="item.id"
:label="item.dictName"
:value="item.dictCode"
></el-option>
</el-select>
</el-form-item>
</el-col>
<!--周期： -->
<el-col :span="12">
<el-form-item
label="-周期："
prop="periodNum"
>
<el-input
v-model.number="ruleForm.periodNum"
autocomplete="off"
class="w240"
:placeholder="$t('Cyc.Pleaseenter')"
maxlength="32"
:disabled="action == 3 ? true : false"
@blur="_period"
></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 上次巡视时间： -->
<el-col :span="12">
<el-form-item
label="上次巡视时间"
prop="prePatrolDate"
>
<el-date-picker
v-model="ruleForm.prePatrolDate"
align="right"
autocomplete="off"
class="w240"
:placeholder="$t('Cyc.PleaseselectprePatrolDate')"
maxlength="32"
style="width: 240px"
format="yyyy-MM-dd"
@change="getTimeaaa"
value-format="yyyy-MM-dd"
:type="timeType"
:disabled="action == 3 || iszhouqi ? true : false"
:picker-options="pickerOptions"
>
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
我们页面的要求是周期单位（月，日）跟上次巡视时间date有关系，
时间跟周期有关系。
js中
<script>
function getNewDate(many) {
let thirtyDays = [4, 6, 9, 11]; //30天的月份
let thirtyOneDays = [1, 3, 5, 7, 8, 10, 12]; //31天的月份
let currDate = new Date(); //今天日期
let dateMilli = 0; //时间戳
let year = currDate.getFullYear(); // 当前年
let month = currDate.getMonth() + 1; // 当前月
let targetDateMilli = 0; //目标日期时间戳
// let targetDays = ""; //目标日期
// let targetYear = ""; //目标年
// let targetMonth = ""; //目标月
// let targetDate = ""; //目标时间
// let dealTargetDays = ""; //处理格式目标日期
let isLeapYear =
(year % 4 == 0 && year % 100 != 0) || year % 400 == 0 ? true : false; //是否是闰年
let countDays = 0; //累计天数
for (let i = 0; i < many; i++) {
month--;
thirtyDays.includes(month)
? (countDays += 30)
: thirtyOneDays.includes(month)
? (countDays += 31)
: isLeapYear
? (countDays += 29)
: (countDays += 28);
}
dateMilli = currDate.getTime(); // //时间戳
targetDateMilli = dateMilli - countDays * 8.64e7;
return targetDateMilli;
}
export default {
name: "zqModel",
computed: {
pickerOptions() {
const _this = this;
return {
disabledDate(time) {
let nowDate = new Date().getTime(); //当前日期
if (_this.ruleForm.periodUnit == "MONTH") {
return (
time.getTime() > Date.now() - 24 * 60 * 60 * 1000 ||
time.getTime() <
getNewDate(_this.ruleForm.periodNum) - 24 * 60 * 60 * 1000
);
} else {
//天
let cycle = _this.ruleForm.periodNum * 24 * 3600 * 1000;
let diff = nowDate - cycle; //差值
return (
time.getTime() > Date.now() - 24 * 60 * 60 * 1000 ||
time.getTime() + 24 * 60 * 60 * 1000 < diff
);
}
}
};
}
},
watch: {
"ruleForm.periodNum"(periodNum) {
//如果状态action 1新增2修改3查看
if (this.action != "3") {
if (!this.isinit) {
//如果不是初始化的时候 日期为空
this.ruleForm.prePatrolDate = "";
}
this.isinit = false;
if (this.ruleForm.periodUnit == "" || periodNum == "") {
this.timeType = "";
} else {
this.timeType = "date";
}
}
},
action(val) {
this.ruleForm = {
periodUnit: "", //周期单位
periodNum: "", //--周期
prePatrolDate: "", // 上次巡视时间 应该是返回回来的
};
},
},
data() {
return {
ruleForm: {
periodUnit: "", //周期单位
periodNum: "", //--周期
prePatrolDate: "", // 上次巡视时间 应该是返回回来的
},
rules: {
periodUnit: [
{
required: true,
message: this.$t("phrase.Cannotempty"),
trigger: "blur"
}
],
periodNum: [
{
required: true,
validator: validateFloat,
trigger: "blur"
}
],
prePatrolDate: [
{
required: true,
message: this.$t("phrase.Cannotempty"),
trigger: "blur"
}
]
},
firstlist: [], //巡视类型
unitsList: [], //周期单位
timeType: "date", // 时间类型
};
},
created() {
console.log("ddddd");
this._getDates(); //获取字典表
},
methods: {
//巡视类型 返回的名字
_returnNames(id) {
let name;
this.firstlist.forEach(item => {
if (item.dictCode == id) {
name = item.dictName;
}
});
return name;
},
timeTypeFun(data) {
let date = new Date(data);
let Y = date.getFullYear();
let M = date.getMonth() + 1;
if (M < 10) {
M = "0" + M;
}
let D = date.getDate();
if (D < 10) {
D = "0" + D;
}
return `${Y}-${M}-${D}`;
},
// 周期改变
_period(val) {
console.log(val);
this.$refs["ruleForm"].clearValidate(val);
},
//点击 周期单位改变
_dateChange(newvalue, i) {
this.$refs["ruleForm"].clearValidate(newvalue);
if (i == 1) {
this.ruleForm.prePatrolDate = "";
}
if (this.ruleForm.periodNum != "") {
this.timeType = "date";
} else {
this.timeType = "";
}
},
_datewenen(val, e) {
this.$refs["ruleForm"].clearValidate(val);
},
// 字典获取
// // 周期单位 获取日月 时间类型
dictData({ root: "T_DICT_TIMETYPE" }).then(res => {
if (res.code == "SUCCESS") {
this.unitsList.push(res.data[1]); //月
this.unitsList.push(res.data[2]); //日
}
});
},
getTimeaaa() {
this.ruleForm = Object.assign({}, this.ruleForm);
},
// 获取详情
_getInfo(id) {
getlistInfo({ id: id }).then(res => {
if (res.code == "SUCCESS") {
console.log(res, "获取详情信息");
this.ruleForm.patrolType = res.data.patrolType; //类型
this.ruleForm.orgName = res.data.orgName; //
this.ruleForm.periodUnit = res.data.periodUnit; //单位
this.ruleForm.periodNum = res.data.periodNum; // 周期
this.ruleForm.prePatrolDate = res.data.prePatrolDate; //时间
this.ruleForm.workTextId = res.data.workTextId; //文本id 名称
this.ruleForm.patrolDeviceId = res.data.patrolDeviceId; //巡视设备id
this.ruleForm.userId = res.data.userId; //人员id
this.ruleForm.id = res.data.id;
this.chargeLists = res.data.userRealName; //负责人数据
this.chargeListSb = res.data.deviceName; //设备
this.ruleForm = Object.assign({}, this.ruleForm);
}
if (this.ruleForm.periodUnit != "" || this.ruleForm.periodNum != "") {
this.isinit = true;
}
});
},
// 取消
// 提交
submitForm(ruleForm) {
},
// 新增
_add() {
);
};
</script>