更新记录

1.0.1（2026-08-12） 下载此版本

2026.08.12 更新

平台兼容性

uni-app(4.0)

calendar-popup 日历弹窗选择器

底部弹出式日历组件，支持单日选择与日期范围选择，适配 App、H5、各家小程序。

安装

将插件导入到 uni-app 项目后，目录为：

uni_modules/calendar-popup/

符合 easycom 规范，无需 import / 注册，页面中直接使用即可。

基础用法

单选日期

<template>
  <view>
    <view @click="show = true">{{ date || '请选择日期' }}</view>
    <calendar-popup
      :show.sync="show"
      v-model="date"
      title="选择日期"
      :monthRange="3"
      :yearBefore="0"
      :yearAfter="0"
      :allowBeforeToday="false"
      @confirm="onConfirm"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      date: '' // 选中后为 YYYY-MM-DD
    }
  },
  methods: {
    onConfirm(val) {
      console.log(val) // '2026-08-12'
    }
  }
}
</script>

范围选择（如入住 / 离店）

<template>
  <view>
    <view @click="show = true">
      {{ dateRange.length === 2 ? dateRange.join(' 至 ') : '请选择日期范围' }}
    </view>
    <calendar-popup
      :show.sync="show"
      v-model="dateRange"
      mode="range"
      title="选择日期范围"
      :monthRange="3"
      :yearBefore="1"
      :yearAfter="0"
      :allowBeforeToday="false"
      startLabel="入住"
      endLabel="离店"
      @confirm="onConfirm"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      dateRange: [] // 选中后为 [start, end]，格式均为 YYYY-MM-DD
    }
  },
  methods: {
    onConfirm(val) {
      console.log(val) // { start: '2026-08-12', end: '2026-08-15' }
    }
  }
}
</script>

Props

Events

注意事项

1. 日期统一为 YYYY-MM-DD。
2. 范围模式需选齐开始、结束两端后，才能点击确定。
3. 未传 minDate / maxDate 时，由 yearBefore、yearAfter、monthRange 共同决定可查看与可选范围。
4. allowBeforeToday 为 false 时，今天之前的日期不可选（仍可能看到对应月份格子）。