Dropdown Date & Date Range Picker For Vue

Description:

A minimal clean date picker component where the users are able to select a date and date range from associated dropdowns.

Install & Download:

# Yarn
$ yarn add vue-dropdown-datepicker

# NPM
$ npm install vue-dropdown-datepicker --save

How to use it:

1. Install and import the component.

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

2. Register the component.

new Vue({
    el: '#app',
    components: {
        DropdownDatepicker
    },
    data:{},
    methods: {
        //your method codes here
    }
});

3. Create a basic date picker.

<dropdown-datepicker></dropdown-datepicker>

4. Create a basic 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}

Download Details:

Author: tanvir0604

Live Demo: https://tanvir0604.github.io/vue-dropdown-datepicker/

Download Link: https://github.com/tanvir0604/vue-dropdown-datepicker/archive/master.zip

Official Website: https://github.com/tanvir0604/vue-dropdown-datepicker

#vuejs #javascript #vue-js