{"id":16227174,"url":"https://github.com/shubhadip/vuejs3-datepicker","last_synced_at":"2025-09-29T07:42:33.930Z","repository":{"id":39970660,"uuid":"310821149","full_name":"shubhadip/vuejs3-datepicker","owner":"shubhadip","description":"vue 3 datepicker. supports disabling, highlighting of dates and programmatic access of date.","archived":false,"fork":false,"pushed_at":"2024-07-02T08:27:31.000Z","size":1866,"stargazers_count":72,"open_issues_count":28,"forks_count":48,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-09-29T07:42:33.650Z","etag":null,"topics":["calendar","date","date-picker","datepicker","javascript","typescript","vue","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://vuejs3-datepicker.netlify.app/","language":"HTML","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/shubhadip.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-11-07T10:39:06.000Z","updated_at":"2025-07-21T13:32:16.000Z","dependencies_parsed_at":"2022-08-09T15:36:55.088Z","dependency_job_id":"ee7d4166-e959-42f4-afd7-4afc6c05f914","html_url":"https://github.com/shubhadip/vuejs3-datepicker","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"purl":"pkg:github/shubhadip/vuejs3-datepicker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhadip%2Fvuejs3-datepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhadip%2Fvuejs3-datepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhadip%2Fvuejs3-datepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhadip%2Fvuejs3-datepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shubhadip","download_url":"https://codeload.github.com/shubhadip/vuejs3-datepicker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhadip%2Fvuejs3-datepicker/sbom","scorecard":{"id":821316,"data":{"date":"2025-08-11","repo":{"name":"github.com/shubhadip/vuejs3-datepicker","commit":"81d1d97a2e42259aeb71382ed49a7fb725d51ef9"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.3,"checks":[{"name":"Code-Review","score":4,"reason":"Found 8/17 approved changesets -- score normalized to 4","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 24 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"28 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q","Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38","Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-92r3-m2mg-pj97","Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw","Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g","Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3","Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx","Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6","Warn: Project is vulnerable to: GHSA-x574-m823-4x7w","Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8","Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x","Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4","Warn: Project is vulnerable to: GHSA-859w-5945-r5v3","Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T15:40:24.386Z","repository_id":39970660,"created_at":"2025-08-23T15:40:24.386Z","updated_at":"2025-08-23T15:40:24.386Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277483293,"owners_count":25825560,"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","status":"online","status_checked_at":"2025-09-29T02:00:09.175Z","response_time":84,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","date","date-picker","datepicker","javascript","typescript","vue","vue3","vuejs"],"created_at":"2024-10-10T12:51:50.726Z","updated_at":"2025-09-29T07:42:33.914Z","avatar_url":"https://github.com/shubhadip.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue 3 Datepicker\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/9289e513-2cf9-4b4f-a3a5-f265d691c26c/deploy-status)](https://app.netlify.com/sites/vuejs3-datepicker/deploys)\n\nA datepicker Vue component. Compatible with Vue 3 Only\n\n- [Demo](#demo)\n- [Install](#install)\n- [Usage](#usage)\n- [Date Formatting](#date-formatting)\n- [Props](#available-props)\n- [Events](#events)\n- [Disabled dates](#disabled-dates)\n- [Highlighted dates](#highlighted-dates)\n\nTo view demo examples locally clone the repo and run `npm install \u0026\u0026 npm run dev`\n\n## Demo\n\nTo view a demo online: \u003chttps://vuejs3-datepicker.netlify.app/\u003e\n\n## Install\n\n``` bash\nnpm install vuejs3-datepicker --save\n\nyarn add vuejs3-datepicker\n```\n\n``` javascript\nimport Datepicker from 'vuejs3-datepicker';\n\nexport default {\n  // ...\n  components: {\n    Datepicker\n  }\n  // ...\n}\n```\n\n## Usage\n\n``` html\n\u003cdatepicker\u003e\u003c/datepicker\u003e\n```\n\n*value* prop if passed should be a Date object\n\n``` html\n\u003cscript\u003e\nvar state = {\n  date: new Date(2016, 9,  16)\n}\n\u003c/script\u003e\n\u003cdatepicker :value=\"state.date\"\u003e\u003c/datepicker\u003e\n```\nSupport name attribute for normal html form submission\n``` html\n\u003cdatepicker :value=\"state.date\" name=\"uniquename\"\u003e\u003c/datepicker\u003e\n```\nUsing `v-model`\n``` html\n\u003cdatepicker v-model=\"state.date\" name=\"uniquename\"\u003e\u003c/datepicker\u003e\n```\nEmits events\n``` html\n\u003cdatepicker @selected=\"parentfunctionSelectedhandler\" @opened=\"datepickerOpenedFunction\" @closed=\"parentfunctionCloseHandler\"\u003e\n```\nInline always open version\n``` html\n\u003cdatepicker :inline=\"true\"\u003e\u003c/datepicker\u003e\n```\nProgramatic access of datepicker value\n```html\n\u003cdatepicker ref=\"inputRef\"  @selected=\"handleSelectDate\" :disabled-dates=\"disabledDates\" :highlighted=\"highlightDates\" :value=\"date\" @closed=\"handleCalendarClose\" \u003e\u003c/datepicker\u003e\n```\n```javascript\nconst { selectedDate } = (inputRef.value  as any).value; \n```\n\nIcon color, icon height, icon width of calendar\n``` html\n\u003cdatepicker :icon-color=\"color\" :icon-width=\"width\" :icon-height=\"height\" \u003e\u003c/datepicker\u003e\n```\n\n## Available props\n\n| Prop                          | Type            | Default     | Description                              |\n|-------------------------------|-----------------|-------------|------------------------------------------|\n| modelValue                    | Date\\|String    |             | Date value of the datepicker via v-model |\n| value                         | Date\\|String    |             | Date value of the datepicker             |\n| format                        | String\\|Function| dd MMM yyyy | Date formatting string or function       |\n| full-month-name               | Boolean         | false       | To show the full month name              |\n| disabled-dates                | Object          |             | See below for configuration              |\n| placeholder                   | String          |             | Input placeholder text                   |\n| inline                        | Boolean         |             | To show the datepicker always open       |\n| calendar-class                | String\\|Object  |             | CSS class applied to the calendar el     |\n| input-class                   | String\\|Object  |             | CSS class applied to the input el        |\n| wrapper-class                 | String\\|Object  |             | CSS class applied to the outer div       |\n| monday-first                  | Boolean         | false       | To start the week on Monday              |\n| clear-button                  | Boolean         | false       | Show an icon for clearing the date       |\n| clear-button-icon             | String          |             | Use icon for button (ex: fa fa-times)    |\n| calendar-button               | Boolean         | false       | Show an icon that that can be clicked    |\n| calendar-button-icon          | String          |             | Use icon for button (ex: fa fa-calendar) |\n| calendar-button-icon-content  | String          |             | Use for material-icons (ex: event)       |\n| day-cell-content              | Function        |             | Use to render custom content in day cell |\n| initial-view                  | String          | minimumView | If set, open on that view                |\n| disabled                      | Boolean         | false       | If true, disable Datepicker on screen    |\n| typeable                      | Boolean         | false       | If true, allow the user to type the date |\n| use-utc                       | Boolean         | false       | use UTC for time calculations            |\n| open-date                     | Date\\|String    |             | If set, open on that date                |\n| minimum-view                  | String          | 'day'       | If set, lower-level views won't show     |\n| maximum-view                  | String          | 'year'      | If set, higher-level views won't show    |\n| preventDisableDateSelection   | Boolean         | true        | will prevent selection of disabled date  |\n| iconColor                     | String          | black       | will change calendar icon color          |\n| iconWidth                     | String|Number   | 16          | will change calendar icon width          |\n| iconHeight                    | String|Number   | 16          | will change calendar icon height         |\n\n## Events\n\nThese events are emitted on actions in the datepicker\n\n| Event             | Output     | Description                          |\n|-------------------|------------|--------------------------------------|\n| opened            |            | The picker is opened                 |\n| closed            |            | The picker is closed                 |\n| selected          | Date\\|null | A date has been selected             |\n| input             | Date\\|null | Input value has been modified        |\n| cleared           |            | Selected date has been cleared       |\n| changed-month     | Object     | Month page has been changed          |\n| changed-year      | Object     | Year page has been changed           |\n| changed-decade    | Object     | Decade page has been changed         |\n\n## Disabled Dates\nDates can be disabled in a number of ways.\n\n``` html\n\u003cscript\u003e\nvar state = {\n  disabledDates: {\n    to: new Date(2016, 0, 5), // Disable all dates up to specific date\n    from: new Date(2016, 0, 26), // Disable all dates after specific date\n    \n    dates: [ // Disable an array of dates\n      new Date(2016, 9, 16),\n      new Date(2016, 9, 17),\n      new Date(2016, 9, 18)\n    ],\n    preventDisableDateSelection: true\n  }\n}\n\u003c/script\u003e\n\n\u003cdatepicker :disabled-dates=\"state.disabledDates\" :prevent-disable-date-selection=\"preventDisableDateSelection\"\u003e\u003c/datepicker\u003e\n```\n\n## Highlighted Dates\n``` html\n\u003cscript\u003e\nvar state = {\n  highlighted: {\n    to: new Date(2016, 0, 5), // Highlight all dates up to specific date\n    from: new Date(2016, 0, 26), // Highlight all dates after specific date\n    dates: [ // Highlight an array of dates\n      new Date(2016, 9, 16),\n      new Date(2016, 9, 17),\n      new Date(2016, 9, 18)\n    ]\n    },\n    includeDisabled: true // Highlight disabled dates\n  }\n}\n\u003c/script\u003e\n\u003cdatepicker :highlighted=\"state.highlighted\"\u003e\u003c/datepicker\u003e\n```\n\n## Add new Locale\n```\nnew Locale can be added to the following file /src/components/datepicker/locale/index.ts\n\ncreate a function with new Locale name \u0026 export that from data object at the bottom \n\ne.g\n\nconst newLocale = (): any =\u003e {\n  const langName = 'Hindi';\n  const monthFullName = [\n    'जनवरी',\n    'फ़रवरी',\n    'मार्च',\n    'अप्रैल',\n    'मई',\n    'जून',\n    'जुलाई',\n    'अगस्त',\n    'सितंबर',\n    'अक्टूबर',\n    'नवंबर',\n    'दिसंबर',\n  ];\n  const shortName = ['जन', 'फ़र', 'मार्च', 'अप्रै', 'मई', 'जून', 'जुला', 'अगस्त', 'सितं', 'अक्टू', 'नवं', 'दिसं'];\n  const days = ['रवि', 'सोम', 'मंगल', 'बुध', 'गुरु', 'शुक्र', 'शनि'];\n  const daysNames = ['रविवार', 'सोमवार', 'मंगलवार', 'बुधवार', 'गुरुवार', 'शुक्रवार', 'शनिवार'];\n  const rtl = false;\n  const ymd = false;\n  const yearSuffix = '';\n  return {\n    months: monthFullName,\n    monthsAbbr: shortName,\n    days,\n    language: langName,\n    yearSuffix,\n    ymd,\n    rtl,\n    langName,\n    daysNames,\n  };\n};\n\nexport const data = {\n  af: af(),\n  hi: hi(),\n  de: de(),\n  en: en(),\n  fr: fr(),\n  nl: nl()\n  ...\n  newLocale: newLocale()\n};\n\n```\nContributors:\n\n* [Shubhadip Maity](https://github.com/shubhadip)\n* [Vivek Singh](https://github.com/viveksinghup)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshubhadip%2Fvuejs3-datepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshubhadip%2Fvuejs3-datepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshubhadip%2Fvuejs3-datepicker/lists"}