使用vue写一个自定义可选时间的日历组件

最新推荐文章于 2025-02-20 00:00:02 发布

原创

最新推荐文章于 2025-02-20 00:00:02 发布 · 2.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue #js

本文介绍如何使用Vue.js构建一个具备特定功能的日历组件：禁止选择过去时间，可定制不可选日期，展示当前月并自动处理不可选时间。组件布局参照Win10日历，通过计算beginDay、prevMdays和nowMdays来实现日历展示。组件还包含active-day用于高亮选中日期，并提供timeArry属性接收自定义不可选日期。用户可通过点击选择日期，如果不在timeArry内则触发chooseDate事件，将选择结果传递给父组件。

日历功能：

过去时间不可选择
可自定义不可选时间
本月默认展示当天，其他月展示第一天，若为不可选时间，往后顺延
效果图：

-------下面开始表演------------
**首先，画出日历页面布局，参照win10系统日历布局*6行7列，为何如此，请自行理解…*本人也是偷窥来的

beginDay是当前月第一天的周几，prevMdays是上个月总天数，nowMdays是当月总天数，这样就实现了日历的展示效果，标签中绑入一些可能会用到的数据 data-dates等

<div class="dateContent-body-day" v-for="item in 42" :key="item">
            <div
              v-if="item - beginDay > 0 && item - beginDay <= nowMdays"
              :class="{
   
   
                'active-day': `${
     
     year}/${
     
     month}/${
     
     item - beginDay}` == curDate
              }"
              @click="dayHandler"
              :data-year="year"
              :data-month="month"
              :data-day="item - beginDay"
              :data-dates="year + '/' + month + '/' + (item - beginDay)"
            >
              {
   
   {
   
    item - beginDay }}
            </div>
            <div class="other-day" v-else-if="item - beginDay <= 0">
              {
   
   {
   
    item - beginDay + prevMdays }}
            </div>
            <div class="other-day" v-else>

最低0.47元/天解锁文章