饿了么日历自定义日期和内容和上下月按钮

最新推荐文章于 2024-08-16 14:55:40 发布

Tfishupupup

最新推荐文章于 2024-08-16 14:55:40 发布

阅读量1.6k

点赞数 1

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/tfishupupup/article/details/123372490

版权

本文介绍了如何在Vue.js应用中使用ElementUI自定义日历组件，包括隐藏原生按钮并添加自定义头部，包含日期选择器和上下月跳转功能。通过设置数据属性value来同步日期选择器与日历的日期，并分享了JavaScript计算上一个月和下一个月的函数，以及毫秒转标准时间的方法，实现灵活的日历导航和显示自定义内容。

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

<div class="left">
        <div class="control">
          <button class="prevm" @click="prevMonth(value)"></button>
          <el-date-picker v-model="value" type="date" :placeholder="'value'">
          </el-date-picker>
          <button class="nextm" @click="nextMonth(value)"></button>
        </div>
        <el-calendar v-model="value" id="calendar">
          <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
          <template slot="dateCell" slot-scope="{ data }">
            <p>
              <!--这里原本有动态绑定的class，去掉-->
              {
  { data.day.split("-").slice(2).join("") }}
            </p>
            <span>{
  { dealMyDate(data.day) }}</span>
          &