Vuejs-Vue vanilla datetime picker v1.1.13: vue-vanilla-datetime-picker - Datetime picker for Vue.

icon
Latest Release: v1.1.13

Fixed:

  • Method open triggered open and close events together (issue #7).
Source code(tar.gz)
Source code(zip)

Vue Datetime Picker

Build Status

Fast, powerful and easy to use component datetime picker for VueJS. The component includes localization, highlight and disable date, 12/24-hour time, inline mode, etc.

Demo

See demo here

vue-datetime-picker

Requirements

  • Vue.js ^2.5.0

Usage

npm install vue-vanilla-datetime-picker --save
import DateTimePicker from 'vue-vanilla-datetime-picker';

Vue.component('date-time-picker', DateTimePicker);
@import "node_modules/vue-vanilla-datetime-picker/dist/DateTimePicker"

Props:

Name Required Type Default Description
v-model, value * String, Date, DateTime (luxon) Value
value-format String yyyy-LL-dd HH:mm:ss Value format
max-date String, Date, DateTime (luxon) null Max date
min-date String, Date, DateTime (luxon) null Min date
constraints-format String yyyy-LL-dd Constraints format
locale String en Set locale.
inline Boolean false Enable inline mode.
disabled Boolean false Disable datetime picker.
format String yyyy-LL-dd HH:mm Display format.
time-picker Boolean true Show time picker.
hour-time Number 24 Hour in 12/24-hour time. Values: '12', '24'.
no-toggle-time-picker Boolean false No toggle time picker button.
only-time-picker Boolean false Show only time picker.
start-from-sunday Boolean false Set Sunday as first day of week.
minute-step Number 1 Set step for minute.
seconds-picker Boolean false Show second picker.
initial-view String days Initial view: 'days', 'months', 'years'
initial-view-date String, Date, DateTime (luxon) days Initial date view
main-button-class String Class for main button.
disabled-dates Array [] Array of disabled dates.
highlighted Array [] Array of highlighted dates. Example: [{ date: '2018-09-17', class: 'highlighted' }]
auto-close Boolean false Close date picker after select date.
clear-button Boolean false Show "Clear" button.
close-button Boolean false Show "Close" button.
today-button Boolean false Show "Today" button.
value-type String Auto Set value type. Types: 'Auto', 'String', 'Date', 'Luxon'.
empty-value Any '' Set empty value for clear button.

Slots:

Name Description
choose-date For main button if date not selected.
formatted-datetime For main button if date selected.
date For date button.
time For time button.
months-prev For previous month button.
months-next For next month button.
years-prev For previous year button.
years-next For next year button.
decades-prev For previous decade button.
decades-prev For next decade button.
hours-up For hours up button.
hours-down For hours down button.
minutes-up For minutes up button.
minutes-down For minutes down button.
seconds-up For seconds up button.
seconds-down For seconds down button.
meridiems-up For meridiems up button.
meridiems-down For meridiems down button.
clear For clear button.
close For close button.
today For today button.

Events:

Name
close
open
change-month
change-year
change-decade

Methods:

Name Description
open Open datetime picker
close Close datetime picker

What about RTL support?

If you need an RTL version of component for your project, recommend use PostCSS plugin which is called postcss-rtl.

Development

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build-lib

Comments

  • How to set timezone?
    How to set timezone?

    Dec 13, 2019

    Hello, When I submit form, date picker value changed. May be default timezone 'America/New_York' by the following info https://github.com/moment/luxon/blob/master/docs/formatting.md#table-of-tokens But I need timezone 'Asia/Dhaka'. Please help me with demo how to the problem.

    <date-time-picker v-model="date_time" value-format="yyyy-LL-dd HH:mm:ss" format="dd-LLLL-yyyy hh:mm a" :today-button="true" :close-button="true" :hour-time="12"></date-time-picker>

    Reply
  • How to set current time when click today button?
    How to set current time when click today button?

    Dec 15, 2019

    Hello, I've added date and time picker with today button. But when I click today it only set today date not set current time.

    <date-time-picker 
            v-model="date_time" 
            value-format="yyyy-LL-dd HH:mm:ss" 
           format="dd-LLLL-yyyy hh:mm a" 
           :today-button="true" 
           :close-button="true" 
          :hour-time="12"></date-time-picker>
    

    Please help me how to set the current time when clicking today button.

    Thanks

    Reply
  • chore(deps): bump dns-packet from 1.3.1 to 1.3.4
    chore(deps): bump dns-packet from 1.3.1 to 1.3.4

    May 26, 2021

    Bumps dns-packet from 1.3.1 to 1.3.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • chore(deps): bump postcss from 7.0.35 to 7.0.36
    chore(deps): bump postcss from 7.0.35 to 7.0.36

    Jun 15, 2021

    Bumps postcss from 7.0.35 to 7.0.36.

    Release notes

    Sourced from postcss's releases.

    7.0.36

    • Backport ReDoS vulnerabilities from PostCSS 8.
    Changelog

    Sourced from postcss's changelog.

    7.0.36

    • Backport ReDoS vulnerabilities from PostCSS 8.
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Configure Renovate
    Configure Renovate

    Jun 17, 2021

    WhiteSource Renovate

    Welcome to Renovate! This is an onboarding PR to help you understand and configure settings before regular Pull Requests begin.

    🚦 To activate Renovate, merge this Pull Request. To disable Renovate, simply close this Pull Request unmerged.


    Detected Package Files

    • package.json (npm)
    • .travis.yml (travis)

    Configuration Summary

    Based on the default config's presets, Renovate will:

    • Start dependency updates only once this onboarding PR is merged
    • Enable Renovate Dependency Dashboard creation
    • If semantic commits detected, use semantic commit type fix for dependencies and chore for all others
    • Ignore node_modules, bower_components, vendor and various test/tests directories
    • Autodetect whether to pin dependencies or maintain ranges
    • Rate limit PR creation to a maximum of two per hour
    • Limit to maximum 20 open PRs at any time
    • Group known monorepo packages together
    • Use curated list of recommended non-monorepo package groupings
    • Fix some problems with very old Maven commons versions
    • Ignore spring cloud 1.x releases
    • Ignore http4s digest-based 1.x milestones
    • Use node versioning for @types/node
    • Limit concurrent requests to reduce load on Repology servers until we can fix this properly, see issue 10133

    🔡 Would you like to change the way Renovate is upgrading your dependencies? Simply edit the renovate.json in this branch with your custom config and the list of Pull Requests in the "What to Expect" section below will be updated the next time Renovate runs.


    What to Expect

    With your current configuration, Renovate will create 16 Pull Requests:

    chore(deps): update dependency browserslist to 4.16.5 [security]
    • Branch name: renovate/npm-browserslist-vulnerability
    • Merge into: master
    • Upgrade browserslist to 4.16.5
    chore(deps): update dependency dns-packet to 1.3.2 [security]
    • Branch name: renovate/npm-dns-packet-vulnerability
    • Merge into: master
    • Upgrade dns-packet to 1.3.2
    chore(deps): update dependency glob-parent to 5.1.2 [security]
    • Branch name: renovate/npm-glob-parent-vulnerability
    • Merge into: master
    • Upgrade glob-parent to 5.1.2
    chore(deps): update dependency nth-check to 2.0.1 [security]
    • Branch name: renovate/npm-nth-check-vulnerability
    • Merge into: master
    • Upgrade nth-check to 2.0.1
    chore(deps): update dependency path-parse to 1.0.7 [security]
    • Branch name: renovate/npm-path-parse-vulnerability
    • Merge into: master
    • Upgrade path-parse to 1.0.7
    chore(deps): update dependency postcss to 7.0.36 [security]
    • Branch name: renovate/npm-postcss-vulnerability
    • Merge into: master
    • Upgrade postcss to 7.0.36
    chore(deps): update dependency set-value to 4.0.1 [security]
    • Branch name: renovate/npm-set-value-vulnerability
    • Merge into: master
    • Upgrade set-value to 4.0.1
    chore(deps): update dependency url-parse to 1.5.2 [security]
    • Branch name: renovate/npm-url-parse-vulnerability
    • Merge into: master
    • Upgrade url-parse to 1.5.2
    chore(deps): pin dependencies
    chore(deps): update vue monorepo
    chore(deps): update dependency eslint to v7.32.0
    • Schedule: ["at any time"]
    • Branch name: renovate/eslint-7.x
    • Merge into: master
    • Upgrade eslint to 7.32.0
    chore(deps): update dependency eslint-plugin-import to v2.25.2
    • Schedule: ["at any time"]
    • Branch name: renovate/eslint-plugin-import-2.x
    • Merge into: master
    • Upgrade eslint-plugin-import to 2.25.2
    chore(deps): update dependency eslint-plugin-vue to v7.19.1
    • Schedule: ["at any time"]
    • Branch name: renovate/eslint-plugin-vue-7.x
    • Merge into: master
    • Upgrade eslint-plugin-vue to 7.19.1
    chore(deps): update dependency babel-jest to v27
    • Schedule: ["at any time"]
    • Branch name: renovate/major-jest-monorepo
    • Merge into: master
    • Upgrade babel-jest to 27.3.0
    chore(deps): update dependency eslint to v8
    • Schedule: ["at any time"]
    • Branch name: renovate/eslint-8.x
    • Merge into: master
    • Upgrade eslint to 8.0.1
    fix(deps): update dependency luxon to v2
    • Schedule: ["at any time"]
    • Branch name: renovate/luxon-2.x
    • Merge into: master
    • Upgrade luxon to ^2.0.0

    🚸 Branch creation will be limited to maximum 2 per hour, so it doesn't swamp any CI resources or spam the project. See docs for prhourlylimit for details.


    ❓ Got questions? Check out Renovate's Docs, particularly the Getting Started section. If you need any further assistance then you can also request help here.


    This PR has been generated by WhiteSource Renovate. View repository job log here.

    Reply
  • chore(deps): bump path-parse from 1.0.6 to 1.0.7
    chore(deps): bump path-parse from 1.0.6 to 1.0.7

    Aug 10, 2021

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • chore(deps): bump url-parse from 1.5.1 to 1.5.3
    chore(deps): bump url-parse from 1.5.1 to 1.5.3

    Oct 5, 2021

    Bumps url-parse from 1.5.1 to 1.5.3.

    Commits
    • ad44493 [dist] 1.5.3
    • c798461 [fix] Fix host parsing for file URLs (#210)
    • 201034b [dist] 1.5.2
    • 2d9ac2c [fix] Sanitize only special URLs (#209)
    • fb128af [fix] Use 'null' as origin for non special URLs
    • fed6d9e [fix] Add a leading slash only if the URL is special
    • 94872e7 [fix] Do not incorrectly set the slashes property to true
    • 81ab967 [fix] Ignore slashes after the protocol for special URLs
    • ee22050 [ci] Use GitHub Actions
    • d2979b5 [fix] Special case the file: protocol (#204)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • chore(deps): bump follow-redirects from 1.14.1 to 1.14.7
    chore(deps): bump follow-redirects from 1.14.1 to 1.14.7

    Jan 13, 2022

    Bumps follow-redirects from 1.14.1 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • feature(project): add class for this day
    feature(project): add class for this day

    Jun 13, 2019

                                                                                                                                                                                                           
    Reply
  • Fixed click tracking area
    Fixed click tracking area

    Feb 21, 2019

                                                                                                                                                                                                           
    Reply
  • Issue triggering open event.
    Issue triggering open event.

    May 24, 2019

    Hi there, thanks for this awesome component.

    When I try to open the datepicker using the open method, open and close are both fired. Eg:

    <DateTimePicker ref="datepicker" .. />
    <button @click="triggerDateTimePicker">Open</button>
    
    methods: {
       triggerDateTimePicker() {
           // ...
           this.$refs.datepicker.open() // Trigger open then close methods
       }
    }
    

    Version: 1.1.12 VueJS: 2.6.10

    bug 
    Reply
  • Default slots broken for Vuejs 2.5
    Default slots broken for Vuejs 2.5

    May 13, 2019

    Since 14e8631694f64461fc9657a677485149101ec026 the slots were changed to use Vuejs 2.6+ v-slot directive.

    In af115bc25cc2643520785917fd83245ccb0143e5 Vuejs dependency was reverted back to Vuejs 2.5.0 in your readme but in your package.json you incremented the version to 2.6.8. Thus your readme's requirements do not correctly reflect the correct dependencies.

    I was able to hard code my slots in, as that was the only way to get the backwards compatibility without losing fixed changes.

    In case anyone else runs into this issue, here is how I fixed it.

    <DateTimePicker
      v-model="value"
      :no-toggle-time-picker="true"
      :hour-time="12"
      :minute-step="15"
      format="DDDD hh:mm a"
    >
      <template slot="hours-up">
        &uarr;
      </template>
      <template slot="hours-down">
        &darr;
      </template>
      <template slot="minutes-up">
        &uarr;
      </template>
      <template slot="minutes-down">
        &darr;
      </template>
      <template slot="meridiems-up">
        &uarr;
      </template>
      <template slot="meridiems-down">
        &darr;
      </template>
    </DateTimePicker>
    

    Will update if I find anymore breaking changes for Vuejs 2.5.X

    bug 
    Reply
  • Support for vuejs 2.6
    Support for vuejs 2.6

    Feb 20, 2019

    vue-vanilla-datetime-picker does not work with vuejs >= 2.6.0.

    When clicking on the button, three events are emitted: open, change-view and close. I suspect the close event should not be triggered ;-)

    See demo in this codepen.

    bug 
    Reply
  • Does not support IE11
    Does not support IE11

    Aug 7, 2019

    Hello, could you add a "browser support" section? The datepicker does not work on IE11 because the browser does not support Math.sign (at least). Thanks.

    Reply
  • 12hr format
    12hr format

    Oct 26, 2018

    Great plugin. Just missing the 12hrs format option, so a third input for "am/pm".

    Reply
  • Cannot create property 'months-prev' on boolean
    Cannot create property 'months-prev' on boolean

    Mar 12, 2019

    I've encountered this issue after update to 1.1.2

    image

    My markup

    <date-time-picker
      ref="datetime.from"
      v-model="data.datetime.from"
      value-format="yyyy-LL-dd HH:mm:ss"
      format="yyyy-LL-dd HH:mm"
      main-button-class="form-control text-left"
    ></date-time-picker>
    
    Reply
  • How to use slot?
    How to use slot?

    Oct 26, 2019

    First I would like to thank you for your great datetime picker. But I can't use slot like

    <date-time-picker v-model="profile.b_day" value-format="yyyy-LL-dd HH:mm:ss" :today-button="true" :close-button="true" :hour-time="12"> <slot name="choose-date">Choose Birth Day</slot> </date-time-picker>

    Did I make any mistake?

    question 
    Reply
  • value string is to long
    value string is to long

    May 22, 2019

    Hi. I just start to use today is datetime picker. A found a issue, or I have some misunderstanding from the config. I call so :

    for the value I got this: Wed May 22 2019 01:01:00 GMT+0200 (közép-európai nyári idő) (this is in hungarian) after that I save to the database, and when I load it back i got this string: 2019-05-21T23:01:00.000Z and this is Invalid DateTime. The database stored in jsonb in Laravel. I spent more than 4 hours to solve it, without any result.

    question 
    Reply