基于vue3开发的移动版日历组件、支持阳历、农历

基于vue3.0开发的移动版日历组件,用于选择日期或日期区间
支持阳历、农历 节日、第三行状态文字

在写这个组件之前，有朋友问我，为什么ui框架里面有日历组件，你还要去写？究竟有什么意义？

其实意义非常大，首先不同的项目用的ui框架也会不一样，功能也会有些许差异，在功能不能满足你需求的情况下，是另外装一个ui框架？ 还是去改框架的源码？(ui框架装多了不仅代码容量大，也容易造成一定的冲突和混乱，改框架源码就意味着你不能再更新版本,在这个浮躁的社会！也不是每个人都能改的) 这些都不是优雅的解决方案。

这个时候这种独立且不基于任何ui框架的组件，就展现出了它的用武之地。

地址

npm install vue3-calendar -S or yarn add vue3-calendar 引入

import { createApp } from 'vue' import Calendar from "vue3-calendar"; import 'vue3-calendar/lib/vue3-calendar.css'; const app = createApp(App) app.use(Calendar) 选择单个日期

<div> <button @click="show=true">选择单个日期</button> {{date}} </div> <Calendar v-model:visible="show" @confirm="onConfirm" />

import { ref } from 'vue'; export default { setup() { const date = ref(''); const show = ref(false); const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`; const onConfirm = (value) => { date.value = formatDate(value); }; return { date, show, onConfirm, }; }, }; 选择多个日期

<div> <button @click="show=true">选择多个日期</button> {{date}} </div> <Calendar v-model:visible="show" type="multiple" max-range="3" @confirm="onConfirm" />

import { ref } from 'vue'; export default { setup() { const date = ref(''); const show = ref(false); const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`; const onConfirm = (value) => { let res = [] for(let i = 0;i<value.length;i++){ res.push(formatDate(value[i])) } date.value = res; }; return { date, show, onConfirm, }; }, }; 选择日期区间

<div> <button @click="show=true">选择日期区间</button> {{date}} </div> <Calendar v-model:visible="show" type="range" @confirm="onConfirm" />

import { ref } from 'vue'; export default { setup() { const date = ref(''); const show = ref(false); const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`; const onConfirm = (value) => { date.value = `${formatDate(value[0])} - ${formatDate(value[1])}`; }; return { date, show, onConfirm, }; }, }; Props

tips:
所有的日期对象只需要年月日(new Date(1990/10/22))，不需要时间，内部用时间戳对比大小
如果传了时间,日期就不是从0点开始了，这样就比较怪。