日期选择器 (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/