{"id":16183987,"url":"https://github.com/edisdev/vue-datepicker-ui","last_synced_at":"2025-05-16T18:07:12.100Z","repository":{"id":33913519,"uuid":"163108697","full_name":"edisdev/vue-datepicker-ui","owner":"edisdev","description":"Datepicker Component For Vue","archived":false,"fork":false,"pushed_at":"2022-06-30T02:01:51.000Z","size":6110,"stargazers_count":426,"open_issues_count":15,"forks_count":30,"subscribers_count":3,"default_branch":"develop","last_synced_at":"2025-04-12T16:59:18.400Z","etag":null,"topics":["calendar","component","datepicker","datepicker-component","vue","vue-component","vue-datepicker"],"latest_commit_sha":null,"homepage":"https://edisdev.github.io/vue-datepicker-ui/","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/edisdev.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-12-25T20:07:36.000Z","updated_at":"2025-04-02T09:25:07.000Z","dependencies_parsed_at":"2022-08-07T23:30:40.286Z","dependency_job_id":null,"html_url":"https://github.com/edisdev/vue-datepicker-ui","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edisdev%2Fvue-datepicker-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edisdev%2Fvue-datepicker-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edisdev%2Fvue-datepicker-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edisdev%2Fvue-datepicker-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/edisdev","download_url":"https://codeload.github.com/edisdev/vue-datepicker-ui/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253814970,"owners_count":21968560,"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":["calendar","component","datepicker","datepicker-component","vue","vue-component","vue-datepicker"],"created_at":"2024-10-10T07:08:37.878Z","updated_at":"2025-05-16T18:07:12.062Z","avatar_url":"https://github.com/edisdev.png","language":"Vue","funding_links":[],"categories":["Components \u0026 Libraries","UI Components [🔝](#readme)"],"sub_categories":["UI Components"],"readme":"# Vue Datepicker Component\n![GitHub package.json version](https://img.shields.io/github/package-json/v/edisdev/vue-datepicker-ui)\n[![codecov](https://codecov.io/gh/edisdev/vue-datepicker-ui/branch/develop/graph/badge.svg?token=6VJS9RSMW8)](https://codecov.io/gh/edisdev/vue-datepicker-ui)\n![npm](https://img.shields.io/npm/dt/vue-datepicker-ui)\n![GitHub](https://img.shields.io/github/license/edisdev/vue-datepicker-ui)\n\n  \u003eA Datepicker Component For VueJs\n(https://edisdev.github.io/vue-datepicker-ui)\n\n\u003cimg src=\"./resources/datepicker.gif\" width=\"70%\"\u003e\n\u003chr\u003e\n\u003cimg src=\"./resources/rangepicker.png\" width=\"100%\"/\u003e\n\u003chr\u003e\n\u003cimg src=\"./resources/singlepicker.png\" width=\"50%\"\u003e\n\n### Using\n\n**Installing**\n\nfor Vue 2.x\n```bash\n   yarn add vue-datepicker-ui\n\n```\n\nfor Vue 3.x\n```bash\n   yarn add vue-datepicker-ui@vue3\n\n```\n\n**Import to Project**\n\n```javascript\n// main.js file\nimport VueDatepickerUi from 'vue-datepicker-ui'\nimport 'vue-datepicker-ui/lib/vuedatepickerui.css';\n\nVue.component('Datepicker', VueDatepickerUi)\n```\nor\n\n```vue\n\u003cscript\u003e\n  import 'vue-datepicker-ui/lib/vuedatepickerui.css';\n  import VueDatepickerUi from 'vue-datepicker-ui';\n\n  export default {\n    components: {\n      Datepicker: VueDatepickerUi\n    }\n  }\n\u003c/script\u003e\n```\nand\n\n```vue\n\u003ctemplate\u003e\n  \u003cdatepicker ...props\u003e\n\u003c/template\u003e\n```\n### Props\n``` html\n   \u003cDatepicker \n    v-model=\"\" \n    :range=\"\" \n    :lang=\"\" \n    :firstDayOfWeek=\"\" \n    :input-class=\"\" \n    :position=\"\" \n    :disabled-start-date=\"\" \n    :disabled-end-date=\"\"\n    :text-format=\"\" \n    :date-format=\"\"\n    :disabled=\"\"\n    :placeholder=\"\"\n    :circle=\"\"\n    :show-clear-button=\"\"\n    :show-picker-inital=\"\"/\u003e\n```\n\nProp | Type | Value |  Default\n------------- | ------------- | ------------- | -------------\nvalue/modelValue (v-model) | Object | Date or Array for range | {}\nrange | Boolean | - | false\nlang | String | Supports all languages / iso code language | tr\nfirstDayOfWeek | String | monday or sunday | monday\ninputClass | String | classname for input | -\nposition | String | options = top, bottom, left, right | left\ndisabled-start-date | Object | This object consists of the start and end information(from and to params). ( For single status and range status of startDate). | { from: null, to: null}\ndisabled-end-date | Object | It has the same with disabled-start-end. (For range status of end Date. Ignored in single status.) | { from: null, to: null}\ntext-format | String | Short And Long / Short and long formats of month and day names | -\ndate-format | Object | This is the format in which the selected date will be displayed to the user. | { day: '2-digit', month: 'long', year: 'numeric' }\ndisabled | Boolean | This parameter is the datepicker prevents opening | false\nplaceholder | String | Input placeholder | Select Date\ncircle | Boolean | This is selected are circle or area | false\nshowClearButton | Boolean | This property is If there is a selected date, it allows the button used to delete this date to be displayed or not. | false\nshowPickerInital | Booelan | Show picker for on mounted | false\n\nand customize style with css variables\n\n\u003cimg src=\"./resources/customize.png\"\u003e\n\n```css\nelement {\n  --v-calendar-picker-color: #fff;\n  --v-calendar-input-bg-color: #fff;\n  --v-calendar-input-bg-disable-color:rgb(245, 245, 245);\n  --v-calendar-input-text-disable-color:#b8b8b9;\n  --v-calendar-select-bg-color: #fff;\n  --v-calendar-border-color: #eaeaeb;\n  --v-calendar-triangle-color: #eaeaeb;\n  --v-calendar-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.2);\n  --v-calendar-top-shadow: 3px -14px 30px 0px rgba(0, 0, 0, 0.2);\n  --v-calendar-text-color: #7b8187;\n  --v-calendar-action-color: #7b8187;\n  --v-calendar-text-disabled-color: #b8b8b9;\n  --v-calendar-view-button-color: #7b8187;\n  --v-calendar-view-button-font-weight: 400;\n  --v-calendar-view-button-font-size: 1rem;\n  --v-calendar-datepicker-icon-color: #1bba67;\n  --v-calendar-datepicker-icon-size: 1.1rem;\n  --v-calendar-active-bg-color: #1bba67;\n  --v-calendar-active-text-color: #fff;\n  --v-calendar-range-bg-color: #edfff9;\n  --v-calendar-range-text-color: #7b8187;\n  --v-calendar-range-radius: 100%;\n  --v-calendar-day-hover-bg-color: #eaeaeb;\n  --v-calendar-day-width: 40px;\n  --v-calendar-day-height: 40px;\n  --v-calendar-day-font-size: 0.9rem;\n  --v-calendar-day-font-weight: 400;\n  --v-calendar-day-name-font-size: 0.9rem;\n  --v-calendar-day-name-font-weight: 500;\n  --v-calendar-day-name-color: #7b8187;\n  --v-calendar-input-border: 1px solid #eaeaeb;\n  --v-calendar-input-text-color: #7b8187;\n  --v-calendar-input-font-size: 0.9rem;\n  --v-calendar-input-font-weight: 400;\n  --v-calendar-content-radius: 0px;\n  --v-calendar-year-font-size: 1.1rem;\n  --v-calendar-year-color: #7b8187;\n  --v-calendar-year-font-weight: 400;\n  --v-calendar-year-disabled-color: #b8b8b9;\n  --v-calendar-year-disabled-bg-color: transparent;\n  --v-calendar-year-padding: 10px;\n  --v-calendar-year-border: none;\n  --v-calendar-year-border-radius: none;\n  --v-calendar-month-font-size: 1.1rem;\n  --v-calendar-month-color: #7b8187;\n  --v-calendar-month-font-weight: 400;\n  --v-calendar-month-disabled-color: #b8b8b9;\n  --v-calendar-month-disabled-bg-color: transparent;\n  --v-calendar-month-padding: 8px;\n  --v-calendar-month-border: none;\n  --v-calendar-month-border-radius: none;\n}\n```\n\n\nDEMO (https://edisdev.github.io/vue-datepicker-ui)\n\n#### note:\n **date-format** object values is consists to toLocaleString in js. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString).\n\n\n### Development:\n\nFirstly\n\n```bash\n  yarn add --peer vue\n```\n\nBecause, Vue is peer dependency.\nThen,\n\n```bash\n  yarn install\n```\n\n```bash\n  yarn docs:dev\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedisdev%2Fvue-datepicker-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedisdev%2Fvue-datepicker-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedisdev%2Fvue-datepicker-ui/lists"}