Vue.js的日期选择器组件比较分析帖

尼耳多
5,784 阅读12分钟

无论是用Vue.js构建下一个Airbnb、Wizz Air或任何其他预订或物流应用，为用户提供一种在前台提交日期和时间信息的方式，而不使用户体验变得复杂是当务之急。

日期选择器组件提供了这种急需的功能。

日期选择器允许应用程序向后端发送日期和时间信息，同时确保所选的日期和时间符合应用程序的目的，比如禁止用户选择比当前日期更早的日期。

对于Vue.js来说，在Vue生态系统中有许多日期选择器库。在这篇文章中，我们将讨论哪些库是最好的以及它们的特点。

在审查这些库时，我们将考虑每个库的以下内容。

  • 支持双向数据绑定与v-model
  • 本地化支持
  • 服务器端渲染（SSR）/Nuxt支持
  • 多区间日期选择
  • 支持Vue 3
  • 支持黑暗模式

不多说了，让我们看看Vue生态系统中一些最好的日期选择器库。

最佳独立的Vue.js日期选择器

在本节中，我们将看看Vue生态系统中的一些顶级独立日期选择器库。

vuejs-datepicker

[vuejs-datepicker](https://github.com/charliekassel/vuejs-datepicker)是Vue 2应用程序的轻量级和零依赖性的日期选择器组件。到目前为止，它是Vue生态系统中最受欢迎的日期选择器库之一，在发布时，npm上的每周下载量约为12万。

在写这篇文章的时候，它还支持50种语言，如果有一种语言不存在，用户可以贡献新语言。

一个突出的vuejs-datepicker 功能是可以使用inline 道具在线或不在线渲染日期选择器组件。当内联呈现时，日期选择器组件会在不点击输入字段或按钮的情况下出现。

这非常有用，因为它符合大多数网络应用的UI设计要求。

要使用inline 道具，请添加以下代码块。

<template>
  <datepicker :value="date" :inline="true"></datepicker>
</template>

<script>
export default {
  data() {
    return {
      date: new Date(2016, 9, 16),
    };
  },
};
</script>

注意：不要忘记导入日期选择器组件!

当inline 道具被设置为true ，它的渲染效果如下。

vuejs-datepicker Rendering A Calendar View With The Inline Prop

然而，如果不使用inline 这个道具，日期选择器就不会呈现完整的日历，留下一个不那么直观的界面。

vuejs-datepicker rendering Without Using Inline Prop, Shows A Field With The Date And No Calendar

vuejs-datepicker 也完全支持与v-model 的双向数据绑定，这使得Vue开发者很容易获得用户的输入。

还值得注意的是，这个包在Nuxt中支持SSR，甚至在导入地区性的时候也能工作。

虽然该包最后一次更新是在2019年，但它仍然是Vue生态系统中的顶级日期选择器组件库之一。

vuejs-datepicker 的总体功能包括以下内容。

  • 支持双向数据绑定，具有v-model
  • 本地化和国际化支持
  • 支持SSR/Nuxt

然而，不幸的是，vuejs-datepicker 不支持Vue 3或多区间日期选择。

vue2-datepicker

vue2-datepicker 组件有很多开箱即用的功能，如多区间日期选择和disabledDate 和disabledTime ，使定制日期选择器组件变得超级容易。尽管它是为Vue 2构建的，但它目前支持Vue 3。

虽然下面看到的默认日期选择器看起来很基本，但它提供了更多的功能。

vue2-datepicker Rendering A Calendar View

vue2-datepicker 提供的最独特的功能是ValueType 道具，它让你可以选择配置日期选择器来返回一个Date 对象、时间戳或格式。

这很有用，因为你可能不需要从日期选择器组件中转换用户数据来适应你的应用需求。

另一个值得讨论的很酷的功能是vue2-datepicker ，它支持选择一个日期范围。这是大多数带有日期选择器的Web应用程序所需要的功能，可以节省开发人员编写自定义代码的时间。

然后，用户可以选择一个日期范围，并对其进行验证，以确保它符合应用程序的需求。

它还有几个功能，如shortcuts 和showTimePanel ，可以大大改善用户体验。

总的来说，vue2-datepicker 具有以下特点。

  • 支持双向的数据绑定，具有v-model
  • 本地化和国际化支持
  • 支持Nuxt，不支持SSR
  • 多区间日期选择
  • 支持Vue 3

如果感兴趣，我创建了一个GitHub Gist，你可以用它来在Nuxt应用中设置这个组件。

Vue DatePicker

Vue DatePicker是一个更强大的日期选择器组件。它是迄今为止最容易定制的组件之一，它支持RTL模式，支持无输入的内联，以及minDate 和maxDate props，可以通过编程设置用户可以选择的最小和最大日期。

这个组件是按照Material Design的指导方针设计的，有一些花哨的悬停效果、过渡和可触摸的反馈。它在网络应用中使用起来感觉很自然，并提供了很好的用户体验!

Vue DatePicker Rendering Calendar View With Highlighted Current Date In Blue At Top Of Calendar

总的来说，Vue DatePicker有以下特点。

  • 支持双向的数据绑定，具有v-model
  • 本地化和国际化支持
  • 支持SSR/Nuxt

但它不支持多区间日期选择或Vue 3。

V-Calendar

[V-Calendar](https://vcalendar.io/)根据它的官方文档，它是Vue.js的一个优雅的日历和日期选择器插件。这个软件包的一个优点是它的文档，这使得该插件易于集成和使用。

V-Calendar ，完全支持Vue 3、颜色、黑暗模式，而且你可以真正地自定义格式和解析日期。而且，通过inputEvents ，你可以在鼠标悬停或任何其他输入事件中显示日期选择器组件。

下面是V-calendar 在黑暗模式下的屏幕截图。

V-Calendar Dark Mode Rendering Calendar In Black

V-calendar 也有很多属性，有助于为用户建立真正优雅的体验。你可以在一个表单中使用带有验证信息的自定义输入。

这是迄今为止Vue生态系统中最完整的日期选择器组件库。如果你正在为你的Vue应用寻找一个强大的日期选择器组件，并且有强大的社区支持，可以考虑这个插件。

在GitHub上有相当数量的贡献者，发布了84个版本，最近的版本是在2021年7月13日发布的，这是一个活跃的社区。

然而，其强大的性质是有代价的，因为它有一个16.7MB的捆绑大小。因此，如果你的应用程序不需要这么大的重量，就去找一个更轻量级的解决方案。

总的来说，V-calendar 有以下特点。

  • 支持双向数据绑定，具有v-model
  • 支持本地化和国际化
  • 支持Nuxt，但没有服务器端渲染（SSR）
  • 多区间日期选择
  • 支持Vue 3
  • 支持黑暗模式

CtkDatetimePicker

CtkDatetimePicker 是一个选择日期和时间的Vue.js组件，包括一个范围模式和黑暗模式支持。这个组件也有一个体面的UI，因为它提供了比其他日期选择器更多的视觉效果。

CtkDatetimePicker Rendering Customized Colors In Calendar View

对于上面的截图，我用下面的方法定制了颜色。

<style scoped>
::v-deep .header-picker {
  background-color: #082032 !important;
}
::v-deep .time-picker-column-item.active .time-picker-column-item-effect,
::v-deep
  .datepicker-container
  .datepicker-days
  .datepicker-day.selected
  .datepicker-day-effect {
  background-color: #ff4c29 !important;
}
</style>

请注意，范围属性必须在style 标签中存在，这样才能发挥作用

通过使用locale 道具VueCtkDateTimePicker ，添加本地化支持是非常直接的。在这个代码例子中，我们要把地区设置为俄罗斯。

  <VueCtkDateTimePicker v-model="date" dark locale="ru" />

总的来说，CtkDatetimePicker 具有以下特点。

  • 支持双向的数据绑定，包括v-model
  • 本地化和国际化支持
  • 支持SSR/Nuxt
  • 多区间日期选择
  • 不支持Vue 3，但是，它是一项正在进行的工作
  • 支持黑暗模式

尽管CtkDatetimePicker ，但文档并不总是有用的，因为它不包括如何定制该组件以适应你的应用需求。

Vue Hotel Datepicker

Vue Hotel Datepicker是一个适用于Vue.js的响应式日期范围选取器，显示所选的夜数，有几个有用的选项，如自定义入住和退房规则，本地化支持等。

签入和签出规则包括maxNights 、minNights 和disabledDaysOfWeek 道具。

maxNights 道具接受一个数字，以编程方式设置用户可以预订服务的最大天数。因此，当用户从日期选择器中选择最多五天时，它将禁用日历中的其他日期。

<HotelDatePicker :maxNights="5" />

下面是maxHeight 道具设置为5 的渲染。

Vue Hotel Datepicker Calendar Rendering Showing Side-By-Side Calendar Months, Two Selected Days In Turquoise, And A Field With The Date Range At The Top

minNights 道具也接受一个数字，以指定用户可以预订服务的最小天数。

在下面的演示中，minNights 被设置为8 ，所以入住规则要求至少预订8晚。

Vue Hotel Datepicker Set To Eight MinNights, Shows Selecting The Minimum Number Of Nights On The Rendered Calendar

注意上面的工具提示，通知我们可以预订的最小天数是多少。

disabledDaysOfWeek 道具接受一个字符串数组，其中包含你想阻止用户预订你的服务的几周内的日子。

这是禁用星期二和星期六的日期选择器组件。

Vue Hotel Datepicker With Tuesdays And Saturdays Disabled, Shown By Graying Out The Date Boxes

如果你正在建立一个酒店或某种形式的住宿预订应用程序，Vue Hotel Datepicker是一个很好的选择，因为它解决了酒店网络应用的大多数常见日期选择器需求。

该组件在移动和桌面屏幕上看起来都很好，提供了良好的用户体验。

Vue Hotel Datepicker Mobile (Right Side) And Desktop (Left Side) Views

来自vue-hotel-datepicker GitHub资源库。

然而，这个组件的缺点之一是文档；它们没有涉及到如何使用这个包，即使是在从用户那里获得日期输入这样的基本情况下。另一个很大的缺点是不支持与v-model 的双向数据绑定。

总的来说，Vue Hotel Datepicker有以下特点。

  • 本地化和国际化支持
  • 该包在Nuxt中工作，但没有服务器端渲染（SSR）支持
  • 多区间日期选择

虽然没有对Vue 3的支持，但它目前是一项正在进行的工作。它也不支持与v-model 的双向数据绑定。

vue-airbnb-style-datepicker

vue-airbnb-style-datepicker 组件是airbnb/react-dates的Vue实现，具有类似的外观和功能。它的UI简洁、现代，收集日期信息时考虑到了用户体验。

vue-airbnb-style-datepicker Calendar Rendering

来自vue-airbnb-style-datepicker GitHub资源库。

虽然它有一个美丽的外观和感觉，但我不建议在一个真正的大项目中使用它，因为它没有被积极维护。

总的来说，vue-airbnb-style-datepicker 有以下特点。

  • 支持SSR/Nuxt
  • 多区间日期选择

它不支持与v-model 、本地化和国际化或Vue 3的双向数据绑定。

相关的Vue.js UI库日期选择器

在这一节中，我们将看看与Vue UI组件库相关的日期选择器组件，如Vuetify、Quasar框架和Element UI。

元素DatePicker

ElementDatePicker 组件被打包在Element UI组件库本身中。这意味着要使用这个组件，你必须安装Element UI。

它的属性使定制和设置日期和时间的程序化变得容易。与DatePicker 一起的是DateTimePicker 组件，它允许用户在一个选择器中选择日期和时间。

这是相当酷的，因为它带有一些常见的用例，如防止用户在DatePicker 组件的开始日期之前选择结束日期。

DatePicker 也支持双向数据，与shortcuts 的日期和时间，日期和时间范围在一个输入中，并支持Vue 3。

一般来说，使用Element UI时的一个缺点是，它的一些组件不是移动响应的，包括DatePicker 组件。

DatePicker Component Not Mobile Responsive, Shows Overlapping UI

总的来说，ElementDatePicker 具有以下特点。

  • 双向的数据绑定，具有v-model
  • 本地化和国际化支持
  • 支持SSR/Nuxt
  • 多区间日期选择
  • 支持Vue 3

Vuetify的v-date-picker

该 [v-date-picker](https://vuetifyjs.com/en/components/date-pickers/)是Vuetify的众多组件之一，Vuetify是一个Vue UI库，拥有精美的手工材质组件。

v-date-picker 组件支持国际化、动态方向、多日期选择、使用数组、对象、函数指定事件的日期事件，以及v-model 支持。

下面是一个默认的v-date-picker 组件的截图。

v-date-picker Default Calendar Rendering

使用Vuetify的日期选择器的最大优势之一是社区支持和精心编写的文档。

然而，当您只需要一个日期拾取器组件时，我并不建议安装Vuetify。这主要是因为它有18.2MB的大小，会影响您的应用程序的性能。但是如果你把它作为整个Vue/Nuxt应用程序的UI库，那么日期选择器组件就值得关注了。

总的来说，v-date-picker 有以下特点。

  • 双向数据绑定，具有v-model
  • 本地化和国际化支持
  • 支持SSR/Nuxt
  • 多区间日期选择
  • 不支持Vue 3

Quasar的QDate 日期选择器

就像Vuetify和Element UI的日期选择器组件一样，QuasarQDate 日期和时间选择器组件与整个Quasar UI组件框架本身打包在一起。

它遵循Material Design模式，所以非常注重设计的一致性以提供更好的用户体验。这意味着只有当你同时使用整个UI组件库时，你才能从使用该组件中获得全部好处。

Qdate 组件与Vuetify的日期选择器实现非常相似；虽然两者都遵循Material Design指南，但它们可以被定制。然而，与Vuetify不同的是，用QDate ，获得黑暗模式支持是非常直接的。

在Qdate ，黑暗模式只需通过dark 属性来启用，而不像Vuetify，你必须在v-date-picker 组件中配置你的主题来启用黑暗模式。

QDate Rendering Dark Mode, Showing Calendar In Black With Orange Highlight And Selected Date Rendered At The Top

总的来说，Qdate 具有以下特点。

  • 双向的数据绑定与v-model
  • 本地化和国际化的支持
  • 支持SSR/Nuxt
  • 多区间日期选择
  • 支持Vue 3

总结

我们已经介绍了Vue生态系统中相当多的日期选择器组件。当决定为你的下一个Vue/Nuxt应用选择一个日期选择器组件时，请考虑你的项目规模，从用户那里收集日期数据的格式，用户体验，用户地域，以及SSR支持。

当考虑到这些方面时，你可以做出一个明智的决定。

我希望你觉得这篇文章有用。欢迎你对你在Vue项目中使用过的任何伟大的日期选择器组件发表评论。你可以在GitHub上找到我对所有日期选择器库的实现。

你也可以在Twitter和LinkedIn上找到我。谢谢您的阅读!

The postComparing Vue.js date pickersappeared first onLogRocket Blog.

avatar
文章
阅读
粉丝