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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
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
