Vue3获取阴历/农历日期

安装插件

pnpm add chinese-lunar-calendar

引入阳历/阴历切换函数

import {getLunar} from 'chinese-lunar-calendar'

export function lunarDate(pDate){
    const year = pDate.getFullYear()
    const month = pDate.getMonth() +1
    const day = pDate.getDate()
    const result = getLunar(year,month,day)
    return result.dateStr
}

在这里插入图片描述

调用方法

const date = new Date()
const result = lunarDate(date)//十月廿十
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
手写Vue3日期选择器可以通过以下步骤实现: 1. 创建一个名为DatePicker的Vue组件。 2. 在组件中定义一个data属性,包含所需的日期数据,例如当前日期、选择的开始日期和结束日期。 3. 在模板中创建日期选择器的界面,包括一个日历表格和选择按钮。 4. 在方法中实现选择日期的逻辑。可以通过按钮点击事件或者直接在日历表格中选择日期来触发选择逻辑。在选择日期后,更新开始日期和结束日期的值。 5. 在组件中定义一个computed属性,用于计算并返回选择的日期范围。 6. 在模板中使用v-model指令将选择的日期范围绑定到父组件的数据上。 以下是一个简单的Vue3日期选择器的示例代码: ``` <template> <div> <input type="text" v-model="selectedRange" readonly> <button @click="showCalendar">选择日期</button> <div v-if="showCalendar"> <!-- 日历表格 --> </div> </div> </template> <script> import { ref, reactive, computed } from 'vue'; export default { setup() { // 数据初始化 const selectedRange = ref(''); const showCalendar = ref(false); const startDate = ref(null); const endDate = ref(null); // 显示日历 const showCalendar = () => { showCalendar.value = true; }; // 选择日期 const selectDate = (date) => { if (!startDate.value) { startDate.value = date; } else if (!endDate.value) { if (date > startDate.value) { endDate.value = date; } else { endDate.value = startDate.value; startDate.value = date; } } else { startDate.value = date; endDate.value = null; } }; // 计算选择的日期范围 const selectedRange = computed(() => { if (startDate.value && endDate.value) { return `${startDate.value} - ${endDate.value}`; } else if (startDate.value) { return startDate.value; } else { return ''; } }); return { selectedRange, showCalendar, selectDate }; } }; </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值