Vue Dropdown Datepicker

A simple and customizable dropdown datepicker vue component.

View Demo View Github

Installation

vuejsis required to use this component

Package manager

Using npm

npm i vue-dropdown-datepicker

Using yarn

yarn add vue-dropdown-datepicker

Using bower

bower install vue-dropdown-datepicker

Using CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dropdown-datepicker.min.js"></script>

OR

<script src="https://unpkg.com/[email protected]/dist/dropdown-datepicker.min.js"></script>

Usage

ES6

import DropdownDatepicker from '../src/dropdown-datepicker.vue';
new Vue({
    el: '#app',
    components: {
        DropdownDatepicker
    }
});

Browser

new Vue({
    el: '#app',
    components: {
        DropdownDatepicker
    }
});

Options

Option Type Defult Comment
defaultDate string null
defaultDateFormat string 'yyyy-mm-dd'
displayFormat string 'dmy'
submitFormat string 'yyyy-mm-dd'
submitId string null
minAge int null
maxAge int null
minYear int null
maxYear int null
minDate string null yyyy-mm-dd
maxDate string null yyyy-mm-dd
allowPast boolean true
allowFuture boolean true
wrapperClass string 'date-dropdowns'
dropdownClass string null
daySuffixes boolean true
monthSuffixes boolean true
monthFormat string 'long'
required boolean false
dayLabel string 'Day
monthLabel string 'Month'
yearLabel string 'Year'
sortYear string 'desc'
monthLongValues array ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
monthShortValues array ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
initialDayMonthYearValues array ['Day', 'Month', 'Year']
daySuffixValues array ['st', 'nd', 'rd', 'th']

Events

onDayChange

Call on any change of day dropdown

<dropdown-datepicker v-bind:on-day-change="yourFunctionName"><dropdown-datepicker>

onMonthChange

Call on any change of month dropdown

<dropdown-datepicker v-bind:on-month-change="yourFunctionName"><dropdown-datepicker>

onYearChange

Call on any change of year dropdown

<dropdown-datepicker v-bind:on-year-change="yourFunctionName"><dropdown-datepicker>