Need help with vue2-datepicker?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

mengxiong10
1.2K Stars 336 Forks MIT License 420 Commits 34 Opened issues

Description

A datepicker / datetimepicker component for Vue2

Services available

!
?

Need anything else?

Contributors list

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

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 

$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

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' | | formatter | use your own formatter, such as moment.js | object | - | | 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
| - | | 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
| - | | minute-options | custom minute column |
Array
| - | | second-options | custom second column |
Array
| - | | 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 |

formatter

The

formatter
accepts an object to customize formatting.
data() {
  return {
    // Use moment.js instead of the default
    momentFormat: {
      //[optional] Date to String
      stringify: (date) => {
        return date ? moment(date).format('LL') : ''
      },
      //[optional]  String to Date
      parse: (value) => {
        return value ? moment(value, 'LL').toDate() : null
      },
      //[optional] getWeekNumber
      getWeek: (date) => {
        return // a number
      }
    }
  }
}

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') | | panel-change | when the calendar panel changes | type('year'|'month'|'date'), oldType |

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.