@aurouscia/vue-lunar-date-select

vue3公农双历日期选择器

由6个select标签组成的日期选择器组件，需要自定义样式和布局
第一组3个为公历年月日，第二组3个为农历年月日
两组select标签会互相联动，选择其中一个，另一个会自动选择对应的日期
例如：

（实际使用时并没有表头）

安装

npm install @aurouscia/vue-lunar-date-select

使用

<template>
    <div class="myContainer">
        <LunarDateSelect
            :range-from="[2000, 1, 1]"
            :range-to="'tomorrow'"
            :init="[2025, 6, 1]"
            @changed="changedHandler"
        ></LunarDateSelect>
    </div>
</template>

Props

• range-from 必填，日期选择器的最小可选公历日期
• range-to 必填，日期选择器的最大可选公历日期
• init 可选，初始化选中的公历日期，默认为当前日期

以上三个属性可为：

• 公历日期数组（长度为3），例如：[2025, 6, 1]
• 描述相对时间的三种字符串：
  • 'today'：当前日期
  • 'tomorrow'：明天
  • 'yesterday'：昨天
• 相对于当前日期的天数偏移量，例如：-1表示昨天，1表示明天
• Date对象
• tyme4ts的SolarDay对象

初始化不会触发@changedemit，但：
如果init超出range-from和range-to的范围，初始化时会被自动调整到最接近的日期同时触发emit输出矫正后的值

Emits

• @changed 可选，日期选择器值改变时触发的事件，返回值为当前选中的公历日期数组（长度为3），例如：[2025, 6, 1]

Expose

• initByProps() 调用后，使用当前的Props值重新初始化整个选择器（覆盖当前值）若改变了当前值，会触发emit
• getEmitData() 获取当前值，与@changed获取的相同

自定义样式

本组件不提供任何样式，需自定义样式布局请在外面套上容器，并编写非scopedstyle标签，例如：

.myContainer{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.myContainer>div{
    display: flex;
    flex-wrap: wrap;
}
.myContainer select{
    font-size: 18px;
    min-width: 80px;
}

其中.myContainer表示两组选择器外的容器
.myContainer>div表示每一组选择器本身的容器
.myContainer select表示每一个select标签

<template>
    <div class="myContainer">
        <LunarDateSelect></LunarDateSelect>
    </div>
</template>

将会变成：

<div class="myContainer">
    <div>
        <select></select>
        <select></select>
        <select></select>
    </div>
    <div>
        <select></select>
        <select></select>
        <select></select>
    </div>
</div>

依赖项

使用tyme4ts进行可选日期获取和公农历转换计算

反馈与建议

欢迎在gitee上提issue，我会及时更新

许可证

MIT