vue-day-calendar 上线啦 🥳🥳

简介

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

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

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

✨ 特性

  • 国际化多语言
  • 高度可定制化样式,支持 tailwindcsssunocss
  • 使用 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借鉴了很多想法。

快速上手

安装

shel 复制代码
pnpm add vue-day-calendar dayjs

用法

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

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

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

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

html 复制代码
<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,我会尽快合并。

相关推荐
遂心_1 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
IT_陈寒1 小时前
JavaScript 性能优化:5 个被低估的 V8 引擎技巧让你的代码快 200%
前端·人工智能·后端
王同学QaQ1 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
岛风风1 小时前
关于手机的设备信息
前端
ReturnTrue8681 小时前
nginx性能优化之Gzip
前端
华仔啊2 小时前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
w_y_fan2 小时前
Flutter 滚动组件总结
前端·flutter
wuli金居哇2 小时前
我用 Turborepo 搭了个 Monorepo 脚手架,开发体验直接起飞!
前端
Asort2 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手2 小时前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript