0.6.1 • Published 6 years ago

vue-datetime-2 v0.6.1

Weekly downloads
7
License
MIT
Repository
github
Last release
6 years ago

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.

Events

Component emits the input event.

License

The MIT License