https://github.com/artistan/vuejs-range-datepickers
Component utilizing VueJS-Datepicker for a Data Range Select for VueJs
https://github.com/artistan/vuejs-range-datepickers
date datepicker props range vuejs vuejs-range-datepickers
Last synced: about 1 year ago
JSON representation
Component utilizing VueJS-Datepicker for a Data Range Select for VueJs
- Host: GitHub
- URL: https://github.com/artistan/vuejs-range-datepickers
- Owner: Artistan
- License: mit
- Created: 2017-06-22T03:49:19.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-07-06T15:58:27.000Z (almost 8 years ago)
- Last Synced: 2025-03-25T13:46:06.247Z (over 1 year ago)
- Topics: date, datepicker, props, range, vuejs, vuejs-range-datepickers
- Language: Vue
- Size: 22.5 KB
- Stars: 10
- Watchers: 3
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
vuejs-range-datepickers
=============
Component utilizing VueJS-Datepicker for a Data Range Select for VueJs.
## Installation
---------------
### npm
``` sh
npm install --save vuejs-range-datepickers
```
## Usage
---------------
```javascript
// app.js
window.Vue = require('vue');
Vue.component('range-datepickers',require('vuejs-range-datepickers'));
const app = new Vue({
el: '#app'
})
```
*value* prop if passed should be a Date object or valid date string
```HTML
// index.html
```
## more uses cases
``` html
var state = {
date: new Date(2016, 9, 16)
}
```
support name attribute for normal html form submission
``` html
```
Use `v-model` for two-way binding
``` html
```
Inline always open version
``` html
```
## Available props
| Prop | Type | Default | Description |
|-----------------------|--------------|-------------|------------------------------------------|
| value | Date/String | | Date value of the datepicker |
| name | String | | Input name property |
| id | String | | Input id |
| format | String | dd MMM yyyy | Date formatting string |
| language | String | en | Translation for days and months |
| disabled | Object | | See below for configuration |
| placeholder | String | | Input placeholder text |
| inline | Boolean | | To show the datepicker always open |
| input-class | String | | CSS class applied to the input el |
| wrapper-class | String | | CSS class applied to the outer div |
| monday-first | Boolean | false | To start the week on Monday |
| clear-button | Boolean | false | Show an icon for clearing the date |
| clear-button-icon | String | | Use icon for button (ex: fa fa-times) |
| calendar-button | Boolean | false | Show an icon that that can be clicked |
| calendar-button-icon | String | | Use icon for button (ex: fa fa-calendar) |
| bootstrapStyling | Boolean | false | Output bootstrap styling classes |
| initial-view | String | 'day' | If 'month' or 'year', open on that view |
| disabled-picker | Boolean | false | If true, disable Datepicker on screen |
| required | Boolean | false | Sets html required attribute on input |
| bootstrap-row | Boolean | true | Sets html styles for .row with even cols |
| restrict-dates | Boolean | true | Restrict the end date to be past start |
| start-label | String | "FROM:" | Adjust/remove a label for the start input|
| end-label | String | "TO:" | Adjust/remove a label for the end input |
| submit-callback | Function | null | Set a callback to handle button event |
| submit-text | String | "UpDate" | Sets submit button text |
| disabled-dates | Array | [] | Array of Dates|date strings |
| no-overlap | Boolean | true | Forces End Date to change if overlapping after start date changed|
| minimum-duration | Number | 1 | Sets end date to start + minimum-duration if overlap occurs|
## Available data attributes
This data is used to restrict both calendars for a date range and specific dates that may change
use the `recommended` disabled-dates property if your data will not change
```
defaultDisabledDates: {
to: new Date('1990-12-31'),
from: new Date('3333-12-31'),
dates: []
},
```
## slots
* header-title
* header-legend
* button
## Date formatting
NB. This is not very robust at all - use at your own risk! Needs a better implementation.
| Token | Desc | Example |
|-------|------------------------|-------------|
| d | day | 1 |
| dd | 0 prefixed day | 01 |
| D | abbr day | Mon |
| su | date suffix | st, nd, rd |
| M | month number (1 based) | 1 (for Jan) |
| MM | 0 prefixed month | 01 |
| MMM | abbreviated month name | Jan |
| MMMM | month name | January |
| yy | two digit year | 16 |
| yyyy | four digit year | 2016 |
#### Translations
``` html
```
Available languages
| Abbr | Language | |
| ----------- |------------------|----------|
| en | English | *Default*|
| bs | Bosnian | |
| es | Spanish | |
| fi | Finnish | |
| fr | French | |
| hu | Hungarian | |
| hr | Croatian | |
| id | Indonesian | |
| it | Italian | |
| nl | Dutch | |
| de | German | |
| da | Danish | |
| nb-no | Norwegian Bokmål | |
| cs | Czech | |
| pt-br | Portuguese-Brazil| |
| ro | Romanian | |
| vi | Vietnamese | |
| zh | Chinese | |
| ja | Japanese | |
| he | Hebrew | |
| ru | Russian | |
| sk | Slovak | |
| sl-si | Slovenian | |
| sv | Swedish | |
| th | Thai | |
| bg | Bulgarian | |
| lt | Lithuanian | |
| pl | Polish | |
| ar | Arabic | |
| ee | Estonian | |
| ko | Korean | |
| tr | Turkish | |
| uk | Ukrainian | |
| is | Icelandic | |
## Live Example
---------------
[](https://codesandbox.io/s/wy9p95p245)
demonstrating this range date selector via simple vue app.
## Documentation
[readme](https://github.com/Artistan/vuejs-range-datepickers#readme))
## TODOs
---------------
- allow minimum-duration to be and array of dates with a duration
- get more feedback!
## Contributions
---------------
All contributions are welcome: use-cases, documentation, code, patches, bug reports, feature requests, etc. You do not need to be a programmer to speak up!
## version changes
v1.0.0
- start date is no longer restricted by end date.
- can disable an array of dates `:disable-dates`
- defaults to not allow overlapping disabled dates `:no-overlap`
- defaults to `:end-plus="1"` which adds this value to end date if the overlapping forces the end-date to change
- `: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
v1.2.0
- removed end-plus , changed to minimum-duration
- other date restrictions based on minimum-duration and disabled-dates...