{"id":19444221,"url":"https://github.com/tanvir0604/vue-dropdown-datepicker","last_synced_at":"2026-03-15T07:40:36.299Z","repository":{"id":34582470,"uuid":"180526897","full_name":"tanvir0604/vue-dropdown-datepicker","owner":"tanvir0604","description":"A simple and customizable dropdown datepicker vue component","archived":false,"fork":false,"pushed_at":"2024-09-24T07:13:17.000Z","size":432,"stargazers_count":11,"open_issues_count":6,"forks_count":10,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-09T20:23:53.446Z","etag":null,"topics":["datepicker","datepicker-component","daterangepicker","vue","vue-components","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tanvir0604.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,"governance":null}},"created_at":"2019-04-10T07:30:20.000Z","updated_at":"2024-09-04T06:18:39.000Z","dependencies_parsed_at":"2023-11-21T04:30:07.605Z","dependency_job_id":null,"html_url":"https://github.com/tanvir0604/vue-dropdown-datepicker","commit_stats":{"total_commits":30,"total_committers":5,"mean_commits":6.0,"dds":0.5666666666666667,"last_synced_commit":"0769fcf1207e280d6148500679b8b918d46037e9"},"previous_names":[],"tags_count":1,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanvir0604%2Fvue-dropdown-datepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanvir0604%2Fvue-dropdown-datepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanvir0604%2Fvue-dropdown-datepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanvir0604%2Fvue-dropdown-datepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tanvir0604","download_url":"https://codeload.github.com/tanvir0604/vue-dropdown-datepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223888408,"owners_count":17220068,"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","datepicker-component","daterangepicker","vue","vue-components","vuejs","vuejs2"],"created_at":"2024-11-10T16:05:37.415Z","updated_at":"2026-03-15T07:40:31.256Z","avatar_url":"https://github.com/tanvir0604.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Dropdown Datepicker\n\n\u003e [!warning]  \n\u003e This library supports only vue2 and no longer maintained. Please check vue3-dropdown-datepicker\n\nA simple and customizable dropdown datepicker vue component.\n\n## Check [Examples](https://tanvir0604.github.io/vue-dropdown-datepicker/)\n\n## Installation\n\n### [vuejs](https://vuejs.org/) is required to use this component\n\n### Package manager \n#### Using [npm](https://www.npmjs.com)\n\n```bash\nnpm i vue-dropdown-datepicker\n```\n\n#### Using [yarn](https://yarnpkg.com)\n\n```bash\nyarn add vue-dropdown-datepicker\n```\n\n#### Using [bower](https://bower.io)\n\n```bash\nbower install vue-dropdown-datepicker\n```\n\n#### Using CDN\n\n```code\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue-dropdown-datepicker@1.3.1/dist/dropdown-datepicker.min.js\"\u003e\u003c/script\u003e\n```\nOR\n```code\n\u003cscript src=\"https://unpkg.com/vue-dropdown-datepicker@1.3.1/dist/dropdown-datepicker.min.js\"\u003e\u003c/script\u003e\n```\n## Usage\n\n### ES6\n```javascript\nimport DropdownDatepicker from '../src/dropdown-datepicker.vue';\nnew Vue({\n    el: '#app',\n    components: {\n        DropdownDatepicker\n    }\n});\n```\n\n### Browser\n```javascript\nnew Vue({\n    el: '#app',\n    components: {\n        DropdownDatepicker\n    }\n});\n```\n\n## Options\n| Option                   | Type          | Defult          |Comment |\n| -------------            | ------------- | ----------      |--------|\n| defaultDate              | string        | null            |        |\n| defaultDateFormat        | string        | 'yyyy-mm-dd'    |        |\n| displayFormat            | string        | 'dmy'           |        |\n| submitFormat             | string        | 'yyyy-mm-dd'    |        |\n| submitId                 | string        | null            |        |\n| minAge                   | int           | null            |        |\n| maxAge                   | int           | null            |        |\n| minYear                  | int           | null            |        |\n| maxYear                  | int           | null            |        |\n| minDate                  | string        | null            | yyyy-mm-dd |\n| maxDate                  | string        | null            | yyyy-mm-dd |\n| allowPast                | boolean       | true            |        |\n| allowFuture              | boolean       | true            |        |\n| wrapperClass             | string        | 'date-dropdowns'|        |\n| dropdownClass            | string        | null            |        |\n| daySuffixes              | boolean       | true            |        |\n| monthSuffixes            | boolean       | true            |        |\n| monthFormat              | string        | 'long'          |        |\n| required                 | boolean       | false           |        |\n| dayLabel                 | string        | 'Day            |        |\n| monthLabel               | string        | 'Month'         |        |\n| yearLabel                | string        | 'Year'          |        |\n| sortYear                 | string        | 'desc'          |        |\n| monthLongValues          | array         | ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']|   |\n| monthShortValues         | array         | ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] |    |\n| initialDayMonthYearValues| array         | ['Day', 'Month', 'Year'] |      |\n| daySuffixValues          | array         | ['st', 'nd', 'rd', 'th'] |      |\n\n\n## Events\n\n### onDayChange\nCall on any change of day dropdown\n```javascript\n\u003cdropdown-datepicker v-bind:on-day-change=\"yourFunctionName\"\u003e\u003c/dropdown-datepicker\u003e\n```\n\n### onMonthChange\nCall on any change of month dropdown\n```javascript\n\u003cdropdown-datepicker v-bind:on-month-change=\"yourFunctionName\"\u003e\u003c/dropdown-datepicker\u003e\n```\n\n### onYearChange\nCall on any change of year dropdown\n```javascript\n\u003cdropdown-datepicker v-bind:on-year-change=\"yourFunctionName\"\u003e\u003c/dropdown-datepicker\u003e\n```\n\n## Contributing\nContributing Feel free to submit any fixes or propose any additional functionality via pull request or issue, making sure any changes take place in /src.\n\nMinification and Validation Both are automated via npm command. Run npm install to install the required dependencies, then run npm run build from the root of the project to handle the tasks.\n\n## License\n[ISC](https://choosealicense.com/licenses/isc/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftanvir0604%2Fvue-dropdown-datepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftanvir0604%2Fvue-dropdown-datepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftanvir0604%2Fvue-dropdown-datepicker/lists"}