Vuejs-Vue2 datepicker v3.10.1: vue2-datepicker - A beautiful datepicker / datetimepicker component for Vue2

icon
Latest Release: v3.10.1

Features

  • improve the boundary of disabledtime (#597) (071c398)

新功能

  • 提升disabledTime判断边界条件 (#597) (071c398)
Source code(tar.gz)
Source code(zip)

vue2-datepicker

中文版

A Datepicker Component For Vue2

build:passed Badge npm MIT

Demo

https://mengxiong10.github.io/vue2-datepicker/index.html

image

Install

$ npm install vue2-datepicker --save

Usage

<script>
  import DatePicker from 'vue2-datepicker';
  import 'vue2-datepicker/index.css';

  export default {
    components: { DatePicker },
    data() {
      return {
        time1: null,
        time2: null,
        time3: null,
      };
    },
  };
</script>

<template>
  <div>
    <date-picker v-model="time1" valueType="format"></date-picker>
    <date-picker v-model="time2" type="datetime"></date-picker>
    <date-picker v-model="time3" range></date-picker>
  </div>
</template>

Theme

If your project uses SCSS, you can change the default style variables.

To create a scss file. e.g. datepicker.scss:

$namespace: 'xmx'; // change the 'mx' to 'xmx'. then <date-picker prefix-class="xmx" />

$default-color: #555;
$primary-color: #1284e7;

@import '~vue2-datepicker/scss/index.scss';

Internationalization

The default language of v3.x is English. If you need other locales, you can import a locale file. Once you import a locale, it becomes the active locale.

import DatePicker from 'vue2-datepicker';
import 'vue2-datepicker/index.css';

import 'vue2-datepicker/locale/zh-cn';

You can also override some of the default locale by lang. Full config

<script>
  export default {
    data() {
      return {
        lang: {
          formatLocale: {
            firstDayOfWeek: 1,
          },
          monthBeforeYear: false,
        },
      };
    },
  };
</script>

<template>
  <date-picker :lang="lang"></date-picker>
</template>

Props

Prop Description Type Default
type select the type of picker date |datetime|year|month|time|week 'date'
range if true, pick the range date boolean false
format to set the date format. similar to moment.js token 'YYYY-MM-DD'
value-type data type of the binding value value-type 'date'
default-value default date of the calendar Date new Date()
lang override the default locale object
placeholder input placeholder text string ''
editable whether the input is editable boolean true
clearable if false, don't show the clear icon boolean true
confirm if true, need click the button to change value boolean false
confirm-text the text of confirm button string 'OK'
multiple if true, multi-select date boolean false
disabled disable the component boolean false
disabled-date specify the date that cannot be selected (date) => boolean -
disabled-time specify the time that cannot be selected (date) => boolean -
append-to-body append the popup to body boolean true
inline without input boolean false
input-class input classname string 'mx-input'
input-attr input attrs(eg: { name: 'date', id: 'foo'}) object
open open state of picker boolean -
default-panel default panel of the picker year|month -
popup-style popup style object
popup-class popup classes
shortcuts set shortcuts to select Array<{text, onClick}> -
title-format format of the tooltip in calendar cell token 'YYYY-MM-DD'
partial-update whether update date when select year or month boolean false
range-separator text of range separator string ' ~ '
show-week-number determine whether show week number boolean false
hour-step interval between hours in time picker 1 - 60 1
minute-step interval between minutes in time picker 1 - 60 1
second-step interval between seconds in time picker 1 - 60 1
hour-options custom hour column Array<number> -
minute-options custom minute column Array<number> -
second-options custom second column Array<number> -
show-hour whether show hour column boolean base on format
show-minute whether show minute column boolean base on format
show-second whether show second column boolean base on format
use12h whether show ampm column boolean base on format
show-time-header whether show header of time picker boolean false
time-title-format format of the time header token 'YYYY-MM-DD'
time-picker-options set fixed time list to select time-picker-options null
prefix-class set prefix class string 'mx'
scroll-duration set the duration of scroll when hour is selected number 100

Token

Uint Token output
Year YY 70 71 ... 10 11
YYYY 1970 1971 ... 2010 2011
Y -1000 ...20 ... 1970 ... 9999 +10000
Month M 1 2 ... 11 12
MM 01 02 ... 11 12
MMM Jan Feb ... Nov Dec
MMMM January February ... November December
Day of Month D 1 2 ... 30 31
DD 01 02 ... 30 31
Day of Week d 0 1 ... 5 6
dd Su Mo ... Fr Sa
ddd Sun Mon ... Fri Sat
dddd Sunday Monday ... Friday Saturday
AM/PM A AM PM
a am pm
Hour H 0 1 ... 22 23
HH 00 01 ... 22 23
h 1 2 ... 12
hh 01 02 ... 12
Minute m 0 1 ... 58 59
mm 00 01 ... 58 59
Second s 0 1 ... 58 59
ss 00 01 ... 58 59
Fractional Second S 0 1 ... 8 9
SS 00 01 ... 98 99
SSS 000 001 ... 998 999
Time Zone Z -07:00 -06:00 ... +06:00 +07:00
ZZ -0700 -0600 ... +0600 +0700
Week of Year w 1 2 ... 52 53
ww 01 02 ... 52 53
Unix Timestamp X 1360013296
Unix Millisecond Timestamp x 1360013296123

custom format

The format accepts an object to customize formatting.

<date-picker :format="momentFormat" />
data() {
  return {
    // Use moment.js instead of the default
    momentFormat: {
      // Date to String
      stringify: (date) => {
        return date ? moment(date).format('LL') : ''
      },
      // String to Date
      parse: (value) => {
        return value ? moment(value, 'LL').toDate() : null
      }
    }
  }
}

value-type

set the format of binding value

Value Description
'date' return a Date object
'timestamp' return a timestamp number
'format' returns a string formatted using pattern of format
token(MM/DD/YYYY) returns a string formatted using this pattern

shortcuts

The shortcuts for the range picker

[
  { text: 'today', onClick: () => new Date() },
  {
    text: 'Yesterday',
    onClick: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    },
  },
];
Attribute Description
text title of the shortcut
onClick callback function , need to return a Date

time-picker-options

Set fixed time list to select;

{start: '00:00', step:'00:30' , end: '23:30', format: 'HH:mm' }
Attribute Description
start start time
step step time
end end time
format the default is same as prop format

Events

Name Description Callback Arguments
input When the value change(v-model event) date
change When the value change(same as input) date, type('date'|'hour'|'minute'|'second'|'ampm
open When panel opening event
close When panel closing
confirm When click 'confirm' button date
clear When click 'clear' button
input-error When user type a invalid Date the input text
focus When input focus
blur When input blur
pick when select date #429 date
calendar-change when change the calendar date, oldDate, type('year'|'month'|'last-year'|'next-year'|'last-month'|'next-month'|'last-decade'|'next-decade')

Slots

Name Description
icon-calendar custom the calender icon
icon-clear custom the clear icon
input replace input
header popup header
footer popup footer
sidebar popup sidebar

ChangeLog

CHANGELOG

One-time Donations

If you find this project useful, you can buy me a coffee

Paypal Me

donate

License

MIT

Copyright (c) 2017-present xiemengxiong

Comments

  • "[Bug]"

    Dec 10, 2021

    vue2-datepicker: 3.10.4 vue: 2.6.6 chrome:

    Good evening!

    I'm having an issue with date format to datepicker.

    When i set valueType="YYYY-DD-MM" The MM is updating, instead of DD.

    If I set valueType="DD-MM-YYYY" the input is empty on render, and date value is not set to this format.

    image

    Reference image above; how can I change DD on date format YYYY-DD-MM and on format DD-MM-YYYY ?

    Reply
  • feat: min and max prop in date picker/range picker [#628]
    feat: min and max prop in date picker/range picker [#628]

    Dec 17, 2021

    null

                                                                                                                                                                                                           
    Reply
  • [Feature request] use .sync for 'range' date picker
    [Feature request] use .sync for 'range' date picker

    Dec 22, 2021

    What problem does this feature solve?

    Developers can have separate variables of type Date/String instead of single variable of type Array. However, this should be optional and user still can use v-model

    Instead of declaring

    export default {
        data() {
          return {
            dateRange: null,
          };
        },
      };
    

    we can declare

    export default {
        data() {
          return {
            dateFrom: null,
            dateTo: null
          };
        },
      };
    

    What does the proposed API look like?

    <script>
      import DatePicker from 'vue2-datepicker';
      import 'vue2-datepicker/index.css';
    
      export default {
        components: { DatePicker },
        data() {
          return {
            dateFrom: null,
            dateTo: null
          };
        },
      };
    </script>
    
    <template>
      <div>
        <date-picker range :dateFrom.sync="dateFrom" :dateTo.sync="dateTo"></date-picker>
      </div>
    </template>
    
    Reply
  • [Feature request] Possibility to show date and time at the same time
    [Feature request] Possibility to show date and time at the same time

    Jan 4, 2022

    What problem does this feature solve? Currently when we use the datepicker e.g. in Nextcloud Calendar, it is often confusing to people that they first have to pick a date and then a time (even though they e.g. click on the part of the input which shows the time).

    What does the proposed API look like? Not sure about the API, but proposed solution for this would be to make it look like the datetime-local picker does on Chromium. That way people can pick whichever Datetime picker

    That way people can set either date or time, or both at the same time, whichever people need, and it’s not a forced 2-step flow. :)

    Reply
  • [Bug] wrong (missing) week number displayed
    [Bug] wrong (missing) week number displayed

    Jan 14, 2022

    Vue2-datepicker version: 3.10.2 Vue version: 2

    By using the "show-week-number" flag of the datepicker, we had a confusing image at the end of 2021:

    datepickerWrongWeekNumber_2

    Actually the year 2021 had 52 weeks and the week with number 52 should be from 2021-12-27 to 2022-01-02.

    The problem is caused by the first weeks in january:

    datepickerWrongWeekNumber_1

    The first problem is, that the first week of 2021 should have been the one from 2021-01-04 to 2021-01-10 and the second problem is, that the week with number 2 is missing. This behavior seems to be similar at every year.

    Thanks for the great datepicker and best regards!

    Reply
  • build(deps-dev): bump marked from 0.7.0 to 4.0.10
    build(deps-dev): bump marked from 0.7.0 to 4.0.10

    Jan 15, 2022

    Bumps marked from 0.7.0 to 4.0.10.

    Release notes

    Sourced from marked's releases.

    v4.0.10

    4.0.10 (2022-01-13)

    Bug Fixes

    • security: fix redos vulnerabilities (8f80657)

    v4.0.9

    4.0.9 (2022-01-06)

    Bug Fixes

    v4.0.8

    4.0.8 (2021-12-19)

    Bug Fixes

    v4.0.7

    4.0.7 (2021-12-09)

    Bug Fixes

    v4.0.6

    4.0.6 (2021-12-02)

    Bug Fixes

    v4.0.5

    4.0.5 (2021-11-25)

    Bug Fixes

    • table after paragraph without blank line (#2298) (5714212)

    v4.0.4

    4.0.4 (2021-11-19)

    ... (truncated)

    Commits
    • ae01170 chore(release): 4.0.10 [skip ci]
    • fceda57 ?️ build [skip ci]
    • 8f80657 fix(security): fix redos vulnerabilities
    • c4a3ccd Merge pull request from GHSA-rrrm-qjm4-v8hf
    • d7212a6 chore(deps-dev): Bump jasmine from 4.0.0 to 4.0.1 (#2352)
    • 5a84db5 chore(deps-dev): Bump rollup from 2.62.0 to 2.63.0 (#2350)
    • 2bc67a5 chore(deps-dev): Bump markdown-it from 12.3.0 to 12.3.2 (#2351)
    • 98996b8 chore(deps-dev): Bump @​babel/preset-env from 7.16.5 to 7.16.7 (#2353)
    • ebc2c95 chore(deps-dev): Bump highlight.js from 11.3.1 to 11.4.0 (#2354)
    • e5171a9 chore(release): 4.0.9 [skip ci]
    • 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
  • confirm: value doesn't change on
    confirm: value doesn't change on "OK", if only year and/or month were changed

    Apr 7, 2019

    The month and year of a date cannot currently be changed alone (using the UI).

    Steps to reproduce

    1. <date-picker v-model="value" confirm />
    2. Choose a date, e.g. 2019-04-07.
    3. Choose a different year, e.g. 2020, and press "OK".
    4. Date is still 2019-04-07.
    5. Choose a different month, e.g. 05, and press "OK".
    6. Date is still 2019-04-07.

    Expected result

    It should be possible to change ...

    1. the month without having to choose the day again.
    2. the year without having to choose the month (and the day) again.

    Actual result

    The changes are ignored unless day or month and day are chosen.

    Reply
  • Bad behaviour with not-before and time-list
    Bad behaviour with not-before and time-list

    Mar 30, 2019

    Hi,

    I found an unexpected behaviour when using the not-before option with new Date().

    It is currently 17h57 and when the time picker is displayed, the hour 17 and minute 57 are both actived and disabled.

    Capture d’écran 2019-03-30 à 17 55 20 Capture d’écran 2019-03-30 à 17 58 19

    When I click on the minute 58 for example, the disabledclass disappear for the hour and now the actived is used (what it is expected by default).

    Capture d’écran 2019-03-30 à 17 58 41 Capture d’écran 2019-03-30 à 17 58 32

    I temporarily fixed this by using !important on properties in the actived class but this is not a long-term solution...

    I think this is a bug, what do you think about that?

    Reply
  • Vue3 compatibility
    Vue3 compatibility

    Oct 1, 2020

    What problem does this feature solve?

    Being able to use this lib in vue3. :) Getting this when I import it.

    Uncaught TypeError: Cannot read property 'type' of undefined
    

    What does the proposed API look like?

    Same as before. :)

    feature 
    Reply
  • [Bug] :disabled-time disables time starting from next hour
    [Bug] :disabled-time disables time starting from next hour

    Nov 29, 2019

    Vue2-datepicker version: 3.1.1 Vue version: 2.6.10 Browser: Chrome 78

    Steps to reproduce :disabled-time="(date) => date < new Date()"

    Expected behavior Lets suppose current time is 15:33:03 User should be able to select 15:33:04 and later

    Actual behavior User can able to select 16:00:00 and later.

    Reply
  • Clearing the date or choosing a date has no effect
    Clearing the date or choosing a date has no effect

    Mar 29, 2019

    I just downloaded this today and using it in my project. Everything seems to work where I see it displaying my date from the v-model. However, when choosing a date, it doesn't change the value in the text box.

    Also, clicking on "x" doesn't clear the value and show placeholder

    image

    I'm displaying this text inside a client table from vue-tables-2

    Reply
  • Control the timezone
    Control the timezone

    Jan 17, 2019

    I trying to find a way to control the timezone in the a dual date range calendar. As far as I see it, there is no obvious way to do this.

    Any suggestions?

    Reply