Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-dropdown-datepicker with all npm packages installed. Try it out:

var vueDropdownDatepicker = require("vue-dropdown-datepicker")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-dropdown-datepicker v1.3.1

A simple and customizable dropdown datepicker vue component

Vue 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

OptionTypeDefultComment
defaultDatestringnull
defaultDateFormatstring'yyyy-mm-dd'
displayFormatstring'dmy'
submitFormatstring'yyyy-mm-dd'
submitIdstringnull
minAgeintnull
maxAgeintnull
minYearintnull
maxYearintnull
minDatestringnullyyyy-mm-dd
maxDatestringnullyyyy-mm-dd
allowPastbooleantrue
allowFuturebooleantrue
wrapperClassstring'date-dropdowns'
dropdownClassstringnull
daySuffixesbooleantrue
monthSuffixesbooleantrue
monthFormatstring'long'
requiredbooleanfalse
dayLabelstring'Day
monthLabelstring'Month'
yearLabelstring'Year'
sortYearstring'desc'
monthLongValuesarray['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
monthShortValuesarray['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
initialDayMonthYearValuesarray['Day', 'Month', 'Year']
daySuffixValuesarray['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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free