vuejs-datepicker是一个简单易用的Vue.js日期选择组件。它使用了Bootstrap 4的样式，支持多种语言，具有直观的界面，易于配置和扩展。
👉 效果演示 👉
如果您想使用vuejs-datepicker，首先您需要安装它：
npm install vuejs-datepicker然后，在您的Vue.js项目中导入组件：
<script>
import datePicker from 'vuejs-datepicker';
export default {
components: {
datePicker
},
data() {
return {
date: null
}
}
}
</script>接下来，您可以在模板中使用组件：
<template>
<div>
<date-picker v-model="date"></date-picker>
</div>
</template>vuejs-datepicker具有多种可配置的选项，包括日期格式、语言、禁用的日期、显示的日历个数等。您可以在组件中通过props传递这些选项，以自定义您的日期选择组件。
总的来说，vuejs-datepicker是一个不错的Vue.js日期选择组件，具有简单易用、易于配置和扩展的优点。如果您需要一个快速方便的日期选择组件，可以考虑使用vuejs-datepicker。
配置参数
vuejs-datepicker有以下配置参数：
value：当前选择的日期，是组件的必要参数。
format：日期格式，默认为yyyy-MM-dd。
language：语言，默认为英语。
disabled-dates：禁用的日期，可以是一个日期数组或一个函数。
calendar-count：显示的日历个数，默认为1。
placeholder：占位符，显示在输入框中的文本。
input-class：输入框的CSS类名。
inline：是否在行内显示日历，默认为false。
open-on-focus：是否在输入框获得焦点时打开日历，默认为false。
monday-first：是否以星期一作为一周的第一天，默认为false。
clear-button：是否显示清除按钮，默认为false。
clear-button-icon：清除按钮的图标。
calendar-button：是否显示日历按钮，默认为false。
calendar-button-icon：日历按钮的图标。
bootstrap-styling：是否使用Bootstrap样式，默认为true。
initial-view：初始显示的视图，可以是days、months或years。
full-month-name: 这个参数决定了日历中月份的显示方式，如果设为true，那么显示完整的月份名称，如“January”，否则显示缩写的月份名称，如“Jan”。
calendar-class: 这个参数允许你定义日历的样式，你可以使用它来自定义日历的外观。
wrapper-class: 和calendar-class类似，这个参数允许你定义日历的父元素的样式，也就是日历的外层包裹元素的样式。
calendar-button-icon-content: 这个参数允许你定义日历按钮的图标内容，你可以使用任意的文本或图标来自定义日历按钮。
day-cell-content: 这个参数允许你定义每个日历格子中显示的内容，你可以使用任意的文本或图标来自定义日历格子的外观。
disabled: 如果设为true，那么日历将被禁用，用户将无法选择日期。
required: 如果设为true，那么日期选择将成为必填项，用户必须选择日期。
typeable: 如果设为true，那么用户将可以使用键盘输入日期，而不必通过日历来选择日期。
use-utc: 如果设为true，那么日历将使用UTC时间，否则使用本地时间。
open-date: 这个参数允许你设置日历的默认打开日期，你可以传递一个日期字符串或日期对象。
minimum-view: 这个参数允许你设置日历最小的可视化级别，例如你可以设置为“month”，那么用户只能看到月份视图，而不能看到天或年视图。
maximum-view: 和minimum-view类似，这个参数允许你设置日历最大的可视化级别。
这些配置参数允许你完全自定义vuejs-datepicker的外观和行为，你可以根据自己的需求来设置这些参数，从而使日历适合你的应用。
示例代码：
<template>
<div>
<datepicker
v-model="selectedDate"
:format="dateFormat"
:placeholder="placeholderText"
:disabled-dates="disabledDates"
:clear-button="showClearButton"
:calendar-button="showCalendarButton"
:bootstrap-styling="useBootstrapStyling"
:initial-view="initialView"
/>
</div>
</template>
<script>
import datepicker from 'vuejs-datepicker';
export default {
components: {
datepicker
},
data() {
return {
selectedDate: null,
dateFormat: 'dd/MM/yyyy',
placeholderText: '请选择日期',
disabledDates: [new Date(2022, 5, 16), new Date(2022, 5, 17)],
showClearButton: true,
showCalendarButton: true,
useBootstrapStyling: true,
initialView: 'days'
};
}
};
</script>事件
vuejs-datepicker支持多个事件，这些事件可以帮助你监听日历的某些操作，以便在操作发生时执行一些特定的动作。下面是一些常用的事件：
input: 触发在日期选择输入框内，用户输入值时。
selected: 触发在用户选择了一个日期时。
opened: 触发在日期选择器被打开时。
closed: 触发在日期选择器被关闭时。
selectedDisabled: 触发在用户试图选择一个不可用的日期时。
cleared: 触发在用户清除了已选择的日期时。
changedMonth: 触发在用户在日期选择器中切换到另一个月份时。
changedYear: 触发在用户在日期选择器中切换到另一年时。
changedDecade: 触发在用户在日期选择器中切换到另一个十年时。
使用这些事件非常简单，你可以在组件中通过监听事件来实现一些功能，例如：
<date-picker v-model="date" @selected="onSelected"></date-picker>
<script>
export default {
data () {
return {
date: null
}
},
methods: {
onSelected (date) {
console.log('Selected date: ', date)
}
}
}
</script><date-picker v-model="date" @selected="onSelected"></date-picker>
<script>
export default {
data () {
return {
date: null
}
},
methods: {
onSelected (date) {
console.log('Selected date: ', date)
}
}
}
</script>日期格式
vuejs-datepicker组件支持对日期格式进行自定义，您可以使用各种字符串作为日期格式。
以下是一些常用的日期格式字符串：
d：表示一个月中的某一天，如：1到31。
dd - 日（01 到 31）
D：表示一周中的第几天的缩写，如：Mon到Sun。
M：表示一年中的第几月(从1开始)，如：1表示Jan。
MM - 月（01 到 12）
MMM - 月份的缩写，例如：Jan
MMMM - 月份的完整名称，例如：January
yyyy - 年（四位数）
yy - 年（两位数）
su：表示日期前缀，如：st, nd, rd。
例如，您可以使用格式字符串 dd/MM/yyyy 来显示日期，例如：13/02/2023。
您可以通过指定format属性来设置日期格式，例如：
<vuejs-datepicker :format="dd/MM/yyyy"></vuejs-datepicker>插件的github地址：https://github.com/charliekassel/vuejs-datepicker
1870
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
