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