Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including vue-datetime with all npm packages installed. Try it out:

var vueDatetime = require("vue-datetime")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-datetime v0.7.1

Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and disabling dates.

vue-datetime

Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and disabling dates.

Software License Latest Version on NPM npm

Demo

demo

Go to demo.

Install

yarn

yarn add vue-datetime

npm

npm install vue-datetime --save

Register the component

import Datetime from 'vue-datetime';

Vue.use(Datetime);

Register manually

Global

import { Datetime } from 'vue-datetime';

Vue.component('datetime', Datetime);

Local

import { Datetime } from 'vue-datetime';

Vue.extend({
  template: '...',
  components: {
    datetime: Datetime
  }
});

Usage

Minimal

<datetime v-model="date"></datetime>

Complete

<datetime v-model="date"
          type="datetime"
          input-format="DD-MM-YYYY HH:mm"
          wrapper-class="my-wrapper-class"
          input-class="my-input-class"
          placeholder="Select date"
          moment-locale="es"
          :i18n="{ok:'De acuerdo', cancel:'Cancelar'}"
          :disabled-dates="['2017-09-07', ['2017-09-25', '2017-10-05']]"
          max-date="2017-12-10"
          min-date="2017-07-10"
          monday-first
          auto-continue
          auto-close
          required></datetime>

Third-party libraries

The component has a dependency, moment.js, and it behaves like an input text. It should work well with third-party libraries.

How to use with other libraries:

Params

ParameterTypeDefault
v-model (required)Date String-
typeString: date, datetime or timedate
input-formatStringYYYY-MM-DD, YYYY-MM-DD HH:mm or HH:mm
wrapper-classStringnull
input-classStringnull
placeholderStringnull
moment-localeStringnull
i18nObject{ok: 'Ok', cancel: 'Cancel'}
disabled-datesArray of date Strings[]
min-dateDate Stringnull
max-dateDate Stringnull
monday-firstBooleanfalse
auto-continueBooleanfalse
auto-closeBooleanfalse
requiredBooleanfalse

The component is based on Moment.js, check out documentation to set dates (ISO 8601 recommended), input-format and moment-locale.

Time zone

If a time zone offset is not present, the local time zone is used.

The user selects in his local time but datetime returned is UTC.

Events

Component emits the input event to work with v-model. More info.

Theming

Theming is supported by overwriting CSS classes, you can see all CSS in Datetime.vue.

Also there is an example in demo.

License

The MIT License

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free