Best Vue.js DateTime Components and examples

Let us look at some easy to use vue.ja datetime componenets and plugins and how to use them in our Vue app.

(a). VDatetimeField

Vuetify datetime picker with input fields .

Here are it’s features:

• Input – You can input date and time via keyboard
• Use separately – You can use only datepicker or only timepicker
• Masked – Time and date input masked

Here is a demo screenshot:

Step 1: Install it

You can install it via NPM:

npm install --save v-datetime-field

or via yarn

yarn add v-datetime-field

Step 2: Import

Import locally in component.vue

<script>
import { VDatetimePicker } from 'v-datetime-field'

export default {
  components: { VDatetimePicker },
}
</script>

Or globally in main.js:

import Vue from 'vue'
import VDatetimePicker from 'v-datetime-field'

Vue.use(VDatetimePicker)

Then use.

Read more here.

(b). vue-time-date-range-picker

A Vue Component to pick a ranged datetime in calendar. Built alongside Vue 2.x . This datepicker utilize moment for translations.

You can check a demo at codepen.

Step 1: Install it

Install it via NPM:

npm i vue-time-date-range-picker

Step 2: Import

Next import it:

import DatePicker, { CalendarDialog } from 'vue-time-date-range-picker/dist/vdprDatePicker'

export default {
  //...
  components: {
    DatePicker,
    CalendarDialog
  }
  //...
}

You can also import from CDN:

<div id="app">
  <datepicker></datepicker>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment-with-locales.min.js"></script>
<script src="https://unpkg.com/vue-time-date-range-picker@1.5.0/dist/vdprDatePicker.js"></script>
<script>
const app = new Vue({
  el: '#app',
  components: {
    'datepicker' : vdprDatePicker.default,
    'calendar-dialog' : vdprDatePicker.CalendarDialog
  }
})
</script>

Step 3: Example

Here are some examples:

Available Dates

<template>
  <div>
    <h2>Example Available Dates</h2>
    <h4>Available date with "to" and "from"</h4>
    <pre>
      {
        from: new Date('2021 06 30'),
        to: new Date('2021 09 01')
      }
    </pre>
    <date-picker :dateInput="dateInput" :availableDates="availableDates1"/>
    <br />
    <h4>Available date with "ranges"</h4>
    <pre>
      {
        ranges: [
          {
            from: new Date("2021 05 01"),
            to: new Date("2021 05 31")
          },
          {
            from: new Date("2021 09 01"),
            to: new Date("2021 09 31")
          }
        ]
      }
    </pre>
    <date-picker :dateInput="dateInput" :availableDates="availableDates2"/>
    <br />
    <h4>Available date with "dates"</h4>
    <pre>
      {
        dates: [
          new Date('2021 09 01'),
          new Date('2021 07 26'),
          new Date('2021 09 05'),
        ]
      }
    </pre>
    <date-picker :dateInput="dateInput" :availableDates="availableDates3"/>
    <br />
    <h4>Available date with "custom" function</h4>
    <pre>
      {
        custom: function(date) {
          return date.getDay() == 1;
        }
      }
    </pre>
    <date-picker :dateInput="dateInput" :availableDates="availableDates4"/>
  </div>
</template>

<script>
import DatePicker from '../src/Components/DatePicker.vue';

export default {
  components: {
    DatePicker,
  },
  data() {
    return {
      dateInput: {
        placeholder: 'Select Date',
      },
      availableDates1: {
        from: new Date('2021 06 30'),
        to: new Date('2021 09 01'),
      },
      availableDates2: {
        ranges: [
          {
            from: new Date('2021 05 01'),
            to: new Date('2021 05 31'),
          },
          {
            from: new Date('2021 09 01'),
            to: new Date('2021 09 31'),
          },
        ],
      },
      availableDates3: {
        dates: [
          new Date('2021 09 01'),
          new Date('2021 07 26'),
          new Date('2021 09 05'),
        ],
      },
      availableDates4: {
        custom(date) {
          return date.getDay() === 1;
        },
      },
    };
  },
};
</script>

Date Formatting Example

<template>
  <div>
    <h2>Example Date Format</h2>
    <h4>format applied date with "format" and "sameDateFormat"</h4>
    <pre>
      {
        format: "DD MM YYYY hh:mm",
        sameDateFormat: {
          from: "DD MM YYYY, hh:mm",
          to: "hh:mm",
        },
      }
    </pre>
    <date-picker
      :dateInput="dateInput"
      :format="format"
      :sameDateFormat="sameDateFormat"
    />
  </div>
</template>

<script>
import DatePicker from '../src/Components/DatePicker.vue';

export default {
  components: {
    DatePicker,
  },
  data() {
    return {
      dateInput: {
        placeholder: 'Select Date',
      },
      format: 'DD MM YYYY hh:mm',
      sameDateFormat: {
        from: 'DD MM YYYY, hh:mm',
        to: 'hh:mm',
      },
    };
  },
};
</script>

Reference

Read more here.