Vue Datepicker Example Tutorial From Scratch

Vue Datepicker Example Tutorial From Scratch. For this tutorial, we will use the library called vuejs-datepicker. It is a simple Vue.js datepicker component. There are some supports about datepicker including disabling of dates, inline mode, translations.

Vue Datepicker Example Tutorial

First, install the Vue.js using Vue CLI. So let us do that.

#1: Install Vue.js and other libraries

vue create dates

Go inside the folder.

cd dates

Install the vuejs-datepicker using the following command.

npm install vuejs-datepicker --save

# or

yarn add vuejs-datepicker

Also, install the Bootstrap 4 using the following command.

yarn add bootstrap

Okay, now replace the following code inside src >> App.vue file.

<template>
  <div id="app" class="container">
     <h3>Vue.js Datepicker</h3>
    <form>
      <div class="form-group">
        <vuejs-datepicker></vuejs-datepicker>
      </div>
      <div class="form-group">
        <button class="btn btn-success">Submit</button>
      </div>
    </form>
  </div>
</template>

<script>
import vuejsDatepicker from 'vuejs-datepicker';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

export default {
  name: 'app',
  components: {
    vuejsDatepicker
  }
}
</script>

Go to the terminal and start the dev server.

npm run serve

Go to the http://localhost:8080/

#2: Props in Vue.js Datepicker

There are many properties available to work with Datepicker.

<vuejs-datepicker
          format="dd/MM/yyyy"
          placeholder="Add Date"
          clear-button-icon="true"
></vuejs-datepicker>

Also, other options are the following.

#Date formatting

You can format the either using moment or using the following options.

#Function formatter

Delegates date formatting to provided function. The function will be called with date, and it has to return formatted date as a string. This allows us to use moment, date-fns, globalize or any other library to format date.

<script>
  methods: {
    customFormatter(date) {
      return moment(date).format('MMMM Do YYYY, h:mm:ss a');
    }
  }
</script>
<vuejs-datepicker :format="customFormatter"></vuejs-datepicker>

#Translations

• Add your language as a module in the src/locale/translations dir.
• Import and export it in the src/locale/index file
• Add the Language to the available languages in the readme file.
• Run npm run lint to make sure your code formatting is in line with the required code style.

#How to apply language

Below script tag in the component.

import {en, es} from 'vuejs-datepicker/dist/locale'

In component data.

data () {
    return {
      en: en,
      es: es
    }
}

html.

<vuejs-datepicker :language="es"></vuejs-datepicker>

#3: Add axios and send a POST request

Install Axios and vue-axios using the following command.

npm install axios vue-axios --save

# or

yarn add axios vue-axios

Import the modules inside src >> main.js file.

// main.js

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

Now, define the axios post request inside the src >> App.vue file.

<template>
  <div id="app" class="container">
     <h3>Vue.js Datepicker</h3>
    <form @submit.prevent="addDate">
      <div class="form-group">
        <vuejs-datepicker
          format="dd/MM/yyyy"
          placeholder="Add Date"
          clear-button-icon="true"
          v-model="obj.date"
        ></vuejs-datepicker>
      </div>
      <div class="form-group">
        <button class="btn btn-success">Submit</button>
      </div>
    </form>
  </div>
</template>

<script>
import vuejsDatepicker from 'vuejs-datepicker';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

export default {
  name: 'app',
  components: {
    vuejsDatepicker
  },
  data(){
      return {
          obj:{}
        }
    },
  methods: {
    addDate() {
      let date = {
        mainDate: this.obj.date
      }
    this.axios.post('http://localhost:4000/dates/add', date).then((res) => {
      console.log(res.data);
    });
    }
  }
}
</script>

Although, we have not created any backend yet. So let us do it that.

#4: Create a Node.js backend.

For this Vue Datepicker Example Tutorial demo, we will use Node.js as a backend and MongoDB as a database. So inside the root folder of reactdates, create one more folder called backend.

Go inside the folder and open the terminal and initialize the package.json file using the following command.

npm init -y

Now, install the following dependencies.

yarn add express body-parser mongoose cors

# or

npm install express body-parser mongoose --save

Also, install the nodemon as a development dependency.

npm install nodemon --save-dev

Now, create one file called the server.js and add the following code.

// server.js

const app = require('express')(),
  bodyParser = require('body-parser'),
  cors = require('cors'),
  mongoose = require('mongoose');

  const PORT = process.env.PORT || 4000;

  app.listen(PORT, () => {
    console.log('Listening on port ' + PORT);
  });

The next thing is to connect MongoDB database with our node.js application.

If you have not installed the MongoDB database then install it and then start the mongodb server.

Type the following command to start the MongoDB server.

mongod

So, Now, we need to connect our node.js application to the mongodb database.

Create one file called DB.js inside backend folder.

// DB.js

module.exports = {
  DB: 'mongodb://localhost:27017/vuedates'
};

Import this DB.js file inside our server.js file and use mongoose library to set up the database connection with MongoDB. We can also use Mongoose to save the data in the database using Mongoose ORM.

Write the following code inside the server.js file to connect our MongoDB application to the Node.js server.

// server.js

const app = require('express')(),
  bodyParser = require('body-parser'),
  cors = require('cors'),
  mongoose = require('mongoose')
  config = require('./DB');

  mongoose.Promise = global.Promise;
  mongoose.connect(config.DB, { useNewUrlParser: true }).then(
    () => {console.log('Database is connected') },
    err => { console.log('Can not connect to the database'+ err)}
  );

  const PORT = process.env.PORT || 4000;

  app.use(bodyParser.json());
  app.use(cors());

  app.listen(PORT, () => {
    console.log('Listening on port ' + PORT);
  });

Save a file and go to a terminal and start the node.js server using the following command. Make sure you are inside backend folder root and not in reactdates folder root.

nodemon server

#5: Create a model and Express routes

Now, we need to create two folders inside the backend folder called routes and models.

In the models’ folder, create one model called DateModel.js.

// DateModel.js

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

let DateModel = new Schema({
  mainDate: {
    type: Date
  },
},{
    collection: 'dates'
});

module.exports = mongoose.model('DateModel', DateModel);

Here, we will store only one field called mainDate, and its datatype is Date.

In the routes folder, create one file called date.route.js. Add the following code inside the date.route.js file.

// date.route.js

const dateRoute = require('express').Router(),
      DateModel = require('../models/DateModel');

dateRoute.route('/add').post(function (req, res) {
  let datemodel = new DateModel(req.body);
  datemodel.save()
    .then(dateSaved => {
    res.status(200).json({'dateSaved': 'Date is added successfully'});
    })
    .catch(err => {
    res.status(400).send("unable to save to database");
    });
});

module.exports = dateRoute;

Finally, import the date.route.js file inside the server.js.

// server.js

const app = require('express')(),
  bodyParser = require('body-parser'),
  cors = require('cors'),
  mongoose = require('mongoose'),
  config = require('./DB'),
  dateRoute = require('./routes/date.route');

  mongoose.Promise = global.Promise;
  mongoose.connect(config.DB, { useNewUrlParser: true }).then(
    () => {console.log('Database is connected') },
    err => { console.log('Can not connect to the database'+ err)}
  );

  const PORT = process.env.PORT || 4000;

  app.use(bodyParser.json());
  app.use(cors());

  app.use('/dates', dateRoute);

  app.listen(PORT, () => {
    console.log('Listening on port ' + PORT);
  });

Now, our backend work is done. When the POST request hits the route: /dates/add, it will save the values inside the mongodb database.

Make sure, all of your three servers are running. 

1. Mongo database server
2. Vue.js development server
3. Node.js server

Save the file and go to the browser and submit the date and you will see in the console that the date is added successfully. You can check your MongoDB database.

Finally, Vue Datepicker Example Tutorial is over. Thanks for taking.