Skip to content

A simple and customizable dropdown datepicker vue component

License

Notifications You must be signed in to change notification settings

tanvir0604/vue-dropdown-datepicker

Repository files navigation

Vue Dropdown Datepicker

Warning

This library supports only vue2 and no longer maintained. Please check vue3-dropdown-datepicker

A simple and customizable dropdown datepicker vue component.

Check Examples

Installation

vuejs is 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/vue-dropdown-datepicker@1.3.1/dist/dropdown-datepicker.min.js"></script>

OR

<script src="https://unpkg.com/vue-dropdown-datepicker@1.3.1/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>

Contributing

Contributing Feel free to submit any fixes or propose any additional functionality via pull request or issue, making sure any changes take place in /src.

Minification and Validation Both are automated via npm command. Run npm install to install the required dependencies, then run npm run build from the root of the project to handle the tasks.

License

ISC