用VueJs制作的日期选择器 vue3 datepicker

# vue-datepicker [](https://www.codacy.com/app/mathieustan/vue-datepicker?utm_source=github.com&utm_medium=referral&utm_content=mathieustan/vue-datepicker&utm_campaign=Badge_Grade) [](https://www.codacy.com/app/mathieustan/vue-datepicker?utm_source=github.com&utm_medium=referral&utm_content=mathieustan/vue-datepicker&utm_campaign=Badge_Coverage) > A datepicker Vue component. Compatible with Vue 2.x - [Demo](#demo) - [Install](#install) - [Usage](#usage) - [Props](#available-props) - [Events](#events) - [Date Formatting](#date-formatting) - [Translations](#translations) - [Best Practices](#best-practices) ## Demo To view a demo online: <https://vue-datepicker.netlify.com/> ## Install ```bash npm install @mathieustan/vue-datepicker --save ``` or ```bash yarn add @mathieustan/vue-datepicker ``` ```javascript import { VueDatePicker } from '@mathieustan/vue-datepicker'; import '@mathieustan/vue-datepicker/dist/vue-datepicker.min.css'; export default { // ... components: { VueDatePicker } // ... } ``` or ```javascript import VueDatePicker from '@mathieustan/vue-datepicker'; import '@mathieustan/vue-datepicker/dist/vue-datepicker.min.css'; Vue.use(VueDatePicker); ``` ## Usage ```html <VueDatePicker v-model="currentDate" /> ``` _value_ prop if passed should be a Date object ```html <template> <VueDatePicker :value="date"></VueDatePicker> </template> ``` ```javascript <script> export default { // ... components: { VueDatePicker }, data: () => ({ date: new Date([2019, 5, 16]), }),, // ... } </script> ``` support name attribute for normal html form submission ```html <VueDatePicker :value="state.date" name="uniquename"></VueDatePicker> ``` Using `v-model` ```html <VueDatePicker v-model="state.date" name="uniquename"></VueDatePicker> ``` ## Available props | Prop | Type | Default | Description | | ------------------ | -------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | id | String | 'datepicker' | Sets the input id | | value | Date\|String\|Number | | Date picker model (ISO 8601 format, YY-mm-dd or YY-mm) | | name | String | 'datepicker' | Input name property & datepicker title in fullscreenMobile | | clearable | Boolean | false | Add input clear functionality | | validate | Boolean | false | Shows validations button to select date | | buttonValidate | String | 'Ok' | Sets validate text button | | buttonCancel | String | 'Cancel' | Sets cancel text button | | format | String | DD MMMM YYYY | Allows you to customize input date format | | formatHeader | String | dddd DD MMM | Allows you to customize header date format | | placeholder | String | 'YYYY-MM-DD' | Sets the input’s placeholder text | | visible | Boolean | false | Allows you to trigger datepicker visibility | | disabled | Boolean | false | Sets datepicker disabled | | color | String | #4f88ff | Allows you to customize color | | contentClass | String | '' | Applies custom class to datepicker content | | noHeader | Boolean | | Hides datepicker header | | noInput | Boolean | | Hides datepicker input. It'll show a button instead | | noCalendarIcon | Boolean | | Hides datepicker icon | | fullscreenMobile | Boolean | false | Shows datepicker in a bottom sheet when in mobile view | | allowedDates | Function | | Function which