@4keys/vuejs-datepicker 中文文档教程

Question

Datepicker

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

• Demo
• Install
• Usage
• Date Formatting
• Props
• Events
• Disabled dates
• Highlighted dates
• Translations

NB。 Vue 1.x 支持到 v0.9.9 版本。 如果你想在 Vue 1.x 中使用这个组件，你可以使用 npm install vuejs-datepicker@0.9.9 安装

Demo

要在线观看演示： https://codesandbox.io/s/mpklq49wp

要在本地查看演示示例，请克隆 repo 并运行 npm install && npm run serve

Install

npm install vuejs-datepicker --save

import Datepicker from 'vuejs-datepicker';

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

或直接从 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>

<!-- French language example -->
<div id="app">
  <vuejs-datepicker :language="fr"></vuejs-datepicker>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuejs-datepicker"></script>
<script src="https://unpkg.com/vuejs-datepicker/dist/locale/translations/fr.js"></script>
<script>
const app = new Vue({
  el: '#app',
  data() {
    return {
      fr: vdp_translation_fr.js
    }
  },
  components: {
      vuejsDatepicker
  }
})
</script>

Usage

<datepicker></datepicker>

value prop 使用，如果传递应该是 Date 对象

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

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

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

使用 v-model

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

发出事件

<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

Events

中的操作上发出的

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

Date formatting

String formatter

这些事件是在日期选择器NB 。 这根本不是很稳健——使用风险自负！ 需要更好的实施。

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

Function formatter

将日期格式委托给提供的函数。 将使用日期调用函数，它必须将格式化日期作为字符串返回。 这允许我们使用 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

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

<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 :disabled-dates="state.disabledDates"></datepicker>

Highlighted Dates

可以通过多种方式突出显示日期（例如，用于标记约会）。 重要的： 默认情况下禁用日期被忽略，要突出显示禁用日期设置 includeDisabled 属性为 true。 注意：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

插槽将帮助您自定义内容。 .

beforeCalendarHeader

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

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

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

afterDateInput

要在 DateInput 上实现一些自定义样式（例如添加动画占位符），您可能需要将元素添加为 DateInput 同级元素。 插槽命名 afterDateInput 允许您这样做：

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

Translations

贡献指南 - 请使用此 list 作为翻译属性。

• Add your language as a module in the src/locale/translations dir.
• Import and export it in the src/locale/index file
• 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.

How to apply language

在组件中的脚本标记下方。

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

在组件数据中。

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

HTML。

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

可用语言

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
gl	Galician
he	Hebrew
hu	Hungarian
hr	Croatian
id	Indonesian
is	Icelandic
it	Italian
ja	Japanese
kk	Kazakh
ko	Korean
lb	Luxembourgish
lt	Lithuanian
lv	Latvian
mk	Macedonian
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
zhHK	Chinese_HK