使用el-date-picker 点击按钮实现前一天或后一天

前端小趴菜05

已于 2023-12-02 17:19:38 修改

阅读量952

点赞数 8

文章标签： vue.js 前端 javascript

于 2023-12-02 17:16:26 首次发布

本文链接：https://blog.csdn.net/m0_68716504/article/details/134754843

版权

在项目需求中需要我们实现点击增加日期一天或减少一天如下图：点击上按钮实现加一天下按钮实现减一天

代码试下 vue3为例

html 部分

<!-- 日期选择 -->
<div class="block">
  <el-date-picker v-model="date" type="date" placeholder="请选择时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
</div>
<!--  按钮 -->
<div class="upordown">
     <el-tooltip content="前一天" placement="top">
        <el-button type="primary" :icon="ArrowUpBold" @click="dateup" />
     </el-tooltip>
     <el-tooltip content="后一天" placement="top">
        <el-button type="primary" :icon="ArrowDownBold" @click="datedown" />
     </el-tooltip>
 </div>

js 逻辑部分

import dayjs from "dayjs"; //引入dayjs

const date: any = ref(dayjs().format("YYYY-MM-DD"))  //定义默认时间这里是当天

//点击上箭头日期加一天
const dateup = () => {
  date.value = dayjs(date.value).add(1, 'day').format("YYYY-MM-DD")
}

//点击下箭头日期加一天
const datedown = () => {
  date.value = dayjs(date.value).subtract(1, 'day').format("YYYY-MM-DD")
}