Vue3: Realize clicking the button of the previous day and the next day to change the date

 For example, today is 6.7, and the day before clicking becomes 6.6, and so on....

This is a vue3 project, first presented with 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>

Concrete implementation part

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;
};

This is the final effect

 

Guess you like

Origin blog.csdn.net/weixin_47194802/article/details/131101674