Press "Enter" to skip to content

Simple and Customizable Dropdown Datepicker Vue Component

Vue Dropdown Picker is a minimal clean date picker component where users can select a date and date range from linked dropdown lists.

daterangepicker set start and end date, single calendar date range picker, date range picker two inputs, date range picker javascript, daterangepicker clear selected date

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-dropdown-datepicker

$ npm install vue-dropdown-datepicker --save

1. Install and import the component.

import DropdownDatepicker from './src/dropdown-datepicker.vue';

2. Register the component.

new Vue({
    el: '#app',
    components: {
    methods: {
        //your method codes here

3. Create a basic date picker.


4. Create the base date range picker.

<dropdown-datepicker submit-id="from" v-bind:on-change="onChange" v-bind:min-date="minDate"></dropdown-datepicker>
<dropdown-datepicker submit-id="to" ref="to"></dropdown-datepicker>

5. Default props.

defaultDate: {type: String, default: null},
defaultDateFormat: {type: String, default:'yyyy-mm-dd'},
displayFormat: {type: String, default:'ymd'},
submitId: {type: String, default: ''},
submitFormat: {type: String, default:'yyyy-mm-dd'},
minAge: {type: Number, default:null},
maxAge: {type: Number, default:null},
minYear: {type: Number, default:null},
maxYear: {type: Number, default:null},
minDate: {type: String, default:null},
maxDate: {type: String, default:null},
allowPast: {type: Boolean, default:true},
allowFuture: {type: Boolean, default:true},
wrapperClass: {type: String, default:'date-dropdowns'},
dropdownClass: {type: String, default:null},
daySuffixes: {type: Boolean, default:true},
monthSuffixes: {type: Boolean, default:true},
monthFormat: {type: String, default:'long'},
required: {type: Boolean, default:false},
dayLabel: {type: String, default:'Day'},
monthLabel: {type: String, default:'Month'},
yearLabel: {type: String, default:'Year'},
sortYear: {type: String, default: 'desc'},
monthLongValues: {type: Array, default: () => ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']},
monthShortValues: {type: Array, default: () => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']},
initialDayMonthYearValues: {type: Array, default: () => ['Day', 'Month', 'Year']},
daySuffixValues: {type: Array, default: () => ['st', 'nd', 'rd', 'th']},
onDayChange: {type: Function, default:null},
onMonthChange: {type: Function, default:null},
onYearChange: {type: Function, default:null},
onChange: {type: Function, default: null},
value: {type: String, default:null}

Dropdown Date & Date Range Picker, Vue Dropdown Datepicker Plugin/Github

See Demo And Download

Official Website(tanvir0604): Click Here

This superior jQuery/javascript plugin is developed by tanvir0604. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.