{"id":18644402,"url":"https://github.com/artistan/vuejs-range-datepickers","last_synced_at":"2025-04-11T12:31:02.936Z","repository":{"id":74204197,"uuid":"95072183","full_name":"Artistan/vuejs-range-datepickers","owner":"Artistan","description":"Component utilizing VueJS-Datepicker for a Data Range Select for VueJs","archived":false,"fork":false,"pushed_at":"2018-07-06T15:58:27.000Z","size":23,"stargazers_count":10,"open_issues_count":0,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-25T13:46:06.247Z","etag":null,"topics":["date","datepicker","props","range","vuejs","vuejs-range-datepickers"],"latest_commit_sha":null,"homepage":null,"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/Artistan.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-22T03:49:19.000Z","updated_at":"2023-08-29T11:59:47.000Z","dependencies_parsed_at":"2023-02-25T19:01:09.851Z","dependency_job_id":null,"html_url":"https://github.com/Artistan/vuejs-range-datepickers","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Artistan%2Fvuejs-range-datepickers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Artistan%2Fvuejs-range-datepickers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Artistan%2Fvuejs-range-datepickers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Artistan%2Fvuejs-range-datepickers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Artistan","download_url":"https://codeload.github.com/Artistan/vuejs-range-datepickers/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248401939,"owners_count":21097328,"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","datepicker","props","range","vuejs","vuejs-range-datepickers"],"created_at":"2024-11-07T06:11:53.116Z","updated_at":"2025-04-11T12:31:02.928Z","avatar_url":"https://github.com/Artistan.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"vuejs-range-datepickers\n=============\n\nComponent utilizing VueJS-Datepicker for a Data Range Select for VueJs.\n\n## Installation\n---------------\n### npm\n``` sh\nnpm install --save vuejs-range-datepickers\n```\n\n## Usage\n---------------\n\n```javascript \n//   app.js\nwindow.Vue = require('vue');\n\nVue.component('range-datepickers',require('vuejs-range-datepickers'));\n\nconst app = new Vue({\n  el: '#app'\n})\n```\n\n*value* prop if passed should be a Date object or valid date string\n```HTML  \n//   index.html\n\u003c!doctype html\u003e\n  \u003chtml\u003e\n    \u003chead\u003e\n      \u003cmeta charset=\"utf-8\"/\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n      \u003cdiv id=\"app\"\u003e\n        \u003crange-datepickers start-date=\"06-10-2017\" end-date=\"06-20-2017\"\u003e\u003c/range-datepickers\u003e\n      \u003c/div\u003e\n      \u003cscript src=\"main.js\"\u003e\u003c/script\u003e\n    \u003c/body\u003e\n  \u003c/html\u003e\n```\n\n## more uses cases\n\n``` html\n\u003cscript\u003e\nvar state = {\n    date: new Date(2016, 9,  16)\n}\n\u003c/script\u003e\n\u003crange-datepickers :value=\"state.date\"\u003e\u003c/range-datepickers\u003e\n```\nsupport name attribute for normal html form submission\n``` html\n\u003crange-datepickers :value=\"state.date\" name=\"uniquename\"\u003e\u003c/range-datepickers\u003e\n```\nUse `v-model` for two-way binding\n``` html\n\u003crange-datepickers v-model=\"state.date\" name=\"uniquename\"\u003e\u003c/range-datepickers\u003e\n```\nInline always open version\n``` html\n\u003crange-datepickers :inline=\"true\"\u003e\u003c/range-datepickers\u003e\n```\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       | dd MMM yyyy | Date formatting string                   |\n| language              | String       | en          | Translation for days and months          |\n| disabled              | Object       |             | See below for configuration              |\n| placeholder           | String       |             | Input placeholder text                   |\n| inline                | Boolean      |             | To show the datepicker always open       |\n| input-class           | String       |             | CSS class applied to the input el        |\n| wrapper-class         | String       |             | 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| bootstrapStyling      | Boolean      | false       | Output bootstrap styling classes         |\n| initial-view          | String       | 'day'       | If 'month' or 'year', open on that view  |\n| disabled-picker       | Boolean      | false       | If true, disable Datepicker on screen    |\n| required              | Boolean      | false       | Sets html required attribute on input    |\n| bootstrap-row         | Boolean      | true        | Sets html styles for .row with even cols |\n| restrict-dates        | Boolean      | true        | Restrict the end date to be past start   |\n| start-label           | String       | \"FROM:\"     | Adjust/remove a label for the start input|\n| end-label             | String       | \"TO:\"       | Adjust/remove a label for the end input  |\n| submit-callback       | Function     | null        | Set a callback to handle button event    |\n| submit-text           | String       | \"UpDate\"    | Sets submit button text                  |\n| disabled-dates        | Array        | []          | Array of Dates|date strings              |\n| no-overlap            | Boolean      | true        | Forces End Date to change if overlapping after start date changed|\n| minimum-duration      | Number       | 1           | Sets end date to start + minimum-duration if overlap occurs|\n\n\n## Available data attributes\nThis data is used to restrict both calendars for a date range and specific dates that may change\nuse the `recommended` disabled-dates property if your data will not change\n```\ndefaultDisabledDates: {\n    to: new Date('1990-12-31'),\n    from: new Date('3333-12-31'),\n    dates: []\n},\n```\n\n## slots\n\n* header-title\n* header-legend\n* button\n\n## Date formatting\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#### Translations\n\n``` html\n\u003cdatepicker language=\"es\"\u003e\u003c/datepicker\u003e\n```\nAvailable languages\n\n| Abbr        | Language         |          |\n| ----------- |------------------|----------|\n| en          | English          | *Default*|\n| bs          | Bosnian          |          |\n| es          | Spanish          |          |\n| fi          | Finnish          |          |\n| fr          | French           |          |\n| hu          | Hungarian        |          |\n| hr          | Croatian         |          |\n| id          | Indonesian       |          |\n| it          | Italian          |          |\n| nl          | Dutch            |          |\n| de          | German           |          |\n| da          | Danish           |          |\n| nb-no       | Norwegian Bokmål |          |\n| cs          | Czech            |          |\n| pt-br       | Portuguese-Brazil|          |\n| ro          | Romanian         |          |\n| vi          | Vietnamese       |          |\n| zh          | Chinese          |          |\n| ja          | Japanese         |          |\n| he          | Hebrew           |          |\n| ru          | Russian          |          |\n| sk          | Slovak           |          |\n| sl-si       | Slovenian        |          |\n| sv          | Swedish          |          |\n| th          | Thai             |          |\n| bg          | Bulgarian        |          |\n| lt          | Lithuanian       |          |\n| pl          | Polish           |          |\n| ar          | Arabic           |          |\n| ee          | Estonian         |          |\n| ko          | Korean           |          |\n| tr          | Turkish          |          |\n| uk          | Ukrainian        |          |\n| is          | Icelandic        |          |\n\n## Live Example\n---------------\n[![Edit vuejs-range-datepickers Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/wy9p95p245)  \ndemonstrating this range date selector via simple vue app.\n\n## Documentation \n\n[readme](https://github.com/Artistan/vuejs-range-datepickers#readme))\n\n## TODOs\n---------------\n- allow minimum-duration to be and array of dates with a duration\n- get more feedback!\n\n\n## Contributions\n---------------\nAll contributions are welcome: use-cases, documentation, code, patches, bug reports, feature requests, etc. You do not need to be a programmer to speak up!\n\n## version changes\nv1.0.0\n - start date is no longer restricted by end date.\n - can disable an array of dates `:disable-dates`\n - defaults to not allow overlapping disabled dates `:no-overlap`\n - defaults to `:end-plus=\"1\"` which adds this value to end date if the overlapping forces the end-date to change\n - `:default-disabled-dates` is the datepicker 'disabled' option for both of the range pickers. this allows for setting max (from), min (to), and dates (disabled individual dates)  that can be modified by parent components\n\n\nv1.2.0\n - removed end-plus , changed to minimum-duration\n - other date restrictions based on minimum-duration and disabled-dates...\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartistan%2Fvuejs-range-datepickers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fartistan%2Fvuejs-range-datepickers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartistan%2Fvuejs-range-datepickers/lists"}