https://github.com/0x8f701/TimeRange
Time Range Picker Based On Buefy And Vue
https://github.com/0x8f701/TimeRange
buefy date picker range time vuejs2
Last synced: 8 months ago
JSON representation
Time Range Picker Based On Buefy And Vue
- Host: GitHub
- URL: https://github.com/0x8f701/TimeRange
- Owner: 0x8f701
- License: mit
- Created: 2018-04-02T20:26:13.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-06-29T10:35:57.000Z (over 6 years ago)
- Last Synced: 2025-01-30T01:25:17.016Z (8 months ago)
- Topics: buefy, date, picker, range, time, vuejs2
- Language: Vue
- Size: 4.3 MB
- Stars: 5
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# VueTimeRange
Time Range Picker Based On Buefy And Vue
## Environment
- `vue 2.5.13`
- `buefy 0.6.3`
## Installation
```javascript
npm i -S vue-time-range
```
## Usage
`main.js`
```javascript
import Vue from 'vue';
import Vuex from 'vuex';
import TimeRange from 'vue-time-range';
import Buefy from 'buefy';
import 'buefy/lib/buefy.min.css';
Vue.use(Vuex);
Vue.use(Buefy);
const store = new Vuex.Store();
Vue.use(TimeRange, {
store
});
new Vue({
store,
//...
});
```
`index.html`
```html
```
`template`
```vue
yourMethod(n, o)" @tag-click="yourMethod">
```
## Store
`state`
```javascript
this.$store.state.TimeRange.dateTimeStart
this.$store.state.TimeRange.dateTimeEnd
```
`mutations`
```javascript
this.$store.commit('TimeRange/EDIT_DATE_TIME_START', new Date())
this.$store.commit('TimeRange/EDIT_DATE_TIME_END', new Date())
```
## Demo
