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

Overview

vue-datetime

Software License Latest Version on NPM npm Vue 2.x Build Coverage

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

Demo

Go to demo.

demo

Installation

Bundler (Webpack, Rollup...)

yarn add luxon vue-datetime weekstart

Or

npm install --save luxon vue-datetime weekstart

weekstart is optional, is used to get the first day of the week.

Register

import Vue from 'vue'
import { Datetime } from 'vue-datetime'
// You need a specific loader for CSS files
import 'vue-datetime/dist/vue-datetime.css'

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
  }
});

Browser

Download vue, luxon, weekstart and vue-datetime or use a CDN like unpkg.

">
<link rel="stylesheet" href="vue-datetime.css">link>
<script src="vue.js">script>
<script src="luxon.js">script>
<script src="weekstart.js">script>
<script src="vue-datetime.js">script>

The component registers itself automatically as . If you want to use a different name then register it explicitly:

Vue.component('vue-datetime', window.VueDatetime.Datetime);

weekstart is optional, is used to get the first day of the week.

Usage

Minimal

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

Setup

Parameters

Parameter Type Default Description
v-model (required) ISO 8601 String - Datetime.
type String date Picker type: date, datetime or time.
input-id String '' Id for the input.
input-class String, Array or Object '' Class for the input.
input-style String, Array or Object '' Style for the input.
hidden-name String null Name for hidden input with raw value. See #51.
value-zone String UTC Time zone for the value.
zone String local Time zone for the picker.
format Object or String DateTime.DATE_MED, DateTime.DATETIME_MED or DateTime.TIME_24_SIMPLE Input date format. Luxon presets or tokens.
phrases Object {ok: 'Ok', cancel: 'Cancel'} Phrases.
use12-hour Boolean false Display 12 hour (AM/PM) mode
hour-step Number 1 Hour step.
minute-step Number 1 Minute step.
min-datetime ISO 8601 String null Minimum datetime.
max-datetime ISO 8601 String null Maximum datetime.
auto Boolean false Auto continue/close on select.
week-start Number auto from locale if weekstart is available or 1 First day of the week. 1 is Monday and 7 is Sunday.
flow Array Depends of type Customize steps flow, steps available: time, date, month, year. Example: ['year', 'date', 'time']
title String '' Popup title.

Input inherits all props not defined above but style and class will be inherited by root element. See inheritAttrs option

The component is based on Luxon, check out documentation to set time zones and format.

Internationalization

Date internationalization depends on luxon. Set the default locale.

import { Settings } from 'luxon'

Settings.defaultLocale = 'es'

Events

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

close event is emitted when the popup closes.

Also, input text inherits all component events.

Slots

You can customize the component using named slots.

Available slots: before, after, button-cancel and button-confirm

Button customization example:

The field description ">
<datetime v-model="date" input-id="startDate">
  <label for="startDate" slot="before">Field Labellabel>
  <span class="description" slot="after">The field descriptionspan>
  <template slot="button-cancel">
    <fa :icon="['far', 'times']">fa>
    Cancel
  template>
  <template slot="button-confirm">
    <fa :icon="['fas', 'check-circle']">fa>
    Confirm
  template>
datetime>

You can also use slot-scope to determine which view is currently active:

Next Publish ">
<template slot="button-confirm" slot-scope="scope">
  <span v-if='scope.step === "date"'>Next <i class='fas fa-arrow-right' />span>
  <span v-else><i class='fas fa-check-circle' /> Publishspan>
template>

Theming

Theming is supported by overwriting CSS classes.

Development

Launch lint and tests

yarn test

Launch visual tests

yarn dev

Build

Bundle the js and css to the dist folder:

yarn build

License

The MIT License

You might also like...
A Color Picker Component Based on Vue And Element-UI Supports Drag And Drop
A Color Picker Component Based on Vue And Element-UI Supports Drag And Drop

@toc Introduction 简介 This is a color picker component based on vue and element-ui. It is powerful and supports drag and drop, color picking and other

Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent to day.js.
Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent to day.js.

Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent to day.js. Documentation For full documentation, visit lite

An easy-to-use and customizable date picker component powered by Vue js

vue-datepicker An easy-to-use and customizable date picker component powered by Vue js Demo:s https://codesandbox.io/s/eager-rubin-5zcm9 Install npm i

A simple Vue.js date and time picker made with material design in mind

vue-material-date-time-picker A date and time picker Vue component. Compatible with Vue 2.x. Performed in material design. Demo Install Usage Props NB

A vue date picker component inspired by material design

Vue Date Picker A vue date picker component inspired by material design Contents Installing Examples Formatting Selected Date API Installing $ npm ins

Vue date range picker component
Vue date range picker component

A responsive date range picker for Vue.js that displays the number of nights selected and allow several useful options like custom check-in/check-out

a date-range-picker follows the Material Design spec powered by vue.js (alpha)
a date-range-picker follows the Material Design spec powered by vue.js (alpha)

Document | 中文文档 If the document is not accessible, please open an issue, I will fix it right away. v-md-date-range-picker Material Design DateRangePic

A Vue project - single date picker

A Vue project - single date picker

A date-range-picker follows the Material Design spec powered by vue.js
A date-range-picker follows the Material Design spec powered by vue.js

A date-range-picker follows the Material Design spec powered by vue.js

Mobile friendly datetime picker for Vue. Supports date and datetime modes, i18n and more.

vue-datetime Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and more. Demo Go to demo. Installation Bundler (We

Mario Juárez 983 Nov 16, 2022
vue 3 datepicker. supports disabling, highlighting of dates and programmatic access of date.

Vue 3 Datepicker A datepicker Vue component. Compatible with Vue 3 Only Demo Install Usage Date Formatting Props Events Disabled dates Highlighted dat

shubhadip 36 Nov 24, 2022
A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations

Datepicker A datepicker Vue component. Compatible with Vue 2.x Demo Install Usage Date Formatting Props Events Disabled dates Highlighted dates Transl

Charlie Kassel 2.6k Nov 19, 2022
A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations

Datepicker 2 A datepicker Vue component. Compatible with Vue 2.x Demo Install Upgrade to 2.x+ Usage Date Formatting Props Events Disabled dates Highli

hokify 15 Jul 28, 2022
Lightweight and mobile friendly date time picker based on Vue.

Vue date pick Lightweight and mobile friendly date time picker based on Vue. Vue date pick emphasizes performance, elegant and usable UI on all screen

Damir Brekalo 244 Nov 4, 2022
Vue3-daterange-picker - Date range picker component for vue made without jQuery dependency

vue3-daterange-picker A modified date range picker to run on Vue 3. The componen

ADEGBOYE JOSHUA 2 Aug 31, 2022
Vue Nuxt Scroll Datepicker - Fast, powerful and easy to use component datetime picker for Nuxt Vue

Vue Nuxt Scroll Datepicker - Cashbac In this article, we’ll look at how date and time picker and a virtual scroll. Fast, powerful and easy to use comp

mohammad ichlas 2 Apr 25, 2022
Fast, powerful and easy to use component datetime picker for VueJS

Vue Datetime Picker Fast, powerful and easy to use component datetime picker for VueJS. The component includes localization, highlight and disable dat

Vladyslav Shchepotin 31 Nov 24, 2022
Vue.js component for Flatpickr datetime picker :calendar:

Vue FlatPickr Component Vue.js component for Flatpickr date-time picker. Demo or JSFiddle Version matrix Vue.js version Package version Branch 2.x 8.x

Ankur Kumar 907 Nov 17, 2022
Vuetify datetime picker with input fields

Vuetify plugin VDatetimeField Vuetify datetime picker with input fields ?? Featu

null 2 Aug 23, 2022