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,我会尽快合并。

相关推荐
Pu_Nine_944 分钟前
10 分钟上手 ECharts:从“能跑”到“生产级”的完整踩坑之旅
前端·javascript·echarts·css3·html5
東雪蓮☆2 小时前
从零开始掌握 Web 与 Nginx:入门详解
运维·服务器·前端·nginx
脑子慢且灵2 小时前
【JavaWeb】一个简单的Web浏览服务程序
java·前端·后端·servlet·tomcat·web·javaee
柯南二号2 小时前
【大前端】 断点续传 + 分片上传(大文件上传优化) 的前端示例
前端
前端小超超2 小时前
如何配置capacitor 打包的安卓app固定竖屏展示?
android·前端·gitee
xiaopengbc2 小时前
在Webpack中,如何在不同环境中使用不同的API地址?
前端·webpack·node.js
前端AK君2 小时前
React中台系统如何嵌入到业务系统中
前端
Slice_cy2 小时前
不定高虚拟列表
前端
m0_748461392 小时前
Spring Boot + Vue 项目中使用 Redis 分布式锁案例
vue.js·spring boot·redis
前端AK君2 小时前
React组件库如何在vue项目中使用
前端