vue3:实现点击前一天后一天的按钮,改变日期

 比如今天 是6.7号,点击前一天变成6.6号,以此类推....

我这个是一个vue3的项目,先用vue3呈现

      <div >
          <button @click="prevDate">前一天</button>

          <el-date-picker
            v-model="queryParams.date"
            type="date"
            value-format="YYYY-MM-DD"
            style="margin-left: 10px"
          />
          <button @click="nextDate" style="margin-left: 10px">后一天</button>
        </div>

具体实现部分

const queryParams = ref({
  date: "2023-06-07",
});

const prevDate = () => {
  //前一天
  let odata = new Date(
    new Date(queryParams.value.date).getTime() - 24 * 60 * 60 * 1000
  ); //计算当前日期 -1
  queryParams.value.date = transferTime(odata); 
  console.log("前一天", queryParams.value.date);
};
const nextDate = () => {
  //后一天
  let odata = new Date(
    new Date(queryParams.value.date).getTime() + 24 * 60 * 60 * 1000
  ); //计算当前日期 +1
  queryParams.value.date = transferTime(odata); 
  console.log("后一天", queryParams.value.date);
};
//转换时间格式
const transferTime = (date) => {
  var date = new Date(date);
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  var d = date.getDate();
  m = m < 10 ? "0" + m : m; 
  d = d < 10 ? "0" + d : d;
  return y + "-" + m + "-" + d;
};

这个就是最终效果

猜你喜欢

转载自blog.csdn.net/weixin_47194802/article/details/131101674