vue-fast-datetime
vue-fast-datetime copied to clipboard
Published
20 hours ago •
wing1003
wing1003
A quick select datetime picker component for vue.js
vue-fast-datetime
A quick select datetime picker component for vue.js
DEMO HERE
Install
npm i vue-fast-datetime -D
Usage
As global component
import FastDatetime from 'vue-fast-datetime'
import 'vue-fast-datetime/dist/vue-fast-datetime.min.css'
Vue.use(FastDatetime)
This will register a global component <fast-datetime>
<fast-datetime
position="start"
:startDate=startDate
:endDate=endDate
:startValue=dateValueStart
:endValue=dateValueEnd>
</fast-datetime>
As plugin
import FastDatetime from 'vue-fast-datetime'
import 'vue-fast-datetime/dist/vue-fast-datetime.min.css'
Vue.use(FastDatetime)
This will register a plugin this.$FastDateTime.show
this.$FastDateTime.show({
position:'start',
startDate: this.startDate,
endDate: this.endDate,
startValue: this.dateValueStart,
endValue:this.dateValueEnd
})
Available props
The component accepts these props:
| Attribute | Type | Default | Description |
|---|---|---|---|
| position | String | start |
Initial the first choose time whether starttime or endtime |
| startDate | Object Date | - | The starttime of fase-datetime (required) |
| endDate | Object Date | - | The endtime of fase-datetime (required) |
| startValue | String | - | Current value of starttime,this value must be less than the starttime (required) |
| endValue | String | - | Current value of endtime,this value must be less than the starttime (required) |
| confirmText | String | ok |
The text of confirm button |
| cancelText | String | cancel |
The text of cancel button |
| hourRow | String | {value} |
Template of hourRow |
| minuteRow | String | {value} |
Template of minuteRow |
methods
| name | type | Default | Description |
|---|---|---|---|
onSelect / @on-change |
Function |
(type, value, wholeValue) => {} | CallBack after date scroller value changed, pass three arguments, current scroller type type and current scroller value value and datetime value wholeValue |
onConfirm |
Function |
(startValue, endValue) | CallBack after click confirm button,set current startValue and endValue |
onShow / @on-show |
Function |
:---: | show the vue-fast-datetime |
onHide / @on-hide |
Function |
:---: | hide the vue-fast-datetime |
CHANGELOG
Please see CHANGELOG for more information what has changed recently.
License
MIT License
wing1003