vue-time-range

    0.2.2 • Public • Published

    VueTimeRange

    Time Range Picker Based On Buefy And Vue

    Environment

    • vue 2.5.13
    • buefy 0.6.3

    Installation

    npm i -S vue-time-range

    Usage

    main.js

    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

    <link rel="stylesheet" href="//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">

    template

    <time-range label-panel="TimeRange" label-start="From" label-end="To" :auto-fold="true" @time-range-change="(n, o) => yourMethod(n, o)" @tag-click="yourMethod"></time-range>

    Store

    state

    this.$store.state.TimeRange.dateTimeStart
    this.$store.state.TimeRange.dateTimeEnd

    mutations

    this.$store.commit('TimeRange/EDIT_DATE_TIME_START', new Date())
    this.$store.commit('TimeRange/EDIT_DATE_TIME_END', new Date())

    Demo

    Keywords

    Install

    npm i vue-time-range

    DownloadsWeekly Downloads

    16

    Version

    0.2.2

    License

    MIT

    Unpacked Size

    6.95 MB

    Total Files

    10

    Last publish

    Collaborators

    • gopherj