更新记录

1.0.2（2025-10-15） 下载此版本

实现月份与年份禁用的功能， 实现可传入年份范围来控制筛选的数据

1.0.1（2025-10-15） 下载此版本

1. 更新了一些样式问题例如月份，年份选择的排版
2. 实现年份选择时顶部展示

1.0.0（2025-10-11） 下载此版本

1.0.0 初始化版本

平台兼容性

uni-app(4.0)

其他

Calendar Picker 日历选择器

功能强大的跨端日历选择器组件，支持单日、多日、范围、周、月、年多种选择模式，提供丰富的自定义选项。

功能特点

✨ 多模式选择：支持单日、多日、范围、周、月、年选择模式 ✨ 弹窗位置控制：支持底部固定和跟随触发元素两种弹窗位置 ✨ 高度自定义：提供丰富的插槽和样式自定义选项 ✨ 跨平台兼容：支持 H5、小程序、App 等多端运行 ✨ 类型丰富：支持日期标记、禁用日期、最小/最大日期限制

安装方式

方式一：通过 uni_modules 安装（推荐）

1. 在 uni-app 插件市场找到本插件
2. 点击右侧「使用 HBuilderX 导入插件」
3. 在项目中使用组件

方式二：手动安装

将 uni_modules/df-calendar-picker 目录拷贝到项目的 uni_modules 目录下。

基本使用

底部弹窗模式

<template>
  <view class="container">
    <df-calendar-picker 
      v-model="selectedDate"
      position="bottom"
      :show="showCalendar"
      @confirm="onConfirm"
      @cancel="onCancel">
      <template #trigger>
        <view class="trigger-btn">
          <text>{{ selectedDate || '选择日期' }}</text>
        </view>
      </template>
    </df-calendar-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null,
      showCalendar: false
    }
  },
  methods: {
    onConfirm(date) {
      console.log('选择的日期:', date)
      this.selectedDate = date
      this.showCalendar = false
    },
    onCancel() {
      this.showCalendar = false
    }
  }
}
</script>

<style>
.trigger-btn {
  padding: 20rpx 40rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  background: #fff;
}
</style>

跟随触发元素模式

<template>
  <view class="container">
    <df-calendar-picker 
      v-model="selectedDate"
      position="trigger"
      :show="showCalendar"
      :trigger-rect="triggerRect"
      @confirm="onConfirm">
      <template #trigger>
        <view class="trigger-btn" @click="getTriggerRect">
          <text>{{ selectedDate || '选择日期' }}</text>
        </view>
      </template>
    </df-calendar-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null,
      showCalendar: false,
      triggerRect: {}
    }
  },
  methods: {
    getTriggerRect() {
      const query = uni.createSelectorQuery().in(this)
      query.select('.trigger-btn').boundingClientRect(data => {
        this.triggerRect = data
        this.showCalendar = true
      }).exec()
    },
    onConfirm(date) {
      this.selectedDate = date
      this.showCalendar = false
    }
  }
}
</script>

属性说明

事件说明

插槽说明

默认插槽

日期单元格插槽

<template #date-cell="{ date, selected, inRange }">
  <view class="custom-date-cell" :class="{ selected, 'in-range': inRange }">
    <text class="date-number">{{ date.getDate() }}</text>
    <view v-if="isSpecialDate(date)" class="special-marker"></view>
  </view>
</template>

周单元格插槽

<template #week-cell="{ week, selected, current }">
  <view class="custom-week-cell" :class="{ selected, current }">
    <text class="week-text">{{ getWeekDisplayText(week) }}</text>
    <text class="range-text">{{ formatWeekRange(week) }}</text>
  </view>
</template>

月单元格插槽

<template #month-cell="{ month, selected, current }">
  <view class="custom-month-cell" :class="{ selected, current }">
    <text class="month-text">{{ month }}月</text>
  </view>
</template>

年单元格插槽

<template #year-cell="{ year, selected, current }">
  <view class="custom-year-cell" :class="{ selected, current }">
    <text class="year-text">{{ year }}</text>
  </view>
</template>

使用示例

单日选择模式

<df-calendar-picker 
  v-model="singleDate"
  mode="single"
  position="bottom"
  :show="showSingleCalendar"
  @confirm="onSingleConfirm">
</df-calendar-picker>

多日选择模式

<df-calendar-picker 
  v-model="multipleDates"
  mode="multiple"
  :max-date="maxDate"
  @confirm="onMultipleConfirm">
</df-calendar-picker>

日期范围选择

<df-calendar-picker 
  v-model="dateRange"
  mode="range"
  :min-date="minDate"
  :marked-dates="markedDates"
  @confirm="onRangeConfirm">
</df-calendar-picker>

周选择模式

<df-calendar-picker 
  v-model="weekRange"
  mode="week"
  week-calculation="month"
  @confirm="onWeekConfirm">
</df-calendar-picker>

月选择模式

<df-calendar-picker 
  v-model="monthRange"
  mode="month"
  :show-mode-selector="false"
  @confirm="onMonthConfirm">
</df-calendar-picker>

年选择模式

<df-calendar-picker 
  v-model="yearRange"
  mode="year"
  @confirm="onYearConfirm">
</df-calendar-picker>

自定义日期格式

<df-calendar-picker 
  v-model="selectedDate"
  :date-format="'YYYY年MM月DD日'"
  :format-function="customFormat"
  @confirm="onConfirm">
</df-calendar-picker>

<script>
export default {
  methods: {
    customFormat(date) {
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      return `${year}年${month}月${day}日`
    }
  }
}
</script>

特殊日期标记

<df-calendar-picker 
  v-model="selectedDate"
  :marked-dates="markedDates"
  :disabled-dates="disabledDates">
</df-calendar-picker>

<script>
export default {
  data() {
    return {
      markedDates: [
        new Date('2024-10-01'),
        new Date('2024-10-15'),
        new Date('2024-10-20')
      ],
      disabledDates: [
        new Date('2024-10-05'),
        new Date('2024-10-06')
      ]
    }
  }
}
</script>

禁用年，月， 以及筛选年范围

 <df-calendar-picker
      :disabledMonths="[1, 2, 3]"        <!-- 禁用1月、2月、3月 -->
      :disabledYears="[2020, 2021]"      <!-- 禁用2020、2021年 -->
      :yearRange="{ start: 2010, end: 2030 }" <!-- 只允许选择2010-2030年 -->
      :minDate="new Date('2023-01-01')"
      :maxDate="new Date('2025-12-31')"
    />

自定义可用模式

<df-calendar-picker 
  v-model="selectedDate"
  :available-modes="availableModes"
  @mode-change="onModeChange">
</df-calendar-picker>

<script>
export default {
  data() {
    return {
      availableModes: [
        { label: '单日', value: 'single' },
        { label: '范围', value: 'range' },
        { label: '周', value: 'week' }
      ]
    }
  },
  methods: {
    onModeChange(mode) {
      console.log('切换模式:', mode)
    }
  }
}
</script>

样式自定义

自定义主题色

/* 在 App.vue 或页面样式中覆盖 CSS 变量 */
:root {
  --calendar-primary: #007aff;      /* 主色调 */
  --calendar-bg: #fff;              /* 背景色 */
  --calendar-text: #333;            /* 文字色 */
  --calendar-border: #eee;          /* 边框色 */
  --calendar-disabled: #ccc;        /* 禁用色 */
}

.calendar-container {
  /* 组件容器样式 */
}

.date-cell.selected .default-date-cell {
  background-color: var(--calendar-primary);
}

.mode-item.active {
  background-color: var(--calendar-primary);
}

.action-btn.confirm {
  background-color: var(--calendar-primary);
}

完全自定义样式

<df-calendar-picker 
  v-model="selectedDate"
  custom-class="my-calendar"
  @confirm="onConfirm">
  <template #date-cell="{ date, selected, inRange }">
    <view class="my-date-cell" :class="{ selected, 'in-range': inRange }">
      <text class="my-date-number">{{ date.getDate() }}</text>
      <view v-if="hasEvent(date)" class="my-event-dot"></view>
    </view>
  </template>
</df-calendar-picker>

<style>
.my-calendar .calendar-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 16rpx 16rpx 0 0;
}

.my-date-cell {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.my-date-cell.selected {
  background: #667eea;
  color: white;
}

.my-date-cell.in-range {
  background: rgba(102, 126, 234, 0.1);
}

.my-event-dot {
  position: absolute;
  bottom: 8rpx;
  width: 8rpx;
  height: 8rpx;
  border-radius: 50%;
  background: #ff6b6b;
}
</style>

方法说明

外部控制方法

通过 ref 调用组件内部方法：

<df-calendar-picker ref="calendarRef"></df-calendar-picker>

<script>
export default {
  methods: {
    openCalendar() {
      this.$refs.calendarRef.openCalendar()
    },
    closeCalendar() {
      this.$refs.calendarRef.closeCalendar()
    },
    setDate(date) {
      this.$refs.calendarRef.parseValue(date)
    }
  }
}
</script>

注意事项

1. 平台兼容性：组件已测试兼容 H5、微信小程序、App，其他小程序平台请自行测试
2. 日期格式：传入的日期字符串需符合标准格式，建议使用 YYYY-MM-DD
3. 性能优化：多日选择模式下选择大量日期时可能影响性能，建议合理设置最大选择数量
4. 样式覆盖：自定义样式时注意选择器权重，必要时使用 !important

更新日志

v1.0.0

• ✨ 初始版本发布
• ✨ 支持 6 种选择模式
• ✨ 支持 2 种弹窗位置
• ✨ 提供丰富的自定义选项

技术支持

如果在使用过程中遇到问题，可以通过以下方式获取帮助：

1. 查看 uni-app 插件市场页面中的常见问题
2. 在插件评论区留言
3. 联系开发者获取技术支持

License

MIT License