Datepicker Vue组件与Vue 2兼容

日期选择器 (Datepicker)

A datepicker Vue component. Compatible with Vue 2.x. Works nice on mobile devices.

日期选择器Vue组件。 与Vue 2.x兼容。 在移动设备上效果很好。

安装 (Install)

Copy TouchDatePicker.vue component into your project

将TouchDatePicker.vue组件复制到您的项目中

用法 (Usage)

import Datepicker from 'touch-datepicker';

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

<datepicker></datepicker>

Using v-model

使用v-model

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

Emits events

发出事件

<datepicker v-on:change="saveModification"></datepicker>

Full example

完整的例子

<datepicker v-bind:language="en" v-bind:placeholder="Date of birth" v-bind:input-class="{'datepicker-input-reg': true, 'is-invalid-input': errors.has('event_date')}" v-bind:min="2000-01-01"  v-bind:max="2010-12-31" 
v-bind:data-vv-as="Please enter your birthdate" v-model="event_date" v-bind:v-validate="{required: true, date_format: 'YYYY-MM-DD'}" name="event_date" id="event_date" @change="saveChanges"></datepicker>
<span class="form-error" :class="{'is-visible': errors.has('event_date')}">{{ errors.first('event_date') }}</span>

可用道具 (Available props)

Prop	Type	Default	Description
value	Date|String		Date value of the datepicker
name	String		Input name property
id	String		Input id
format-date	String	DD MMMM YYYY	Date formatting string
language	String	en	Translation language used by moment
v-validate	Object		Validation rules used by vee-validate
input-class	String|Object		CSS class applied to the input el
placeholder	String		Input placeholder text
data-vv-as	String		See vee-validate: Errors localization
max	String		Max calendar date
min	String		Min calendar date

Struts	类型	默认	描述
值	日期|字符串		日期选择器的日期值
名称	串		输入名称属性
ID	串		输入编号
格式日期	串	DD MMMM YYYY	日期格式字符串
语言	串	恩	瞬间使用的翻译语言
验证	目的		vee-validate使用的验证规则
输入类	字符串|对象		CSS类应用于输入el
占位符	串		输入占位符文本
数据-视像	串		请参见vee-validate：错误本地化
最高	串		最长日历日期
分	串		最小日历日期

大事记 (Events)

You can emit any js event as you would do on a DOM input

您可以像在DOM输入上一样发出任何js事件

翻译自: https://vuejsexamples.com/a-datepicker-vue-component-compatible-with-vue-2/