How to Work with Dates in Vuejs 2 and Vuex Using Moment

From WikiHTP

Most of the time the work with dates makes us lose a lot of time, it is not a simple job, in this tutorial we will see how to work with dates in Vuejs 2 and Vuex using Moment.

The first thing you should install and configure is Vuex and moment.

yarn add vuex moment

create a module to handle dates with Vuex[edit]

Once installed, we will create a module to handle dates with Vuex.

const  moment  =  require ( ' moment ' );

const  state  = {
    start_date :  moment ( new  Date ()). local () format ( ' YYYY-MM-DDTHH: mm ' ),
    end_date :  moment (). add ( 30 , ' days ' ) local () format ( ' YYYY-MM-DDTHH: mm ' ),
};

const  mutations  = {
    SET_START_DATE : ( state , value ) => {
        state . start_date  = value;
    },
    SET_END_DATE : ( state , value ) => {
        state . end_date  = value;
    },
};

const  getters  = {
    differenceDate ( state ) {
        const  start  =  moment ( state . start_date );
        const  end  =  moment ( state . end_date );
        return  end . diff (start, ' days ' );
    }
};

export  default {
    state,
    mutations,
    getters
}

Simple, we define start_date and end_date within the state, a pair of mutations to modify this data and finally a getter to obtain the difference between both dates.

For our module to work remember to create the store and add it to your app.

import  Vuex  from  ' vuex ' ;
Vue . use (Vuex);
import  DateModule  from  ' ./modules/date.module ' ;
const  store  =  new  Vuex.Store ({
    modules : {
        DateModule
    }
});

new  Vue ({
  router,
  store, // here
  render :  h  =>  h (App)
}). $ mount ( ' #app ' )

To use everything we have done within a component is very simple, using computed, mapGetters and setters and getters we can have everything controlled with little code.

< template >
    < div  id = " date-component " >
        < form >
            < label > Start </ label >
            < input
                type = " datetime-local "
                name = " start_date "
                v-model = " start_date "
            />
            < label > End </ label >
            < input
                type = " datetime-local "
                name = " end_date "
                v-model = " end_date "
            />

            < p > Difference in days: {{differenceDate}} </ p >
        </ form >
    </ div >
</ template >

< script >
    import { mapGetters } from  ' vuex ' ;
    export  default {
        name :  ' date-component ' ,
        computed : {
            ... mapGetters ([ ' differenceDate ' ]),
            start_date : {
                get () {
                    return  this . $ store . state . DateModule . start_date ;
                },
                set (value) {
                    this . $ store . commit ( ' SET_START_DATE ' , value);
                }
            },
            end_date : {
                get () {
                    return  this . $ store . state . DateModule . end_date ;
                },
                set (value) {
                    this . $ store . commit ( ' SET_END_DATE ' , value);
                }
            }
        }
    }
</ script >

< style  scoped >
    # date-component  * {
        font-size : 25 px ;
    }
</ style >

About This Tutorial

This page was last edited on 5 February 2019, at 20:59.