vue-datetime demo

Date

Value: {{ date }}

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

Time

Value: {{ time }}

<datetime v-model="time" type="time"></datetime>

Datetime

Value: {{ datetime }}

<datetime v-model="datetime" type="datetime" auto-continue></datetime>

Complete demo

Placeholder, i18n, input format, input class, wrapper class, disabled dates, max date, min date, auto continue, auto close, monday first and required.

Value: {{ dateEmpty }}


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

Stylized

For instance, change primary color.

Value: {{ dateStyle }}

.vdatetime-popup__header,
.vdatetime-popup__date-picker__item--selected > span > span,
.vdatetime-popup__date-picker__item--selected:hover > span > span {
    background: #FF9800;
}

.vdatetime-popup__list-picker__item--selected,
.vdatetime-popup__actions__button {
    color: #FF9800;
}