vue3-calendar

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

说明

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

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

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

独立灵活可以集成到任何项目里面；
轻量易修改如果需求不能满足，可以很轻易的二次开发。

Demo

地址

安装

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>
    
</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>
    
</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>
    
</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点开始了，这样就比较怪。

参数	说明	类型	默认值
visible	是否显示日历弹窗	boolean	false
type	选择类型(single单个日期,multiple多个日期,range日期区间)	string	single
minDate	可选择的最小日期	Date	当天日期
maxDate	可选择的最大日期	Date	当天日期往后延6个月
defaultDate	默认选中日期(type 为 multiple 或 range 时为数组，传入 null 表示默认不选择)	Date	今天日期
bottomFormatter	底部第三行文字配置(可以根据这个函数里面的date,type重新设置第三行文字)	({date,type})=>{}
allowSameDay	是否允许日期范围的起止时间为同一天	boolean	false
maxRange	日期区间或多选最多可选天数	Number, String
rangePrompt	区间选择超过最大值触发,默认用alert提示外部可以结合其他ui库提示	(n)=>{}
confirmText	底部按钮文字	String	确定
confirmDisabledText	底部按钮禁用文字	String	确定

Event

参数	说明	类型	默认值
confirm	选择日期后点击确定触发 type=single，参数是date type=multiple，参数是[date,date,…] type=range，参数是[date开始日期,date结束日期]	(date或[date])=>{}