关于时间向前推算到天,并且算闰年的计算

直接上代码了,具体需求看项目要求
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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值