更新记录

1.0.3（2024-07-15） 下载此版本

支持自定义公历/农历切换按钮是否展示及展示顺序

1.0.2（2024-07-15） 下载此版本

修复问题；

1.0.1（2024-07-15） 下载此版本

支持uni_modules

平台兼容性

nj-birthday-picker

本插件依赖于 js-calendar-converter.js

只支持vue3，使用最新的顶层语法编写；

部分平台兼容性为X是因为作者未使用该平台，所以未能验证；

uniapp 日期选择器

• 可选择年、月、日
• 可选择公历（阳历）农历（阴历）
• 支持自定义弹窗标题、主题色等

示例图

属性说明

完整示例

<template>
    <view class="page">
        <view class="form-item" @click="selectDate">
            <view class="form-title">生日</view>
            <input class="form-value" placeholder="请点击选择生日" v-model="date" :disabled="true" />
        </view>
        <view class="json">返回结果：</view>
        <view class="json">{{ JSON.stringify(dateObj) }}</view>
        <!-- 生日选择器 -->
        <datePicker ref="pickerRef" @submit="handleBirthdayDate" title="生日选择器" maskColor="rgba(0,0,0,0.3)"
            :defaultDate="defaultDate" :defaultLunar="defaultLunar" />
    </view>
</template>

<script>
    import datePicker from '/uni_modules/nj-birthday-picker/components/nj-birthday-picker/nj-birthday-picker.vue'

    export default {
        components: {
            datePicker,
        },
        data() {
            return {
                defaultDate: new Date(),
                defaultLunar: false,
                date: "",
                dateObj: {},
            }
        },
        onLoad() {

        },
        methods: {
            // 去选择生日
            selectDate() {
                this.$refs.pickerRef.show();
            },
            // 选择生日回调
            handleBirthdayDate(res) {
                this.dateObj = res;
                if (res.isLunar) {
                    this.date = res.lYear + res.gzYear + "年" + res.IMonthCn + res.IDayCn;
                } else {
                    this.date = res.date;
                }
            },
        }
    }
</script>

<style>
    .page {
        flex: 1;
        width: 100vw;
        padding: 20px;
    }

    .form-item {
        display: flex;
        align-items: center;
        height: 60px;
        flex-direction: row;
        border-bottom: 1px solid #eee;
    }

    .form-title {
        width: 60px;
        font-size: 18px;
        font-weight: normal;
        color: #333;
    }

    .form-value {
        flex: 1;
        font-size: 18px;
        font-weight: normal;
        color: #333;
    }

    .json {
        margin: 10px 10px;
    }
</style>

本插件基于 https://ext.dcloud.net.cn/plugin?id= 修改。