更新记录

1.1.0（2026-09-01） 下载此版本

• 组件重命名为 fg-date-picker（目录、文件、id 同步更新）
• 清理组件内非 props 注释，代码更精简
• 范围选择新增并排布局：开始/结束两个滚轮同时显示，无需切换（rangeLayout：side 默认 / tabs 可选）

平台兼容性

uni-app(4.87)

uni-app x(4.87)

其他

fg-date-picker 日期选择器

组件名：fg-date-picker（easycom 自动引入，也可手动引入） 版本：1.1.0

弹层式日期选择器组件，纯组件零依赖（不依赖任何第三方插件/组件），内置遮罩层与滚轮选择框，兼容 微信小程序、抖音小程序（字节跳动）、快手小程序，同时支持 H5 与 App（vue）。

特性

• 支持 5 种选择格式：年月日、年月、月、年、月日
• 支持 2 种返回类型：选择当前（单选）、选择范围（区间）
• 范围选择默认开始/结束两个滚轮并排同时显示，无需切换；也支持 tab 切换布局（rangeLayout）
• 自定义标题、标题颜色、按钮文字与颜色、主题色
• 自定义选择框样式（滚轮区域背景、圆角等）与弹窗面板样式
• 可设置可选范围（start / end）与默认选中值（defaultValue）
• 年份/月份/日期三列自动联动：2 月天数、大小月自动处理
• 提供 confirm（选择回调）、cancel、close（关闭回调）事件
• 中文显示文本与格式化值（YYYY-MM-DD 等）同时返回

快速使用

方式一：easycom 自动引入（推荐）

uni_modules 插件默认开启 easycom，页面中直接使用即可：

<fg-date-picker
    v-model:show="show"
    mode="date"
    type="current"
    title="请选择日期"
    @confirm="onConfirm"
    @close="onClose"
/>

方式二：手动引入

import FgDatePicker from '@/uni_modules/fg-date-picker/components/fg-date-picker/fg-date-picker.vue'
export default {
    components: { FgDatePicker }
}

属性说明

事件说明

返回值说明（confirm 事件）

type = current（选择当前）

{
    mode: 'date',        // 当前选择格式
    type: 'current',
    value: '2026-09-01', // 格式化值（date: YYYY-MM-DD / year-month: YYYY-MM / month: MM / year: YYYY / month-day: MM-DD）
    values: { year: 2026, month: 9, day: 1 }, // 数值对象
    text: '2026年9月1日'  // 中文显示文本
}

type = range（选择范围）

{
    mode: 'date',
    type: 'range',
    value: ['2026-09-01', '2026-09-30'], // [开始, 结束]（自动保证开始 <= 结束）
    values: [{ year: 2026, month: 9, day: 1 }, { year: 2026, month: 9, day: 30 }],
    text: '2026年9月1日 - 2026年9月30日'
}

示例

<template>
    <view>
        <button @tap="show = true">选择日期</button>
        <fg-date-picker
            v-model:show="show"
            mode="date"
            type="range"
            title="选择出行日期"
            start="2024-01-01"
            end="2030-12-31"
            :default-value="['2026-09-01', '2026-09-30']"
            @confirm="onConfirm"
            @close="onClose"
        />  </view>
</template>

<script>
export default {
    data() {
        return { show: false }
    },
    methods: {
        onConfirm(e) {
            console.log('选择结果：', e.value, e.text)
        },
        onClose(e) {
            console.log('关闭原因：', e.source)
        }
    }
}
</script>

注意事项

• month-day（月日）模式无年份，2 月按 29 天处理（兼容闰日）；范围模式下的月日区间按同一年内处理，如需跨年区间请使用 date 模式。
• 组件不依赖任何第三方插件，可直接打包上传至 DCloud 插件市场发布。
• 支持 Vue2 / Vue3，建议在微信开发者工具、抖音开发者工具、快手开发者工具中分别预览验证。