{"id":13424032,"url":"https://github.com/hilongjw/vue-datepicker","last_synced_at":"2025-05-15T14:08:18.731Z","repository":{"id":4013628,"uuid":"49931909","full_name":"hilongjw/vue-datepicker","owner":"hilongjw","description":"[Deprecated] calendar and datepicker component with material design for Vue.js","archived":false,"fork":false,"pushed_at":"2022-02-28T04:11:52.000Z","size":514,"stargazers_count":701,"open_issues_count":86,"forks_count":204,"subscribers_count":27,"default_branch":"master","last_synced_at":"2025-05-09T13:11:24.446Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://hilongjw.github.io/vue-datepicker/demo.html","language":"Vue","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/hilongjw.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":"2016-01-19T06:33:32.000Z","updated_at":"2025-02-25T02:52:32.000Z","dependencies_parsed_at":"2022-08-06T14:30:31.677Z","dependency_job_id":null,"html_url":"https://github.com/hilongjw/vue-datepicker","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hilongjw%2Fvue-datepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hilongjw%2Fvue-datepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hilongjw%2Fvue-datepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hilongjw%2Fvue-datepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hilongjw","download_url":"https://codeload.github.com/hilongjw/vue-datepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254355335,"owners_count":22057354,"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":[],"created_at":"2024-07-31T00:00:47.128Z","updated_at":"2025-05-15T14:08:13.721Z","avatar_url":"https://github.com/hilongjw.png","language":"Vue","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Vue","UI组件","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)","Awesome Vue.js"],"sub_categories":["Libraries \u0026 Plugins","形成","UI Components","Form"],"readme":"# vue-datepicker [DEPRECATED]\ncalendar and datepicker component with material design for Vue.js\n\n# Demo\n\nThe demo page is [HERE](http://hilongjw.github.io/vue-datepicker/demo.html).\n\n![Screenshot](screenshot.png)\n\n# Requirements\n\n- [Vue.js](https://github.com/yyx990803/vue) `^1.0.0` \u0026 `^2.0.0`\n- [moment](https://github.com/moment/moment) `^2.11.1`\n\n# Installation\n\n## npm\n\n```shell\n$ npm install vue-datepicker\n```\n\n# Usage\n\n```html\n\u003cscript\u003e\n// for Vue 1.0\nimport myDatepicker from 'vue-datepicker/vue-datepicker-1.vue'\n\n// for Vue 2.0\nimport myDatepicker from 'vue-datepicker'\n\nexport default {\n  data () {\n    return {\n      // for Vue 1.0\n      starttime: '',\n      endtime: '2016-01-19',\n      testTime: '',\n      multiTime: '',\n\n      // for Vue 2.0\n      startTime: {\n        time: ''\n      },\n      endtime: {\n        time: ''\n      }\n\n      option: {\n        type: 'day',\n        week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],\n        month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],\n        format: 'YYYY-MM-DD',\n        placeholder: 'when?',\n        inputStyle: {\n          'display': 'inline-block',\n          'padding': '6px',\n          'line-height': '22px',\n          'font-size': '16px',\n          'border': '2px solid #fff',\n          'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',\n          'border-radius': '2px',\n          'color': '#5F5F5F'\n        },\n        color: {\n          header: '#ccc',\n          headerText: '#f00'\n        },\n        buttons: {\n          ok: 'Ok',\n          cancel: 'Cancel'\n        },\n        overlayOpacity: 0.5, // 0.5 as default\n        dismissible: true // as true as default\n      },\n      timeoption: {\n        type: 'min',\n        week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],\n        month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],\n        format: 'YYYY-MM-DD HH:mm'\n      },\n      multiOption: {\n        type: 'multi-day',\n        week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],\n        month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],\n        format:\"YYYY-MM-DD HH:mm\"\n      },\n      limit: [{\n        type: 'weekday',\n        available: [1, 2, 3, 4, 5]\n      },\n      {\n        type: 'fromto',\n        from: '2016-02-01',\n        to: '2016-02-20'\n      }]\n    }\n  },\n  components: {\n    'date-picker': myDatepicker\n  }\n}\n\u003c/script\u003e\n\u003ctemplate\u003e\n  \u003cdiv class=\"card\"\u003e\n\n    \u003c!-- for Vue 1.0 --\u003e\n    \u003cdiv class=\"row\"\u003e\n      \u003cspan\u003eDeparture Date：\u003c/span\u003e\n      \u003cdate-picker :time.sync=\"starttime\" :option=\"option\" :limit=\"limit\"\u003e\u003c/date-picker\u003e\n    \u003c/div\u003e\n\n    \u003c!-- for Vue 2.0 --\u003e\n    \u003cdiv class=\"row\"\u003e\n      \u003cspan\u003eDeparture Date：\u003c/span\u003e\n      \u003cdate-picker :date=\"startTime\" :option=\"option\" :limit=\"limit\"\u003e\u003c/date-picker\u003e\n    \u003c/div\u003e\n\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n# API\n\n - Option \n\n * type\n\n```\n  type: 'day' // 'min', 'multi-day'\n\n```\n\n * format\n\n```\nformat: 'YYYY-MM-DD HH:mm'\n```\n\n * placeholder\n\n```\nplaceholder: 'when?'\n```\n\n * week\n\n```\n week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']\n```\n\n * month\n\n```\n  month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August','September', 'October', 'November', 'December']\n```\n\n* wrapperClass\n\n```\nwrapperClass: ''\n```\n\n* inputClass\n\n```\ninputClass: ''\n```\n* inputStyle\n\n```\ninputStyle: {\n  'display': 'inline-block',\n  'padding': '6px',\n  'line-height': '22px',\n  'font-size': '16px',\n  'border': '2px solid #fff',\n  'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',\n  'border-radius': '2px',\n  'color': '#5F5F5F'\n}\n```\n\n * color\n\n```\n  color: {\n    header: '#ccc',\n    headerText: '#f00'\n  }\n```\n\n\n * buttons\n\n```\nbuttons: {\n  ok: 'OK',\n  cancel: 'Cancel'\n}\n```\n\n * animate\n\n```\n  overlayOpacity: 0.5, // 0.5 as default\n  dismissible: true // as true as default\n```\n\n\n - limit\n\n  * from sometime to sometime(when from/to is empty, days before/after end/start time will be available)\n\n```javascript\n\nlimit: {\n  type:'fromto',\n  from:'2016-01-10',\n  to:'2016-01-30'\n}\n\n```\n * weekdays\n\n```javascript\n\nlimit:{\n  type: 'weekday',\n  available: [1, 2, 3, 4, 5] \n}\n\n```\n\n### prop\n\n* Vue 1.0\n\n```javascript\n\ntime: '' // string\n\n```\n\n```html\n\n\u003cdate-picker :time.sync=\"time\" :limit=\"limit\"\u003e\u003c/date-picker\u003e\n\n```\n\n* Vue 2.0\n\n```javascript\ndate: {\n  time: '' // string\n}\n```\n\n```html\n\n\u003cdate-picker :date=\"date\" :limit=\"limit\"\u003e\u003c/date-picker\u003e\n\n```\n\n\n# License\n\n[The MIT License](http://opensource.org/licenses/MIT)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhilongjw%2Fvue-datepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhilongjw%2Fvue-datepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhilongjw%2Fvue-datepicker/lists"}