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 --save

import 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