{"id":13535746,"url":"https://github.com/charliekassel/vuejs-datepicker","last_synced_at":"2025-04-25T14:45:20.305Z","repository":{"id":38485791,"uuid":"52266845","full_name":"charliekassel/vuejs-datepicker","owner":"charliekassel","description":"A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations","archived":false,"fork":false,"pushed_at":"2024-07-09T15:37:08.000Z","size":2348,"stargazers_count":2613,"open_issues_count":264,"forks_count":725,"subscribers_count":43,"default_branch":"master","last_synced_at":"2025-04-19T16:00:06.150Z","etag":null,"topics":["date","date-picker","datepicker","vue","vuejs"],"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/charliekassel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2016-02-22T10:48:51.000Z","updated_at":"2025-03-18T00:16:38.000Z","dependencies_parsed_at":"2024-01-02T23:33:11.830Z","dependency_job_id":"7cdaad93-a20f-4ec1-95a9-6e5ff73deca5","html_url":"https://github.com/charliekassel/vuejs-datepicker","commit_stats":{"total_commits":700,"total_committers":148,"mean_commits":4.72972972972973,"dds":"0.48857142857142855","last_synced_commit":"605b84162d8d959b35f96e537cad47c7c7255d3a"},"previous_names":[],"tags_count":145,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charliekassel%2Fvuejs-datepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charliekassel%2Fvuejs-datepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charliekassel%2Fvuejs-datepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charliekassel%2Fvuejs-datepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/charliekassel","download_url":"https://codeload.github.com/charliekassel/vuejs-datepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250560700,"owners_count":21450276,"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","date-picker","datepicker","vue","vuejs"],"created_at":"2024-08-01T09:00:25.339Z","updated_at":"2025-04-24T04:19:44.445Z","avatar_url":"https://github.com/charliekassel.png","language":"JavaScript","funding_links":[],"categories":["Libraries and Plugins","UI组件","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Components \u0026 Libraries","JavaScript","UI Components","Awesome Vue.js","UI Components [🔝](#readme)"],"sub_categories":["UI Elements","Libraries \u0026 Plugins","形成","UI Components","Date Pickers","Form"],"readme":"# Datepicker\n\n[![Travis Build](https://img.shields.io/travis/charliekassel/vuejs-datepicker.svg)](https://travis-ci.org/charliekassel/vuejs-datepicker)\n[![Version](https://img.shields.io/npm/v/vuejs-datepicker.svg)](https://www.npmjs.com/package/vuejs-datepicker)\n[![Coveralls github](https://img.shields.io/coveralls/github/charliekassel/vuejs-datepicker.svg)](https://coveralls.io/github/charliekassel/vuejs-datepicker?branch=master)\n[![Downloads](https://img.shields.io/npm/dm/vuejs-datepicker.svg)](https://www.npmjs.com/package/vuejs-datepicker)\n\nA datepicker Vue component. Compatible with Vue 2.x\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- [Translations](#translations)\n\nNB. Vue 1.x was supported up to version v0.9.9. If you want to use this component with Vue 1.x you can install with `npm install vuejs-datepicker@0.9.9`\n\n## Demo\n\nTo view a demo online:\nhttps://codesandbox.io/s/mpklq49wp\n\nTo view demo examples locally clone the repo and run `npm install \u0026\u0026 npm run serve`\n\n## Install\n\n``` bash\nnpm install vuejs-datepicker --save\n```\n\n\n``` javascript\nimport Datepicker from 'vuejs-datepicker';\n\nexport default {\n  // ...\n  components: {\n    Datepicker\n  }\n  // ...\n}\n```\n\nOr use directly from a CDN\n``` html\n\u003cdiv id=\"app\"\u003e\n  \u003cvuejs-datepicker\u003e\u003c/vuejs-datepicker\u003e\n\u003c/div\u003e\n\u003cscript src=\"https://unpkg.com/vue\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/vuejs-datepicker\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nconst app = new Vue({\n  el: '#app',\n  components: {\n  \tvuejsDatepicker\n  }\n})\n\u003c/script\u003e\n\n\u003c!-- French language example --\u003e\n\u003cdiv id=\"app\"\u003e\n  \u003cvuejs-datepicker :language=\"fr\"\u003e\u003c/vuejs-datepicker\u003e\n\u003c/div\u003e\n\u003cscript src=\"https://unpkg.com/vue\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/vuejs-datepicker\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/vuejs-datepicker/dist/locale/translations/fr.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nconst app = new Vue({\n  el: '#app',\n  data() {\n    return {\n      fr: vdp_translation_fr.js\n    }\n  },\n  components: {\n  \tvuejsDatepicker\n  }\n})\n\u003c/script\u003e\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=\"doSomethingInParentComponentFunction\" @opened=\"datepickerOpenedFunction\" @closed=\"datepickerClosedFunction\"\u003e\n```\nInline always open version\n``` html\n\u003cdatepicker :inline=\"true\"\u003e\u003c/datepicker\u003e\n```\n## Available props\n\n| Prop                          | Type            | Default     | Description                              |\n|-------------------------------|-----------------|-------------|------------------------------------------|\n| value                         | Date\\|String    |             | Date value of the datepicker             |\n| name                          | String          |             | Input name property                      |\n| id                            | String          |             | Input id                                 |\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| language                      | Object          | en          | Translation for days and months          |\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| bootstrap-styling             | Boolean         | false       | Output bootstrap v4 styling classes.     |\n| initial-view                  | String          | minimumView | If set, open on that view                |\n| disabled                      | Boolean         | false       | If true, disable Datepicker on screen    |\n| required                      | Boolean         | false       | Sets html required attribute on input    |\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\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| selectedDisabled  | Object     | A disabled date has been selected    |\n| input             | Date\\|null | Input value has been modified        |\n| cleared           |            | Selected date has been cleared       |\n| changedMonth      | Object     | Month page has been changed          |\n| changedYear       | Object     | Year page has been changed           |\n| changedDecade     | Object     | Decade page has been changed         |\n\n\n## Date formatting\n\n#### String formatter\n\nNB. This is not very robust at all - use at your own risk! Needs a better implementation.\n\n| Token | Desc                   | Example     |\n|-------|------------------------|-------------|\n| d     | day                    | 1           |\n| dd    | 0 prefixed day         | 01          |\n| D     | abbr day               | Mon         |\n| su    | date suffix            | st, nd, rd  |\n| M     | month number (1 based) | 1 (for Jan) |\n| MM    | 0 prefixed month       | 01          |\n| MMM   | abbreviated month name | Jan         |\n| MMMM  | month name             | January     |\n| yy    | two digit year         | 16          |\n| yyyy  | four digit year        | 2016        |\n\n#### Function formatter\n\nDelegates date formatting to provided function.\nFunction will be called with date and it has to return formated date as a string.\nThis allow us to use moment, date-fns, globalize or any other library to format date.\n\n``` html\n\u003cscript\u003e\n  methods: {\n    customFormatter(date) {\n      return moment(date).format('MMMM Do YYYY, h:mm:ss a');\n    }\n  }\n\u003c/script\u003e\n\u003cdatepicker :format=\"customFormatter\"\u003e\u003c/datepicker\u003e\n```\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    days: [6, 0], // Disable Saturday's and Sunday's\n    daysOfMonth: [29, 30, 31], // Disable 29th, 30th and 31st of each month\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    ranges: [{ // Disable dates in given ranges (exclusive).\n      from: new Date(2016, 11, 25),\n      to: new Date(2016, 11, 30)\n    }, {\n      from: new Date(2017, 1, 12),\n      to: new Date(2017, 2, 25)\n    }],\n    // a custom function that returns true if the date is disabled\n    // this can be used for wiring you own logic to disable a date if none\n    // of the above conditions serve your purpose\n    // this function should accept a date and return true if is disabled\n    customPredictor: function(date) {\n      // disables the date if it is a multiple of 5\n      if(date.getDate() % 5 == 0){\n        return true\n      }\n    }\n  }\n}\n\u003c/script\u003e\n\u003cdatepicker :disabled-dates=\"state.disabledDates\"\u003e\u003c/datepicker\u003e\n```\n\n## Highlighted Dates\nDates can be highlighted (e.g. for marking an appointment) in a number of ways. Important:\nBy default disabled dates are ignored, to highlight disabled dates set the `includeDisabled`\nproperty to `true`. Note: Both `to` and `from` properties are required to define a range of\ndates to highlight.\n\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    days: [6, 0], // Highlight Saturday's and Sunday's\n    daysOfMonth: [15, 20, 31], // Highlight 15th, 20th and 31st of each month\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    // a custom function that returns true of the date is highlighted\n    // this can be used for wiring you own logic to highlight a date if none\n    // of the above conditions serve your purpose\n    // this function should accept a date and return true if is highlighted\n    customPredictor: function(date) {\n      // highlights the date if it is a multiple of 4\n      if(date.getDate() % 4 == 0){\n        return true\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## Slots\n\nSlots will help you customize content.  .\n\n#### beforeCalendarHeader\n\nSometimes you need to show custom content before the calendar header. For such cases you can use the named slot `beforeCalendarHeader`.\n\nAn example would be to use bootstrap's `input-group-prepend` and `input-group-append`\nto show some custom text:\n``` html\n\u003cdatepicker :bootstrap-styling=\"true\"\u003e\n  \u003cdiv slot=\"beforeCalendarHeader\" class=\"calender-header\"\u003e\n    Choose a Date\n  \u003c/div\u003e\n\u003c/datepicker\u003e\n```\n\n#### afterDateInput\n\nTo implement some custom styling (for instance to add an animated placeholder) on DateInput, you might need to add elements as DateInput siblings. Slot named\n`afterDateInput` allows you to do that:\n\n``` html\n\u003cdatepicker\u003e\n  \u003cspan slot=\"afterDateInput\" class=\"animated-placeholder\"\u003e\n    Choose a Date\n  \u003c/span\u003e\n\u003c/datepicker\u003e\n```\n\n\n## Translations\n\nContributing guide - please use appropriate code from this [list](http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) as the translation property.\n\n- Add your language as a module in the `src/locale/translations` dir.\n- Import and export it in the `src/locale/index` file\n- Add the Language to the available languages in the readme file.\n- Run `npm run lint` to make sure your code formatting is in line with the required code style.\n\n### How to apply language\n\nBelow script tag in component.\n```javascript\nimport {en, es} from 'vuejs-datepicker/dist/locale'\n```\n\nIn component data.\n```javascript\ndata () {\n    return {\n      en: en,\n      es: es\n    }\n}\n```\n\nhtml.\n```javascript\n\u003cdatepicker :language=\"es\"\u003e\u003c/datepicker\u003e\n```\n\nAvailable languages\n\n| Abbr        | Language         |          |\n| ----------- |------------------|----------|\n| af          | Afrikaans        |          |\n| ar          | Arabic           |          |\n| bg          | Bulgarian        |          |\n| bs          | Bosnian          |          |\n| ca          | Catalan          |          |\n| cs          | Czech            |          |\n| da          | Danish           |          |\n| de          | German           |          |\n| ee          | Estonian         |          |\n| el          | Greek            |          |\n| en          | English          | *Default*|\n| es          | Spanish          |          |\n| fa          | Persian (Farsi)  |          |\n| fi          | Finnish          |          |\n| fo          | Faroese          |          |\n| fr          | French           |          |\n| ge          | Georgia          |          |\n| gl          | Galician         |          |\n| he          | Hebrew           |          |\n| hu          | Hungarian        |          |\n| hr          | Croatian         |          |\n| id          | Indonesian       |          |\n| is          | Icelandic        |          |\n| it          | Italian          |          |\n| ja          | Japanese         |          |\n| kk          | Kazakh           |          |\n| ko          | Korean           |          |\n| lb          | Luxembourgish    |          |\n| lt          | Lithuanian       |          |\n| lv          | Latvian          |          |\n| mk          | Macedonian       |          |\n| mn          | Mongolian        |          |\n| nbNO        | Norwegian Bokmål |          |\n| nl          | Dutch            |          |\n| pl          | Polish           |          |\n| ptBR        | Portuguese-Brazil|          |\n| ro          | Romanian         |          |\n| ru          | Russian          |          |\n| sk          | Slovak           |          |\n| slSI        | Slovenian        |          |\n| sv          | Swedish          |          |\n| sr          | Serbian (Latin)  |          |\n| srCyrl      | Serbian (Cyrl)   |          |\n| th          | Thai             |          |\n| tr          | Turkish          |          |\n| uk          | Ukrainian        |          |\n| ur          | Urdu             |          |\n| vi          | Vietnamese       |          |\n| zh          | Chinese          |          |\n| zhHK        | Chinese_HK       |          |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharliekassel%2Fvuejs-datepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcharliekassel%2Fvuejs-datepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharliekassel%2Fvuejs-datepicker/lists"}