Welcome folks today in this blog post we will be building a date time manipulation calculator in browser using vue.js using date-fns date utility library in javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a index.html file and copy paste the following code

index.html

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<header><h1>Calculate the number of days between two dates</h1></header>

<div class="wrapper">
    
<p>Date: <input type="text" id="datepicker1" size="12" placeholder ="mm/dd/yyyy"> <input type="text" id="alternate1" size="24"></p>

<p>Date: <input type="text" id="datepicker2" size="12" placeholder ="mm/dd/yyyy"> <input type="text" id="alternate2" size="24"></p>

<button id="click">Calculate</button>

<div id="output"></div>
    
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

And now make a style.css file and copy paste the following code

style.css

body {
     min-height: 100vh;
     color: whitesmoke;
     background: linear-gradient(90deg, #49365c, #0a5640);
}
 [v-cloak] {
     opacity: 0;
}
 .time {
     line-height: 1.4;
     font-weight: bold;
     padding: 1em;
     top: 50%;
     left: 50%;
     text-align: center;
     font-size: 2em;
     transition: 300ms;
}
 .time.changed {
     color: white;
     text-shadow: 0 0 10px black;
     background: linear-gradient(to right, transparent, rgba(0, 0, 0, .1), transparent);
}
 #app {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 100%;
     max-width: 700px;
}
 .controls {
     margin-top: 1em;
}
 .controls > div {
     max-width: 680px;
     margin: 0 auto;
     flex-wrap: wrap;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 10px;
}
 .controls label {
     font-size: 0.9em;
     padding-right: 1em;
     text-transform: uppercase;
     flex: 1;
     text-align: right;
}
 .controls input {
     text-align: center;
     margin-right: 1em;
     flex: 3;
}
 .controls button {
     cursor: pointer;
     display: block;
     margin: 1em auto;
}
 .btn-enter {
     opacity: 0;
     transform: translateX(-20px);
}
 .btn-enter-active {
     transition: 500ms;
}
 .btn-leave-active {
     transition: 300ms;
     opacity: 0;
     transform: rotate(10deg) scale(0.5);
}

And now make a script.js file and copy paste the following code

script.js

const pipe = (...fns) => {
    let transformValue
    return function (value) {
        for (let fn of fns) {
            transformValue = fn(transformValue || value)
        }
        return transformValue
    }
} 

const app = new Vue({
    el:"#app",
    filters:{
        date (value, format) {
            return dateFns.format(value, format)
        }
    },
    computed : {
        date () {
            return pipe(
                x => dateFns.addDays(x, this.addDays),
                x => dateFns.addMonths(x, this.addMonths),
                x => dateFns.addHours(x, this.addHours),
                x => dateFns.addMinutes(x, this.addMinutes),
                x => dateFns.addYears(x, this.addYears)
            )(this.currentDate)
        },
        isAltered () {
            return (this.addDays || this.addYears || this.addMinutes || this.addHours || this.addMonths)
        }
    },
    methods:{
        reset() {
            this.addDays = 0
            this.addMonths = 0
            this.addYears = 0
            this.addHours = 0
            this.addMinutes = 0
        }
    },
    data:{
        addDays:0,
        addMonths:0,
        addHours:0,
        addMinutes:0,
        addYears:0,
        currentDate:new Date()
    },
    created () {
        setInterval(() => {
            this.currentDate = new Date()
        },1000)
    }
})

And now if you open index.html inside the browser you will see the below screenshot