- Notifications
You must be signed in to change notification settings - Fork31
trevorstacy/vue-date-picker
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A vue date picker component inspired by material design
$ npm install vue-md-date-picker --save
import DatePicker from 'vue-md-date-picker'
The most common use case
<DatePickerv-if="show"v-model="date"@close="show = false"/>
Note that there is av-if directive and a@close event. This is because the date picker allows you to choose when it is displayed, and how to handle closing it.
Setting a min date to choose from
<DatePickerv-if="show"v-model="date"@close="show = false"min="2017-8-16"/>
Setting a max date to choose from
<DatePickerv-if="show"v-model="date"@close="show = false"max="2017-8-24"/>
Setting a range of dates to choose from
<date-pickerv-if="show"v-model="date"@close="show = false"min="2017-8-16"max="2017-8-24"/>
You may also specifiy a color to change the theme of the date picker
<DatePickercolor="#F44336"@close="show = false"v-if="show"v-model="date"/>
There is also a provided transition if you want to fade the date picker in
<transitionname="calendar-fade"><DatePicker@close="show = false"v-if="show"v-model="date"/></transition>
To format the date picker's value, you may use the:format prop. The format prop takes a reference to a function; this function receives the date picker's date value (e.g. 2016-4-19) and may format it however you wish
<DatePickerv-if="show"v-model="date"@close="show = false":format="formatDate"/>
In your component's methods...
formatDate(date){returnmoment(date).format('LL')}
In the above example, if a user selected "2017-8-29" as the date, thedate value would be "August 29, 2017".
| Name | Type | Description |
|---|---|---|
| color | String | Changes the theme color of the date picker. |
| format | Function | Formats the date picker's emitted date via a user specified function. |
| min | String | Limits the date to a minimum specified value. |
| max | String | Limits the date to a maximum specified value. |
| Name | Description |
|---|---|
| close | Closes the date picker. This is fired when the Cancel button is pressed, when the escape key is pressed, or when the input event is emitted. |
| input | Sets the selected date. This is fired when the Ok button is pressed, or when the user presses the enter or space key after selecting a date. If a format function is passed to the date picker, the emitted value will be run through that before this event is emitted. |