1.1.2 • Published 6 years ago
vue-dateify v1.1.2
Vue Dateify
A VueJS component for picking the date and time.
Examples
You can view some examples online, or get it set up locally: npm install && npm run build
Install
$ npm install vue-dateify --saveimport VueDateify from 'vue-dateify';
new Vue({
el: '#app',
components: {
VueDateify
}
});Usage
<vue-dateify></vue-dateify>value or v-model prop must be a Date object
<script>
let something = new Date()
</script>
<vue-dateify v-model="something"></vue-dateify>Available props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | Date | Date object representing the value of the date and/or time picker | |
| date-addon | String | '' | HTML to be disabled in an input group addon |
| date-label | String | '' | Label to be displayed above input element |
| date-format | String | 'MMMM Do, YYYY h:mm a' | The display format that is shown in the input field |
| date-auto-close | Boolean | true | Set to false to require a "save" button in order to save changes to the model |
| date-min | Date | null | Minimum selectable date |
| date-max | Date | null | Maximum selectable date |
| highlighted-dates | Array | [] | Show dates as highlighted on the calendar with details view of the dates |
| time-addon | String | '' | HTML to be disabled in an input group addon |
| time-label | String | '' | Label to be displayed above input element |
| time-format | String | 'h:mm a' | The display format that is shown in the input field |
| time-auto-close | Boolean | true | Set to false to require a "save" button in order to save changes to the model |
| international | Boolean | false | Show time in 24-hour mode |
| animate | Boolean | true | Apply css animation classes to the pickers |
| animate-in-class | String | 'animated bounceInDown' | Customize the animation "enter/in" classes |
| animate-out-class | String | 'animated fadeOutUp' | Customize the animation "exit/out" classes |
| weeks | Boolean | false | Show week numbers on the calendar for the date picker |
| view | String | 'days' | Control the deepest level on the calendar (options are days, months, years) |
| disabled-days | Array | [] | Disable certain days of the week |
| disabled-months | Array | [] | Disable certain months of the year |
| disabled-years | Array | [] | Disable certain years |
| disabled-dates | Array | [] | Disable certain calendar dates |
| disabled-hours | Array | [] | Disable certain hours of the clock |
| disabled-minutes | Array | [] | Disable certain minutes of the clock |
| today-button | Boolean | false | Show a button for jumping to "today" on the day view of the calendar |
| close-button | Boolean | false | Show a button for closing the date and/or time picker |
| separate | Boolean | false | Set to true to show the date and time pickers as separate inputs |
Events
| Name | Parameter | Description |
|---|---|---|
| onChange | Date | Event emitted from vue-dateify component which returns the updated model as a Date object |
Date Formatting
Refer to moment.js for date-format and time-format.
Issues
File any issues here https://github.com/klye-g/vue-dateify/issues