How to fill a datetime input with MomentJS

How to fill a datetime input with MomentJS

In this post I will show you how to fill a datetime input with MomentJS

Setup project with Vue

  1. Install Vue CLI:
npm install -g @vue/cli
  1. Create your vue application:
vue create datepicker

Add momentjs

cd datepicker
yarn add vue-moment

MomentJs is a library to parse, validate, manipulate, and display dates and times in JavaScript. I can really recommend it when you are working with dates because it is easy to use.

Start Application

yarn serve

Add datepicker input and set value with momentjs

To set your input value to today with the current time use:

moment().format(moment.HTML5_FMT.DATETIME_LOCAL)

Inside your src/App.vue the code should look like this:

<template>
  <div id="app">
    <input type="datetime-local" v-model="date">
  </div>
</template>

<script>
  import moment from "moment";

  export default {
    name: 'app',
    data: function () {
      return {
        date: moment().format(moment.HTML5_FMT.DATETIME_LOCAL),
      };
    }
  }
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

That's it! At the end you should see this as a result:

result

Resources

Link to the momentjs site for further information on how to use:
http://momentjs.com

Did you like it? Why don't you try also...

How to easily add font awesome to your Vue CLI project in under 2 min.

How to easily add font awesome to your Vue CLI project in under 2 min.

In this post I will shortly show you how to easily add fontawesome to your Vue Cli project.

Build your own translator in Vue in 10 min.

Build your own translator in Vue in 10 min.

In this post I will show you how to easily build your own translator by using the Google translation API

Easy straightforward example of reading data from a Firebase database with Vue

Easy straightforward example of reading data from a Firebase database with Vue

In this post I will show you a straightforward easy example on how to read data from a Firebase database.