vue-datetime demo

Date

Value: {{ date }} 

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

Datetime

Value: {{ datetime }} 

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

12h datetime

Value: {{ datetime12 }} 

<datetime type="datetime" v-model="datetime12" use12-hour></datetime>

Time

Value: {{ time }} 

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

Macro tokens

Value: {{ datetime13 }} 

<datetime type="datetime" v-model="datetime13" format="yyyy-MM-dd HH:mm:ss"></datetime>

Complete demo

Value: {{ datetimeEmpty }} 

<datetime
  type="datetime"
  v-model="datetimeEmpty"
  input-class="my-class"
  value-zone="America/New_York"
  zone="Asia/Shanghai"
  :format="{ year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: '2-digit', timeZoneName: 'short' }"
  :phrases="{ok: 'Continue', cancel: 'Exit'}"
  :hour-step="2"
  :minute-step="15"
  :min-datetime="minDatetime"
  :max-datetime="maxDatetime"
  :week-start="7"
  use12-hour
  auto
  ></datetime>

Theming

Value: {{ datetimeTheming }} 

<datetime type="datetime" v-model="datetimeTheming" class="theme-orange"></datetime>
.theme-orange .vdatetime-popup__header,
.theme-orange .vdatetime-calendar__month__day--selected > span > span,
.theme-orange .vdatetime-calendar__month__day--selected:hover > span > span {
  background: #FF9800;
}

.theme-orange .vdatetime-year-picker__item--selected,
.theme-orange .vdatetime-time-picker__item--selected,
.theme-orange .vdatetime-popup__actions__button {
  color: #ff9800;
}