picker-vntx-ptbr
v0.5.4
Published
A responsive Vue.js datepicker component.
Downloads
4
Readme
TRVLPicker
TRVLPicker is a responsive Vue.js datepicker component. From mobile to desktop it has a full-screen vertical layout, a single month layout, a double month layout, and a triple month layout.
Table of contents
Install
npm install @trvl/pickerimport TRVLPicker from '@trvl/picker'
export default {
// …
components: {
TRVLPicker,
},
// …
}Usage
Basic
In its most basic form, TRVLPicker only requires the checkin and checkout props.
Both should be a Date object and have a sync modifier:
<template>
<TRVLPicker
:checkin.sync="checkin"
:checkout.sync="checkout"
/>
</template>
<script>
import TRVLPicker from '@trvl/picker'
export default {
components: {
TRVLPicker,
},
data() {
return {
checkin: new Date(2019, 2, 13),
checkout: new Date(2019, 2, 15),
}
},
}
</script>Advanced
To ensure a correct positioning of the datepicker in the full-screen layout it makes use of a Portal. Although not required, it is recommended to place a Portal target element outside your Vue app:
<body>
<div id="app">
…
</div>
<div id="portal"></div>
</body>Props
| Prop | Type | Default | Description |
|--------------------|--------|-----------------------|---------------------------------------------------------|
| breakpointSingle | Number | 580 | Point at which the layout goes to a single month layout |
| breakpointDouble | Number | 740 | Point at which the layout goes to a double month layout |
| breakpointTriple | Number | 0 (disabled) | Point at which the layout goes to a triple month layout |
| checkin | Date | | Check-in date |
| checkout | Date | | Check-out date |
| maxDate | Date | new Date() + 1 year | Last possible check-out date |
| maxStay | Number | 30 | Maximum date range in days |
| minDate | Date | new Date() | First posssible check-in date |
| portal | String | portal | The ID of the portal |
Slots
All slots are optional, but the checkin and checkout slots are highly recommended so as to customize their appearance.
Check-in
The template used for the check-in button.
<template slot="checkin" slot-scope="{ isActive, value }">
<div :class="{ active: isActive }">
<label for="checkin">Check-in</label>
<input id="checkin" type="text" :value="value">
</div>
</template>The following data is available in the slot-scope:
| Data | Type | Description |
|------------|---------|--------------------------------------|
| isActive | Boolean | Whether the check-in input is active |
| value | Date | The raw check-in value |
Check-out
The template used for the check-out button.
<template slot="checkout" slot-scope="{ isActive, value }">
<div :class="{ active: isActive }">
<label for="checkout">Check-in</label>
<input id="checkout" type="text" :value="value">
</div>
</template>The following data is available in the slot-scope:
| Data | Type | Description |
|------------|---------|---------------------------------------|
| isActive | Boolean | Whether the check-out input is active |
| value | Date | The raw check-out value |
Close
The template used for the close button in the vertical layout.
<template slot="close">
<icon name="close" />
</template>Next
The template used for the navigation button to go to the next month.
<template slot="next">
<icon name="next" />
</template>Previous
The template used for the navigation button to go to the previous month.
<template slot="previous">
<icon name="previous" />
</template>Methods
By adding a ref to the datepicker a couple of methods can be accessed:
<template>
<TRVLPicker
ref="picker"
…
/>
</template>
<script>
export default {
mounted() {
this.$refs.picker.callMethod()
},
}
</script>| Method | Parameters | Description |
|---------|-------------------------|----------------------------------------------------------------|
| close | | Close the datepicker |
| open | checkin | checkout | Open the datepicker on the given input (defaults to checkin) |
Events
| Event | Description |
|---------|--------------------------|
| close | The datepicker is closed |
| open | The datepicker is opened |
Contributing
# Project setup
npm install
# Compiles and hot-reloads for development
npm run serve
# Compiles and minifies for production
npm run build
# Lints and fixes files
npm run lint
# Runs unit tests
npm run test:unit