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