一个简单的Vue.js datepicker组件支持禁用日期

邵羽

2023-12-01

vuejs-datepicker (vuejs-datepicker)

A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations

一个简单的Vue.js datepicker组件。支持禁用日期，内联模式，翻译

A datepicker Vue component. Compatible with Vue 2.x.

日期选择器Vue组件。与Vue 2.x兼容。

NB. Vue 1.x was supported up to version v0.9.9. If you want to use this component with Vue 1.x you can install with yarn install [email protected]

注意 Vue 1.x在v0.9.9版本之前受支持。如果您想将此组件与Vue 1.x一起使用，则可以通过yarn install安装[受电子邮件保护]

View demo 查看演示 Download Source 下载源

To view demo examples locally clone the repo and run yarn install && yarn serve

要在本地查看演示示例，请克隆存储库并运行纱线安装和纱线服务

安装 (Install)

npm install vuejs-datepicker --save

要么

yarn add vuejs-datepicker

import Datepicker from 'vuejs-datepicker';

export default {
  // ...
  components: {
    Datepicker
  }
  // ...
}

Or use directly from a CDN

或直接从CDN使用

<div id="app">
  <vuejs-datepicker></vuejs-datepicker>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuejs-datepicker"></script>
<script>
const app = new Vue({
  el: '#app',
  components: {
  	vuejsDatepicker
  }
})
</script>

用法 (Usage)

<datepicker></datepicker>

value prop if passed should be a Date object

如果传递的值 prop应该是Date对象

<script>
var state = {
  date: new Date(2016, 9,  16)
}
</script>
<datepicker :value="state.date"></datepicker>

support name attribute for normal html form submission

正常html表单提交的支持名称属性

<datepicker :value="state.date" name="uniquename"></datepicker>

Using v-model

使用v-model

<datepicker v-model="state.date" name="uniquename"></datepicker>

Emits events

发出事件

<datepicker @selected="doSomethingInParentComponentFunction" @opened="datepickerOpenedFunction" @closed="datepickerClosedFunction">

Inline always open version

内联始终打开版本

<datepicker :inline="true"></datepicker>

可用道具 (Available props)

Prop	Type	Default	Description
value	Date\|String		Date value of the datepicker
name	String		Input name property
id	String		Input id
format	String\|Function	dd MMM yyyy	Date formatting string or function
full-month-name	Boolean	false	To show the full month name
language	Object	en	Translation for days and months
disabled-dates	Object		See below for configuration
placeholder	String		Input placeholder text
inline	Boolean		To show the datepicker always open
calendar-class	String\|Object		CSS class applied to the calendar el
input-class	String\|Object		CSS class applied to the input el
wrapper-class	String\|Object		CSS class applied to the outer div
monday-first	Boolean	false	To start the week on Monday
clear-button	Boolean	false	Show an icon for clearing the date
clear-button-icon	String		Use icon for button (ex: fa fa-times)
calendar-button	Boolean	false	Show an icon that that can be clicked
calendar-button-icon	String		Use icon for button (ex: fa fa-calendar)
calendar-button-icon-content	String		Use for material-icons (ex: event)
day-cell-content	Function		Use to render custom content in day cell
bootstrap-styling	Boolean	false	Output bootstrap v4 styling classes.
initial-view	String	minimumView	If set, open on that view
disabled	Boolean	false	If true, disable Datepicker on screen
required	Boolean	false	Sets html required attribute on input
typeable	Boolean	false	If true, allow the user to type the date
use-utc	Boolean	false	use UTC for time calculations
open-date	Date\|String		If set, open on that date
minimum-view	String	'day'	If set, lower-level views won't show
maximum-view	String	'year'	If set, higher-level views won't show

Struts	类型	默认	描述
值	日期\|字符串		日期选择器的日期值
名称	串		输入名称属性
ID	串		输入编号
格式	字符串\|函数	dd MMM yyyy	日期格式化字符串或函数
全月名	布尔型	假	显示完整的月份名称
语言	目的	恩	翻译几天和几个月
禁用日期	目的		参见下面的配置
占位符	串		输入占位符文本
排队	布尔型		要显示日期选择器始终处于打开状态
日历类	字符串\|对象		CSS类应用于日历el
输入类	字符串\|对象		CSS类应用于输入el
包装类	字符串\|对象		CSS类应用于外部div
星期一优先	布尔型	假	在星期一开始一周
清除按钮	布尔型	假	显示清除日期的图标
清除按钮图标	串		使用图标作为按钮(例如：fa fa-times)
日历按钮	布尔型	假	显示可以单击的图标
日历按钮图标	串		使用图标作为按钮(例如：fa fa-calendar)
日历按钮图标内容	串		用于材料图标(例如：事件)
日细胞含量	功能		用于在日间单元格中呈现自定义内容
引导样式	布尔型	假	输出bootstrap v4样式类。
初步观点	串	minimumView	如果已设置，请在该视图上打开
残障人士	布尔型	假	如果为true，请在屏幕上禁用Datepicker
需要	布尔型	假	在输入上设置html required属性
可打字的	布尔型	假	如果为true，则允许用户键入日期
使用utc	布尔型	假	使用UTC进行时间计算
开放日期	日期\|字符串		如果已设置，则在该日期营业
最低视野	串	'天'	如果设置，则不显示较低级别的视图
最大视野	串	'年'	如果设置，则不会显示更高级别的视图

大事记 (Events)

These events are emitted on actions in the datepicker

这些事件在datepicker中的操作上发出

Event	Output	Description
opened		The picker is opened
closed		The picker is closed
selected	Date\|null	A date has been selected
selectedDisabled	Object	A disabled date has been selected
input	Date\|null	Input value has been modified
cleared		Selected date has been cleared
changedMonth	Object	Month page has been changed
changedYear	Object	Year page has been changed
changedDecade	Object	Decade page has been changed

事件	输出量	描述
开了		选择器已打开
关闭		选取器已关闭
已选	日期\|空	选择了一个日期
selectedDisabled	目的	选择了禁用日期
输入	日期\|空	输入值已被修改
已清除		选定日期已清除
更改月份	目的	月页已更改
更改年份	目的	年份页面已更改
十年	目的	十年页面已更改

日期格式 (Date formatting)

字符串格式化程序 (String formatter)

NB. This is not very robust at all - use at your own risk! Needs a better implementation.

注意这根本不是很可靠-使用后果自负！需要更好的实施。

Token	Desc	Example
d	day	1
dd	0 prefixed day	01
D	abbr day	Mon
su	date suffix	st, nd, rd
M	month number (1 based)	1 (for Jan)
MM	0 prefixed month	01
MMM	abbreviated month name	Jan
MMMM	month name	January
yy	two digit year	16
yyyy	four digit year	2016

代币	描述	例
d	天	1个
dd	0天	01
d	Abbr日	周一
su	日期后缀	st，nd，rd
中号	月数(以1为基础)	1(一月)
MM	0前缀月份	01
MMM	缩写的月份名称	一月
MMMM	月份名称	一月
y	两位数年份	16
yyyy	四位数年份	2016年

功能格式化器 (Function formatter)

Delegates date formatting to provided function. Function will be called with date and it has to return formated date as a string. This allow us to use moment, date-fns, globalize or any other library to format date.

将日期格式委托给提供的功能。函数将使用日期进行调用，并且必须以字符串形式返回格式化的日期。这使我们可以使用moment，date-fns，globalize或任何其他库来格式化日期。

<script>
  methods: {
    customFormatter(date) {
      return moment(date).format('MMMM Do YYYY, h:mm:ss a');
    }
  }
</script>
<datepicker :format="customFormatter"></datepicker>

禁用日期 (Disabled Dates)

Dates can be disabled in a number of ways.

可以通过多种方式禁用日期。

<script>
var state = {
  disabledDates: {
    to: new Date(2016, 0, 5), // Disable all dates up to specific date
    from: new Date(2016, 0, 26), // Disable all dates after specific date
    days: [6, 0], // Disable Saturday's and Sunday's
    daysOfMonth: [29, 30, 31], // Disable 29th, 30th and 31st of each month
    dates: [ // Disable an array of dates
      new Date(2016, 9, 16),
      new Date(2016, 9, 17),
      new Date(2016, 9, 18)
    ],
    ranges: [{ // Disable dates in given ranges (exclusive).
      from: new Date(2016, 11, 25),
      to: new Date(2016, 11, 30)
    }, {
      from: new Date(2017, 1, 12),
      to: new Date(2017, 2, 25)
    }],
    // a custom function that returns true if the date is disabled
    // this can be used for wiring you own logic to disable a date if none
    // of the above conditions serve your purpose
    // this function should accept a date and return true if is disabled
    customPredictor: function(date) {
      // disables the date if it is a multiple of 5
      if(date.getDate() % 5 == 0){
        return true
      }
    }
  }
}
</script>
<datepicker :disabledDates="state.disabledDates"></datepicker>

突出日期 (Highlighted Dates)

Dates can be highlighted (e.g. for marking an appointment) in a number of ways. Important: By default disabled dates are ignored, to highlight disabled dates set the includeDisabled property to true. Note: Both to and from properties are required to define a range of dates to highlight.

日期可以通过多种方式突出显示(例如，用于标记约会)。重要提示：默认情况下，禁用日期被忽略，要突出显示禁用日期，请将includeDisabled属性设置为true 。注意： to同时from to和from属性来定义要突出显示的日期范围。

<script>
var state = {
  highlighted: {
    to: new Date(2016, 0, 5), // Highlight all dates up to specific date
    from: new Date(2016, 0, 26), // Highlight all dates after specific date
    days: [6, 0], // Highlight Saturday's and Sunday's
    daysOfMonth: [15, 20, 31], // Highlight 15th, 20th and 31st of each month
    dates: [ // Highlight an array of dates
      new Date(2016, 9, 16),
      new Date(2016, 9, 17),
      new Date(2016, 9, 18)
    ],
    // a custom function that returns true of the date is highlighted
    // this can be used for wiring you own logic to highlight a date if none
    // of the above conditions serve your purpose
    // this function should accept a date and return true if is highlighted
    customPredictor: function(date) {
      // highlights the date if it is a multiple of 4
      if(date.getDate() % 4 == 0){
        return true
      }
    },
    includeDisabled: true // Highlight disabled dates
  }
}
</script>
<datepicker :highlighted="state.highlighted"></datepicker>

插槽 (Slots)

Slots will help you customize content. .

广告位可帮助您自定义内容。。

日历标题之前 (beforeCalendarHeader)

Sometimes you need to show custom content before the calendar header. For such cases you can use the named slot beforeCalendarHeader.

有时您需要在日历标题之前显示自定义内容。在这种情况下，可以使用beforeCalendarHeader插槽。

An example would be to use bootstrap's input-group-prepend and input-group-append to show some custom text:

一个示例是使用引导程序的input-group-prepend和input-group-append来显示一些自定义文本：

<datepicker :bootstrap-styling="true">
  <div slot="beforeCalendarHeader" class="calender-header">
    Choose a Date
  </div>
</datepicker>

afterDateInput (afterDateInput)

To implement some custom styling (for instance to add an animated placeholder) on DateInput, you might need to add elements as DateInput siblings. Slot named afterDateInput allows you to do that:

要在DateInput上实现某些自定义样式(例如添加动画占位符)，可能需要将元素添加为DateInput兄弟。名为afterDateInput插槽允许您执行以下操作：

<datepicker>
  <span slot="afterDateInput" class="animated-placeholder">
    Choose a Date
  </span>
</datepicker>

翻译 (Translations)

Contributing guide - please use appropriate code from this list as the translation property.

投稿指南-请使用此列表中的适当代码作为翻译属性。

Add your language as a module in the src/locale/translations dir.
将您的语言作为模块添加到src/locale/translations目录中。
Import and export it in the src/locale/index file
将其导入并导出到src/locale/index文件中
Add the Language to the available languages in the readme file.
将语言添加到自述文件中的可用语言中。
Run npm run lint to make sure your code formatting is in line with the required code style.
运行npm run lint ，以确保您的代码格式符合所需的代码样式。

如何申请语言 (How to apply language)

Below script tag in component.

组件中脚本标签下方。

import {en, es} from 'vuejs-datepicker/dist/locale'

In component data.

在组件数据中。

data () {
    return {
      en: en,
      es: es
    }
}

html.

html。

<datepicker :language="es"></datepicker>

Available languages

可用语言

Abbr	Language
af	Afrikaans
ar	Arabic
bg	Bulgarian
bs	Bosnian
ca	Catalan
cs	Czech
da	Danish
de	German
ee	Estonian
el	Greek
en	English	Default
es	Spanish
fa	Persian (Farsi)
fi	Finnish
fo	Faroese
fr	French
ge	Georgia
he	Hebrew
hu	Hungarian
hr	Croatian
id	Indonesian
is	Icelandic
it	Italian
ja	Japanese
ko	Korean
lb	Luxembourgish
lt	Lithuanian
lv	Latvian
mn	Mongolian
nbNO	Norwegian Bokmål
nl	Dutch
pl	Polish
ptBR	Portuguese-Brazil
ro	Romanian
ru	Russian
sk	Slovak
slSI	Slovenian
sv	Swedish
sr	Serbian (Latin)
srCyrl	Serbian (Cyrl)
th	Thai
tr	Turkish
uk	Ukrainian
ur	Urdu
vi	Vietnamese
zh	Chinese

亚伯	语言
f	南非语
AR	阿拉伯
包	保加利亚语
s	波斯尼亚人
钙	加泰罗尼亚语
cs	捷克文
DA	丹麦文
德	德语
ee	爱沙尼亚语
埃尔	希腊语
恩	英语	默认
es	西班牙文
F A	波斯语(波斯语)
科幻	芬兰
佛	法罗语
fr	法文
ge	佐治亚州
他	希伯来语
hu	匈牙利
小时	克罗地亚语
ID	印度尼西亚
是	冰岛的
它	义大利文
ja	日本
KO	韩语
磅	卢森堡语
lt	立陶宛语
lv	拉脱维亚语
mn	蒙
氧化氮	挪威语Bokmål
nl	荷兰语
PL	抛光
聚四氟乙烯	巴西葡萄牙语
RO	罗马尼亚语
RU	俄语
sk	斯洛伐克文
slSI	斯洛文尼亚文
sv	瑞典
sr	塞尔维亚文(拉丁文)
srCyrl	塞尔维亚文(Cyrl)
日	泰国
tr	土耳其
英国	乌克兰
ur	乌尔都语
六	越南文
zh	中文

翻译自: https://vuejsexamples.com/a-simple-vue-js-datepicker-component-supports-disabling-of-dates/