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

Mario Juárez

Last update: Dec 16, 2022

Overview

vue-datetime

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

Demo

Go to demo.

Installation

Bundler (Webpack, Rollup...)

yarn add luxon vue-datetime weekstart

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 <datetime>. 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.
hide-backdrop	`Boolean`	`false`	Show/Hide backdrop.
backdrop-click	`Boolean`	`true`	Enable/Disable backdrop click to cancel (outside click).

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:

<datetime v-model="date" input-id="startDate">
  <label for="startDate" slot="before">Field Label</label>
  <span class="description" slot="after">The field description</span>
  <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:

<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' /> Publish</span>
</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

Comments

Error in page after pack files

Hi, I use vue-datetime and moment in my project, and I change the attribute locale of the datetime component to value zh-cn, then it's ok when I run in npm run dev. However, I pack all files by npm run build and open the page, there is error like this when click the datetime DOM:

TypeError: Cannot read property 'weekdaysMin' of null at Object.r [as weekdays] (index.js:formatted:13497) at s.weekdays (index.js:formatted:13497) at fs.get (index.js:formatted:13497) at fs.evaluate (index.js:formatted:13497) at s.weekdays (index.js:formatted:3642) at s.render (index.js:formatted:13497) at s.e._render (index.js:formatted:13497) at s.r (index.js:formatted:3480) at fs.get (index.js:formatted:13497) at fs.run (index.js:formatted:13497)

Would you help to check what wrong? Thank you.
bug

opened by lwenn 12
Format option doesn't work
Latest version of Vue JS and the plugin is at the latest version.

The format option doesn't appear to work, this is my setup:

<datetime type="date" v-model="formData.testDate" input-class="form-control" format="DateTime.DATE_SHORT"></datetime>

My output, here's an image of the input:
opened by sts-ryan-holton 9

CSS Styles not loading?

Versions

vue: 2.5.17
vue-datetime: ^1.0.0-beta.8
luxon: ^1.8.2

Description:

CSS Styles not loading?

Steps To Reproduce:

Including a reproduction would be great. You can fork this fiddle: https://jsfiddle.net/ofc30uv3/ Created Template where I'm using your awesome module:

<template>
    <div>
...
               <div class="form-group col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3">
                   <label for="request.away_end_date">Letzter Tag der Abwesenheit</label>
                   <datetime type="date" v-model="request.away_end_date" id="request.away_end_date" placeholder="Datum auswählen"></datetime>
                </div>
...
    </div>
</template>
<script>
    import {Datetime} from 'vue-datetime'
    // You need a specific loader for CSS files
    import 'vue-datetime/dist/vue-datetime.css'
    // use(Datetime);
    import { Settings } from 'luxon'
    Settings.defaultLocale = 'de';

...
</script>

Added this to the app.scss

// Datetime CSS
@import '~vue-datetime/dist/vue-datetime.css';

I checked the folder there is an empty vue-datetime.css. I dont think thats the way it should be, right? Folder: node_modules/vue-datetime/dist/vue-datetime.css

opened by shuegelm 9

wrong min-datetime by using timezone and different date from utc
Versions

vue: edge(2.5.17)

vue-datetime: 1.0.0-beta.8

luxon: 1.3.0

Description:

I set value-zone and zone and min-datetime props. Timezone is Asia/Tokyo(UTC+09:00). min-datetime props is wrong work, when min-datetime props is set to a value that is different between utc date and date of specified time zone.

example

min-datetime | expect(Asia/Tokyo) | actual(Asia/Tokyo) -- | -- | -- 2018-12-10T14:59Z | 2018-12-10T23:59+09:00 | 2018-12-10T23:59+09:00 2018-12-10T15:00Z | 2018-12-11T00:00+09:00 | 2018-12-10T00:00+09:00

Otherwise, an excellent component!

Steps To Reproduce:

https://jsfiddle.net/5frzbmka/1/
bug
opened by tsuchikazu 8
Selecting day in following month actually selects previous day
Versions

vue: 2.6.7

vue-datetime: 1.0.0-beta.10

luxon: 1.11.3

Description:

I have a weird bug in one of my projects. Using the component like this:

<datetime v-model="filterData.from" type="date" :auto="true" :format="'dd.LL.yyyy'" @input="refresh" ></datetime>

I prefill the "from" value with a date one month ago (so for example March 12th). Now I open it, select a date in the same month (March 15th). Then I open it and select a date in the NEXT month (April 10th).

Invariably it selects the day BEFORE the one I have selected (so April 9th). From what I've seen this only happens if I select a date in this month first and then the next month. If I directly select April 10th it works as expected. Same if I select March 15th and afterwards March 27th - no problem.

I am a little lost what could cause this. Any pointers would be very welcome.
opened by ftiersch 7
format:macro tokens are supported.

The current format parameters have low extensibility. Add String format to the format parameters without affecting users and allow users to use Macro tokens in Luxon.

opened by hoythan 7
Feature backdrop
Feature update for the backdrop base on the issue: #231

Prop added 'hideBackdrop' for hiding backdrop.

Prop added 'backdropClick' for disabling click to cancel on backdrop (outside click).

Updated ReadMe.
opened by alanbosco 6
Chrome latest browser doesnt work
Versions

vue: v2.5.16

vue-datetime: v1.0.0-beta.8

Description:

With the vue-datetime set with time-zone as 'Europe\Berlin', the returned timestamp is 2020-02-10T00:00:00.000+25:00 when the date is chosen as 11.02.2020.

Affected Chrome : Version 80.0.3987.87 (Official Build) (64-bit)
opened by algates90 6

Vue.component is not a function

Versions

vue: 2.5.16
vue-datetime: 1.0.0-beta.3
luxon: 1.0.0

Description:

Help me please. Why I got this error? How to fix it?

TypeError: Vue.component is not a function
    at plugin (vue-datetime.js:718)
    at resolveAsyncComponent (vue.esm.js:2338)
    at createComponent (vue.esm.js:4219)
    at _createElement (vue.esm.js:4420)
    at createElement (vue.esm.js:4357)
    at Proxy.vm._c (vue.esm.js:4489)
    at Proxy.eval (eval at createFunction (vue.esm.js:10680), <anonymous>:2:584)
    at Vue._render (vue.esm.js:4544)
    at Vue.updateComponent (vue.esm.js:2788)
    at Watcher.get (vue.esm.js:3142)

vue-datetime.js:718:

function plugin (Vue) {
  Vue.component('datetime', Datetime);
}

I use Symfony 4, webpack and yarn. And built it by command

yarn run encore dev

app.js

import Vue from 'vue'
import Datetime from 'vue-datetime'
import 'vue-datetime/dist/vue-datetime.css'

(function () {
    new Vue({
        el: '#app',
        components: {
            datetime: Datetime
        }
    });
})();

webpack.config.js

var Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())

    .enableVueLoader()
    .addEntry('app', './assets/js/app.js')
;

module.exports = Encore.getWebpackConfig();

opened by ultracote 6

Invalid prop: type check failed for prop "format". Expected Object, got String.
Versions

vue: 2.5.13

vue-datetime: 1.0.0-beta.3

luxon: 0.3.1

Description:

The documentation says prop format has type String. But by providing a string, an Invalid prop: type check failed for prop "format". Expected Object, got String. error is thrown.
opened by rayax86 6
Some example with date formatting?

In the documentation it says it is string but when i try string i get errors. I wish there were more examples for using the format. How can i set this format for example: dd.mm.yyyy

opened by TheAndroidGuy 6
Firefox: Trapped inside calendar when using keyboard tab
Versions

vue: 2.6.11

vue-datetime: 1.0.0-beta.10

luxon: 1.22.0

Firefox: 94.0.1

Description:

When accessing vue-datetime in Firefox via tabbing on the keyboard, it is not possible to tab to the next element and therefore close the calendar. The user can only tab to the previous component but cannot move forward.

Steps To Reproduce:

Visit the official demo website and tab through while using Firefox: https://mariomka.github.io/vue-datetime/
opened by stevefrenzel 0
React porting

Hello

Is it possible to use vue-datetime as a React Component, do you have a Porting available?

With the same styling, because React datepicker doesn't have a good styling as default.

opened by moparlakci 0

Datetime component fires this.emitInput() upon creation - Solved

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Fixed issue https://github.com/mariomka/vue-datetime/issues/46

Here is the diff that solved my problem:

diff --git a/node_modules/vue-datetime/src/Datetime.vue b/node_modules/vue-datetime/src/Datetime.vue
index a8d9e99..4c28881 100644
--- a/node_modules/vue-datetime/src/Datetime.vue
+++ b/node_modules/vue-datetime/src/Datetime.vue
@@ -206,7 +206,8 @@ export default {
         datetime = startOfDay(datetime)
       }
 
-      this.$emit('input', datetime ? datetime.toISO() : '')
+      const value = datetime ? datetime.toISO() : null
+      this.datetime !== value ? this.$emit('input', value) : null
     },
     open (event) {
       event.target.blur()

opened by aqjw 0

Emit an 'open' event when the popup is opened

This solves issue #137 using the same approach as pull request #175. A README update and test is included.

To pass tests I had to update the default locale test in DatetimeCalendar.spec.js. The test was rendering each weekday's name without a period ex. Lun but it was expecting a period Lun.. I suspect this was due to changes outside of this project's scope. Hopefully this change isn't a problem.

opened by Misacorp 0
Select only Year or Year/Month

I have to make a DateTime selector but according to what the user has chosen before i only need a year or year + month ( or year + month + day ^^ ).

can use this components to do this ? ( i already use it, so i didn't want to use another components only for this page )

opened by andrelec1 0