vue-day-calendar 上线啦 🥳🥳简介提到日期选择器，大家可能会想到组件库的DatePicker，然而

简介

提到日期选择器，大家可能会想到组件库的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 />
</template>

记得要引入 css，不然会很难看的！！！下面就是使用后的效果：

组件默认是flex布局的，宽度固定是224px。如果说你想要效果跟最上面的简介图一样，你需要这样写

<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 month = ref('')
  
  function goToToday() {
    selected.value = `${dayjs().format('YYYY-MM')}-24`
    month.value = dayjs().format('YYYY-MM')
  }
</script>

<template>
  <VueDayCalendar v-model="selected" v-model:month="month">
    <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社区才会越来越好。

Q & A

为什么`v-model`和`month`的格式是`string`类型的？

首先，为什么要限制格式呢？其实是为了支持双向绑定，设想如果默认值传入一个Date类型，结果返回的是个YYYY-MM-DD或dayjs格式，体验岂不是很差，因此设计成易于理解且简单明了的格式。

v-model的格式是YYYY-MM-DD
month的格式是YYYY-MM

为什么`vue-day-calendar`看上去一点样式都没有？

用组件库的时候避免不了需要修改样式，一个组件好看也好、多特效也好，想必大家都有尝试过改样式的痛苦，归根结底耦合太高了。

每个人都有不同的审美，与其说花里胡哨的样式，还不如尽可能保留基础的样式进行美化，classes属性可以精确到每一块Dom节点，因此设计上都保证了最大的灵活性。

写在最后

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

vue-day-calendar 上线啦 🥳🥳

简介