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

最新推荐文章于 2024-04-23 13:10:28 发布

左手吻左脸。

最新推荐文章于 2024-04-23 13:10:28 发布

阅读量479

点赞数 2

文章标签： java 开发语言

本文链接：https://blog.csdn.net/weixin_47194802/article/details/131101674

版权

在Vue3项目中，通过定义`prevDate`和`nextDate`方法来实现日期加减一天的功能，利用`newDate()`进行时间操作，并通过`transferTime`函数将日期转换为YYYY-MM-DD格式。按钮点击事件分别触发这些方法，更新`queryParams.date`模型值，展示前一天或后一天的日期。

摘要由CSDN通过智能技术生成

比如今天是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;
};