vue-day-calendar 上线啦 🥳🥳

简介

提到日期选择器，大家可能会想到组件库的DatePicker，然而DatePicker通常是Input+Calendar的组合，虽然这适合大多数表单场景，但如果只想展示一个Calendar呢？

vue-day-calendar就是为了解决这个问题而生的。具体可查看文档

ps: 如果说这个组件vue的社区上早就实现了，那就当造个轮子吧 🤣🤣

✨ 特性

• 国际化多语言
• 高度可定制化样式，支持 tailwindcsss 和 unocss
• 使用 dayjs 作为日期库
• 以选择日期为主的日历组件

VS Vue datepicker

在vue-day-calendar之前，我使用过vue-datepicker，它是一个非常优秀的组件库，集成了很多开箱即用的功能，并且它也支持显示Calendar模式，不过如果只用Calendar模式我觉得它太过庞大并且不够纯粹，自由度不高，正应如此，vue-day-calendar诞生了，保持了Calendar的纯粹、无污染的组件。

其实这里还是推荐你们去用vue-datepicker，相对而言，它更加全面，功能更加丰富，懒人首选。

VS React DayPicker

React有着丰富的组件生态，vue-day-calendar的灵感则来源于React DayPicker,有着简约耐看的设计外观且样式高度可定制化，里面的每个组件都可以实现定制化，这对于使用者来说可玩性很高，正因如此，vue-day-calendar借鉴了很多想法。

快速上手

安装

pnpm add vue-day-calendar dayjs

用法

<script setup lang="ts">
  import 'vue-day-calendar/style.css'
  import VueDayCalendar from 'vue-day-calendar'
</script>

<template>
  <VueDayCalendar class="w-250px"/>
</template>

之后你就能得到这样一个效果：

为什么上面需要加宽度呢，因为组件默认是flex布局的，宽度默认跟父节点一样。如果说你想要效果跟最上面的简介图一样，你需要这样写

<script setup lang="ts">
  import dayjs from 'dayjs'

  import 'vue-day-calendar/style.css'
  import VueDayCalendar from 'vue-day-calendar'

  const yearAndMonthDate = dayjs().format('YYYY-MM')
  const selected = ref(`${yearAndMonthDate}-24`)

  const vueDayCalendarRef = ref<InstanceType<typeof VueDayCalendar>>()

  function goToToday() {
    vueDayCalendarRef.value?.goToToday()
  }
</script>

<template>
  <VueDayCalendar ref="vueDayCalendarRef" v-model="selected">
    <template #footer>
      <div class="w-230px">
        <p class="my-2">
          You picked {{ selected }}
        </p>
        <button 
          class="bg-gray-100 hover:bg-gray-200 px-2.5 py-1 rounded-md" 
          @click="goToToday"
        >
          Go to Today
        </button>
      </div>
    </template>
  </VueDayCalendar>
</template>

这样就能得到这样的效果：

基本用法就介绍到这里了，具体可以去看看文档噢，文档也是很用心写的，如果觉得哪里不好，你也可以来贡献你的想法😆😆，这样vue社区才会越来越好。

写在最后

如果你们喜欢这个组件，欢迎给我点个star，这是对我最大的鼓励。 如果你们使用上遇到疑问，欢迎给我提Issue，我会尽快回复。 如果你们有更好的想法或者觉得文档写的不清晰，欢迎给我提PR，我会尽快合并。