{"id":13701439,"url":"https://github.com/mengxiong10/vue2-datepicker","last_synced_at":"2025-05-13T20:19:08.344Z","repository":{"id":20718218,"uuid":"90640852","full_name":"mengxiong10/vue2-datepicker","owner":"mengxiong10","description":"A datepicker / datetimepicker component for Vue2 ","archived":false,"fork":false,"pushed_at":"2023-10-19T15:49:49.000Z","size":6478,"stargazers_count":1524,"open_issues_count":84,"forks_count":404,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-05-11T16:41:10.525Z","etag":null,"topics":["datepicker","datetimepicker","vue","vue2-datepicker"],"latest_commit_sha":null,"homepage":"https://mengxiong10.github.io/vue2-datepicker/index.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mengxiong10.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"custom":"https://www.paypal.me/mengxiong10"}},"created_at":"2017-05-08T15:00:00.000Z","updated_at":"2025-05-08T20:23:08.000Z","dependencies_parsed_at":"2024-04-18T23:16:56.536Z","dependency_job_id":null,"html_url":"https://github.com/mengxiong10/vue2-datepicker","commit_stats":{"total_commits":419,"total_committers":28,"mean_commits":"14.964285714285714","dds":"0.16706443914081148","last_synced_commit":"bb90ec8500b8863e1025329382a40a2cfb351f93"},"previous_names":[],"tags_count":65,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mengxiong10%2Fvue2-datepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mengxiong10%2Fvue2-datepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mengxiong10%2Fvue2-datepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mengxiong10%2Fvue2-datepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mengxiong10","download_url":"https://codeload.github.com/mengxiong10/vue2-datepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254020659,"owners_count":22000757,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["datepicker","datetimepicker","vue","vue2-datepicker"],"created_at":"2024-08-02T20:01:37.929Z","updated_at":"2025-05-13T20:19:08.326Z","avatar_url":"https://github.com/mengxiong10.png","language":"JavaScript","funding_links":["https://www.paypal.me/mengxiong10"],"categories":["JavaScript","UIη»„δ»Ά","Components \u0026 Libraries","UI Components","UI Components [πŸ”](#readme)"],"sub_categories":["ζ—₯εŽ†","UI Components","Calendar"],"readme":"# vue2-datepicker\n\n[δΈ­ζ–‡η‰ˆ](https://github.com/mengxiong10/vue2-datepicker/blob/master/README.zh-CN.md)\n\n\u003e A Datepicker Component For Vue2\n\n\u003ca href=\"https://travis-ci.org/mengxiong10/vue2-datepicker\"\u003e\n \u003cimg src=\"https://travis-ci.org/mengxiong10/vue2-datepicker.svg?branch=master\" alt=\"build:passed\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://coveralls.io/github/mengxiong10/vue2-datepicker\"\u003e\n \u003cimg src=\"https://coveralls.io/repos/github/mengxiong10/vue2-datepicker/badge.svg?branch=master\u0026service=github\" alt=\"Badge\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/vue2-datepicker\"\u003e\n \u003cimg src=\"https://img.shields.io/npm/v/vue2-datepicker.svg\" alt=\"npm\"\u003e\n\u003c/a\u003e\n\u003ca href=\"LICENSE\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/License-MIT-yellow.svg\" alt=\"MIT\"\u003e\n\u003c/a\u003e\n\n**For Vue 3.0, you can use [vue-datepicker-next](https://github.com/mengxiong10/vue-datepicker-next) from the same author**\n\n## Demo\n\n\u003chttps://mengxiong10.github.io/vue2-datepicker/index.html\u003e\n\n![image](https://github.com/mengxiong10/vue2-datepicker/raw/master/screenshot/demo.png)\n\n## Install\n\n```bash\n$ npm install vue2-datepicker --save\n```\n\n## Usage\n\n```html\n\u003cscript\u003e\n import DatePicker from 'vue2-datepicker';\n import 'vue2-datepicker/index.css';\n\n export default {\n components: { DatePicker },\n data() {\n return {\n time1: null,\n time2: null,\n time3: null,\n };\n },\n };\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n \u003cdiv\u003e\n \u003cdate-picker v-model=\"time1\" valueType=\"format\"\u003e\u003c/date-picker\u003e\n \u003cdate-picker v-model=\"time2\" type=\"datetime\"\u003e\u003c/date-picker\u003e\n \u003cdate-picker v-model=\"time3\" range\u003e\u003c/date-picker\u003e\n \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Theme\n\nIf your project uses SCSS, you can change the default style variables.\n\nTo create a scss file. e.g. `datepicker.scss`:\n\n```scss\n$namespace: 'xmx'; // change the 'mx' to 'xmx'. then \u003cdate-picker prefix-class=\"xmx\" /\u003e\n\n$default-color: #555;\n$primary-color: #1284e7;\n\n@import '~vue2-datepicker/scss/index.scss';\n```\n\n## Internationalization\n\nThe default language of v3.x is English. If you need other locales,\nyou can import a locale file.\nOnce you import a locale, it becomes the active locale.\n\n```js\nimport DatePicker from 'vue2-datepicker';\nimport 'vue2-datepicker/index.css';\n\nimport 'vue2-datepicker/locale/zh-cn';\n```\n\nYou can also override some of the default locale by `lang`.\n[Full config](https://github.com/mengxiong10/vue2-datepicker/blob/master/locale.md)\n\n```html\n\u003cscript\u003e\n export default {\n data() {\n return {\n lang: {\n formatLocale: {\n firstDayOfWeek: 1,\n },\n monthBeforeYear: false,\n },\n };\n },\n };\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n \u003cdate-picker :lang=\"lang\"\u003e\u003c/date-picker\u003e\n\u003c/template\u003e\n```\n\n### Props\n\n| Prop | Description | Type | Default |\n| ------------------- | ------------------------------------------------ | ----------------------------------------------- | -------------- |\n| type | select the type of picker | date \\|datetime\\|year\\|month\\|time\\|week | 'date' |\n| range | if true, pick the range date | `boolean` | false |\n| format | to set the date format. similar to moment.js | [token](#token) | 'YYYY-MM-DD' |\n| formatter | use your own formatter, such as moment.js | [object](#formatter) | - |\n| value-type | data type of the binding value | [value-type](#value-type) | 'date' |\n| default-value | default date of the calendar | `Date` | new Date() |\n| lang | override the default locale | `object` | |\n| placeholder | input placeholder text | `string` | '' |\n| editable | whether the input is editable | `boolean` | true |\n| clearable | if false, don't show the clear icon | `boolean` | true |\n| confirm | if true, need click the button to change value | `boolean` | false |\n| confirm-text | the text of confirm button | `string` | 'OK' |\n| multiple | if true, multi-select date | `boolean` | false |\n| disabled | disable the component | `boolean` | false |\n| disabled-date | specify the date that cannot be selected | `(date: Date, currentValue: Date[]) =\u003e boolean` | - |\n| disabled-time | specify the time that cannot be selected | `(date: Date) =\u003e boolean` | - |\n| append-to-body | append the popup to body | `boolean` | true |\n| inline | without input | `boolean` | false |\n| input-class | input classname | `string` | 'mx-input' |\n| input-attr | input attrs(eg: { name: 'date', id: 'foo'}) | `object` | β€” |\n| open | open state of picker | `boolean` | - |\n| default-panel | default panel of the picker | year\\|month | - |\n| popup-style | popup style | `object` | β€” |\n| popup-class | popup classes | | β€” |\n| shortcuts | set shortcuts to select | `Array\u003c{text, onClick}\u003e` | - |\n| title-format | format of the tooltip in calendar cell | [token](#token) | 'YYYY-MM-DD' |\n| partial-update | whether update date when select year or month | `boolean` | false |\n| range-separator | text of range separator | `string` | ' ~ ' |\n| show-week-number | determine whether show week number | `boolean` | false |\n| hour-step | interval between hours in time picker | 1 - 60 | 1 |\n| minute-step | interval between minutes in time picker | 1 - 60 | 1 |\n| second-step | interval between seconds in time picker | 1 - 60 | 1 |\n| hour-options | custom hour column | `Array\u003cnumber\u003e` | - |\n| minute-options | custom minute column | `Array\u003cnumber\u003e` | - |\n| second-options | custom second column | `Array\u003cnumber\u003e` | - |\n| show-hour | whether show hour column | `boolean` | base on format |\n| show-minute | whether show minute column | `boolean` | base on format |\n| show-second | whether show second column | `boolean` | base on format |\n| use12h | whether show ampm column | `boolean` | base on format |\n| show-time-header | whether show header of time picker | `boolean` | false |\n| time-title-format | format of the time header | [token](#token) | 'YYYY-MM-DD' |\n| time-picker-options | set fixed time list to select | [time-picker-options](#time-picker-options) | null |\n| prefix-class | set prefix class | `string` | 'mx' |\n| scroll-duration | set the duration of scroll when hour is selected | `number` | 100 |\n\n#### Token\n\n| Uint | Token | output |\n| -------------------------- | ----- | -------------------------------------- |\n| Year | YY | 70 71 ... 10 11 |\n| | YYYY | 1970 1971 ... 2010 2011 |\n| | Y | -1000 ...20 ... 1970 ... 9999 +10000 |\n| Month | M | 1 2 ... 11 12 |\n| | MM | 01 02 ... 11 12 |\n| | MMM | Jan Feb ... Nov Dec |\n| | MMMM | January February ... November December |\n| Day of Month | D | 1 2 ... 30 31 |\n| | DD | 01 02 ... 30 31 |\n| Day of Week | d | 0 1 ... 5 6 |\n| | dd | Su Mo ... Fr Sa |\n| | ddd | Sun Mon ... Fri Sat |\n| | dddd | Sunday Monday ... Friday Saturday |\n| AM/PM | A | AM PM |\n| | a | am pm |\n| Hour | H | 0 1 ... 22 23 |\n| | HH | 00 01 ... 22 23 |\n| | h | 1 2 ... 12 |\n| | hh | 01 02 ... 12 |\n| Minute | m | 0 1 ... 58 59 |\n| | mm | 00 01 ... 58 59 |\n| Second | s | 0 1 ... 58 59 |\n| | ss | 00 01 ... 58 59 |\n| Fractional Second | S | 0 1 ... 8 9 |\n| | SS | 00 01 ... 98 99 |\n| | SSS | 000 001 ... 998 999 |\n| Time Zone | Z | -07:00 -06:00 ... +06:00 +07:00 |\n| | ZZ | -0700 -0600 ... +0600 +0700 |\n| Week of Year | w | 1 2 ... 52 53 |\n| | ww | 01 02 ... 52 53 |\n| Unix Timestamp | X | 1360013296 |\n| Unix Millisecond Timestamp | x | 1360013296123 |\n\n#### formatter\n\nThe `formatter` accepts an object to customize formatting.\n\n```html\n\u003cdate-picker :formatter=\"momentFormat\" /\u003e\n```\n\n```js\ndata() {\n return {\n // Use moment.js instead of the default\n momentFormat: {\n //[optional] Date to String\n stringify: (date) =\u003e {\n return date ? moment(date).format('LL') : ''\n },\n //[optional] String to Date\n parse: (value) =\u003e {\n return value ? moment(value, 'LL').toDate() : null\n },\n //[optional] getWeekNumber\n getWeek: (date) =\u003e {\n return // a number\n }\n }\n }\n}\n\n```\n\n#### value-type\n\nset the format of binding value\n\n| Value | Description |\n| ----------------- | ---------------------------------------------------- |\n| 'date' | return a Date object |\n| 'timestamp' | return a timestamp number |\n| 'format' | returns a string formatted using pattern of `format` |\n| token(MM/DD/YYYY) | returns a string formatted using this pattern |\n\n#### shortcuts\n\nThe shortcuts for the range picker\n\n```js\n[\n { text: 'today', onClick: () =\u003e new Date() },\n {\n text: 'Yesterday',\n onClick: () =\u003e {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24);\n return date;\n },\n },\n];\n```\n\n| Attribute | Description |\n| --------- | ----------------------------------------- |\n| text | title of the shortcut |\n| onClick | callback function , need to return a Date |\n\n#### time-picker-options\n\nSet fixed time list to select;\n\n```js\n{start: '00:00', step:'00:30' , end: '23:30', format: 'HH:mm' }\n```\n\n| Attribute | Description |\n| --------- | ------------------------------------ |\n| start | start time |\n| step | step time |\n| end | end time |\n| format | the default is same as prop `format` |\n\n### Events\n\n| Name | Description | Callback Arguments |\n| --------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |\n| input | When the value change(v-model event) | date |\n| change | When the value change(same as input) | date, type('date'\\|'hour'\\|'minute'\\|'second'\\|'ampm |\n| open | When panel opening | event |\n| close | When panel closing | |\n| confirm | When click 'confirm' button | date |\n| clear | When click 'clear' button | |\n| input-error | When user type a invalid Date | the input text |\n| focus | When input focus | |\n| blur | When input blur | |\n| pick | when select date [#429](https://github.com/mengxiong10/vue2-datepicker/issues/429) | date |\n| calendar-change | when change the calendar | date, oldDate, type('year'\\|'month'\\|'last-year'\\|'next-year'\\|'last-month'\\|'next-month'\\|'last-decade'\\|'next-decade') |\n| panel-change | when the calendar panel changes | type('year'\\|'month'\\|'date'), oldType |\n\n### Slots\n\n| Name | Description |\n| ------------- | ------------------------ |\n| icon-calendar | custom the calender icon |\n| icon-clear | custom the clear icon |\n| input | replace input |\n| header | popup header |\n| footer | popup footer |\n| sidebar | popup sidebar |\n\n## ChangeLog\n\n[CHANGELOG](CHANGELOG.md)\n\n## One-time Donations\n\nIf you find this project useful, you can buy me a coffee\n\n[Paypal Me](https://www.paypal.me/mengxiong10)\n\n![donate](https://user-images.githubusercontent.com/14135808/83999111-a7947600-a994-11ea-84e9-9a215def4155.png)\n\n## License\n\n[MIT](https://github.com/mengxiong10/vue2-datepicker/blob/master/LICENSE)\n\nCopyright (c) 2017-present xiemengxiong\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmengxiong10%2Fvue2-datepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmengxiong10%2Fvue2-datepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmengxiong10%2Fvue2-datepicker/lists"}