{"id":13701422,"url":"https://github.com/dwqs/v2-datepicker","last_synced_at":"2025-08-20T18:32:36.106Z","repository":{"id":57389905,"uuid":"116777960","full_name":"dwqs/v2-datepicker","owner":"dwqs","description":"A simple datepicker component based Vue 2.x: https://dwqs.github.io/v2-datepicker/","archived":false,"fork":false,"pushed_at":"2018-10-25T06:58:29.000Z","size":601,"stargazers_count":89,"open_issues_count":8,"forks_count":21,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-30T06:47:38.080Z","etag":null,"topics":["date-picker","datepicker","datepicker-component","daterange","daterange-picker","vuejs2"],"latest_commit_sha":null,"homepage":"","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/dwqs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-09T06:52:55.000Z","updated_at":"2024-10-22T07:52:41.000Z","dependencies_parsed_at":"2022-09-02T10:50:40.941Z","dependency_job_id":null,"html_url":"https://github.com/dwqs/v2-datepicker","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Fv2-datepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Fv2-datepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Fv2-datepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Fv2-datepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dwqs","download_url":"https://codeload.github.com/dwqs/v2-datepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230445926,"owners_count":18227060,"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":["date-picker","datepicker","datepicker-component","daterange","daterange-picker","vuejs2"],"created_at":"2024-08-02T20:01:36.357Z","updated_at":"2024-12-19T14:07:09.213Z","avatar_url":"https://github.com/dwqs.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI组件","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["形成","UI Components","Form"],"readme":"![npm-version](https://img.shields.io/npm/v/v2-datepicker.svg) ![license](https://img.shields.io/npm/l/v2-datepicker.svg)\n\n[中文 README](https://github.com/dwqs/v2-datepicker/blob/master/README_CN.md)\n# v2-datepicker\nA simple datepicker component based Vue 2.x.\n\n## Installation\n\nnpm:\n\n```\nnpm i --save v2-datepicker\n```\nor yarn\n\n```\nyarn add  v2-datepicker\n```\n\n## Get Started\n\n```\nimport Vue from 'vue';\nimport 'v2-datepicker/lib/index.css';   // v2 need to improt css\nimport V2Datepicker from 'v2-datepicker';\n\nVue.use(V2Datepicker)\n```\n\n```\n// basic\n\u003cv2-datepicker v-model=\"val\"\u003e\u003c/v2-datepicker\u003e\n\u003cv2-datepicker-range v-model=\"val2\"\u003e\u003c/v2-datepicker-range\u003e\n\n//setting\n\u003cv2-datepicker-range v-model=\"val\" lang=\"en\" format=\"yyyy-MM-DD\" :picker-options=\"pickerOptions\"\u003e\u003c/v2-datepicker-range\u003e\n\u003cv2-datepicker v-model=\"val2\" format=\"yyyy-MM-DD\" :picker-options=\"pickerOptions2\"\u003e\u003c/v2-datepicker\u003e\n\nexport default {\n    data () {\n        return {\n            pickerOptions: {\n                    shortcuts: [{\n                        text: 'Latest Week',\n                        onClick (picker) {\n                            const end = new Date();\n                            const start = new Date();\n                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n                            picker.$emit('pick', [start, end]);\n                        }\n                    }, {\n                        text: 'Latest Month',\n                        onClick (picker) {\n                            const end = new Date();\n                            const start = new Date();\n                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n                            picker.$emit('pick', [start, end]);\n                        }\n                    }, {\n                        text: 'Latest Three Month',\n                        onClick (picker) {\n                            const end = new Date();\n                            const start = new Date();\n                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n                            picker.$emit('pick', [start, end]);\n                        }\n                    }]\n                },\n            pickerOptions2: {\n                shortcuts: [{\n                    text: 'Today',\n                    onClick (picker) {\n                        picker.$emit('pick', new Date());\n                    }\n                }, {\n                    text: 'Yesterday',\n                    onClick (picker) {\n                        const date = new Date();\n                        date.setTime(date.getTime() - 3600 * 1000 * 24);\n                        picker.$emit('pick', date);\n                    }\n                }, {\n                    text: 'A week ago',\n                    onClick (picker) {\n                        const date = new Date();\n                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n                        picker.$emit('pick', date);\n                    }\n                }]\n            }\n        }\n    }\n}\n```\n\nMore demo to visit [here](https://dwqs.github.io/v2-datepicker).\n\n## On Demand Import\n\u003e This feature just apply to v2\n\nYou need to install [babel-plugin-on-demand-import](https://github.com/dwqs/babel-plugin-on-demand-import):\n\n```\nnpm i babel-plugin-on-demand-import -D\n```\n\nThen add it to your `.babelrc`:\n\n```\n// v2\n{\n    // ...\n    \"plugins\": [\n        [\"on-demand-import\" {\n            \"libraryName\": \"v2-datepicker\"\n        }]\n    ]\n}\n\n// v3\n{\n    // ...\n    \"plugins\": [\n        [\"on-demand-import\" {\n            \"libraryName\": \"v2-datepicker\",\n            \"libraryName\": \"lib/components\"\n        }]\n    ]\n}\n```\n\n```\n// Only import DatePicker component\nimport { DatePicker } from 'v2-datepicker';\nVue.use(DatePicker);\n\n\u003cv2-datepicker v-model=\"val\"\u003e\u003c/v2-datepicker\u003e\n\n// Only import DatePickerRange component\nimport { DatePickerRange } from 'v2-datepicker';\nVue.use(DatePickerRange);\n\n\u003cv2-datepicker-range v-model=\"val2\"\u003e\u003c/v2-datepicker-range\u003e\n```\n\n## Custom Locales\nThe components native supports only two languages: cn(chinese) and en(english) since `v3.1.0`, if you want to custom locale, do it by `customLocals` prop:\n\n```js\n\u003ctemplate\u003e\n  \u003cv2-datepicker format=\"MM/DD/YYYY\" :lang=\"lang\" :customLocals=\"locals\" v-model=\"date\"\u003e\u003c/v2-datepicker\u003e\n\u003c/template\u003e\n\n// js\nimport locals from 'path/to/your/locals'\nexport default {\n  data () {\n    return {\n      lang: 'it',\n      locales\n    }\n  }\n}\n\n// locales.js\nexport default {\n  'it': {\n    'months': {\n        'original': ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],\n        'abbr': ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic']\n    },\n    'days': ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab']\n  },\n  'lang-key': {\n     'months': {\n        'original': ['value1', 'value2', '...'],\n        'abbr': ['value1', 'value2', '...']\n     },\n     'days': ['value1', 'value2', '...']\n  }\n}\n```\n\n## Available Props\n\n### The v2-datepicker component\n\n|  Attribute  |  Type  |  Accepted Values  |  Default  |  Description  |\n|  :--:  |  :--:  |  :--:  |  :--:  |  :--:  |\n| value | Date | anything accepted by new Date() | - | default date of the date-picker |\n| lang | String | cn(chinese)/en(english) | cn | set local language of the date-picker |\n| customLocals | Object | - | {} | custom locale |\n| format | String | year `yyyy/YYYY`, month `MM`, day `dd` | yyyy/MM/dd | format of the displayed value in the span box |\n| placeholder | String | - | 选择日期/Choosing date... | placeholder text |\n| disabled | Boolean | - | false | disabled date-picker |\n| picker-options | Object | - | {} | additional options, check the table below |\n| render-row | Number | 6/7 | 7 | render rows of datepicker |\n| default-value | Date | anything accepted by new Date() | - | default date of the calendar |\n\n### The v2-daterange-picker component\n\n|  Attribute  |  Type  |  Accepted Values  |  Default  |  Description  |\n|  :--:  |  :--:  |  :--:  |  :--:  |  :--:  |\n| value | Array | anything accepted by new Date() | - | default date of the daterange-picker |\n| lang | String | cn(chinese)/en(english) | cn | set local language of the daterange-picker |\n| customLocals | Object | - | {} | custom locale |\n| format | String | year `yyyy/YYYY`, month `MM`, day `dd` | yyyy/MM/dd | format of the displayed value in the span box |\n| placeholder | String | - | 开始时间-结束时间/Choosing date range... | placeholder text |\n| disabled | Boolean | - | false | disabled daterange-picker |\n| range-separator | String | - | '-' | range separator|\n| unlink-panels | Boolean | - | false | unlink two date-panels in range-picker|\n| picker-options | Object | - | {} | additional options, check the table below |\n| default-value | Date | anything accepted by new Date() | - | default date of the calendar |\n\n## Picker Options\n\n|  Attribute  |  Type  |  Accepted Values  |  Default  |  Description  |\n|  :--:  |  :--:  |  :--:  |  :--:  |  :--:  |\n| shortcuts | Object[] | - | - | a { text, onClick } object array to set shortcut options, check the table below |\n| disabledDate | Function | - | - | a function determining if a date is disabled with that date as its parameter. Should return a Boolean |\n\n### shortcuts\n\n|  Attribute  |  Type  |  Accepted Values  |  Default  |  Description  |\n|  :--:  |  :--:  |  :--:  |  :--:  |  :--:  |\n| text | String | - | - | title of the shortcut |\n| onClick | Function | - | - | callback function, triggers when the shortcut is clicked |\n\n## Event\n\n|  Event Name  |  Description  |  Parameters |\n|  :--:  |  :--:  |  :--: |\n| change | triggers when the selected value changes | component's binding value |\n\n## Development\n\n```js\ngit clone git@github.com:dwqs/v2-datepicker.git\n\ncd v2-datepicker\n\nnpm i\n\nnpm start\n```\n\n## LICENSE\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwqs%2Fv2-datepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdwqs%2Fv2-datepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwqs%2Fv2-datepicker/lists"}