Vue Dropdown Datepicker

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

Plugin Defaults

<dropdown-datepicker></dropdown-datepicker>

Date Range


TO:

<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>
            data:{
                .....
                minDate: null,
                maxDate: null
            },
            methods: {
                ..........
                onChange(day, month, year){
                    var days = 100;
                    if(day != '' && month != '' && year != ''){
                        this.minDate = year+'-'+month+'-'+day;
                        this.minDate = new Date(this.minDate);
                        this.minDate.setDate(this.minDate.getDate());
                        this.minDate = this.minDate.getFullYear()+'-'+(this.minDate.getMonth()+1)+'-'+this.minDate.getDate();
                        this.maxDate = new Date(this.minDate);
                        this.maxDate.setDate(this.maxDate.getDate()+days);
                        this.maxDate = this.maxDate.getFullYear()+'-'+(this.maxDate.getMonth()+1)+'-'+this.maxDate.getDate();
                        this.$refs.to.minDateValue = this.minDate;
                        this.$refs.to.maxDateValue = this.maxDate;
                        this.$refs.to.init();
                    }
                }
            }

        

Submit Format

<dropdown-datepicker submit-id="example2" submit-format="dd/mm/yyyy"></dropdown-datepicker>

Default Date

<dropdown-datepicker submit-id="example3" default-date="2010-02-17"></dropdown-datepicker>

Min. Age 18 (Year)

<dropdown-datepicker submit-id="example4" v-bind:min-age="18"></dropdown-datepicker>

Alternative Display Format

<dropdown-datepicker submit-id="example5" display-format="mdy"></dropdown-datepicker>

Short Month Names

<dropdown-datepicker submit-id="example6" month-format="short"></dropdown-datepicker>

Unix

<dropdown-datepicker submit-id="example7" submit-format="unix" default-date-format="unix"></dropdown-datepicker>

Unix Default Date

<dropdown-datepicker submit-id="example8" submit-format="unix" default-date-format="unix" default-date="2148844553"></dropdown-datepicker>

Unix Input Default Date

<dropdown-datepicker submit-id="example9" submit-format="unix" default-date-format="unix" ></dropdown-datepicker>

Required

<dropdown-datepicker submit-id="example10" v-bind:required="true"></dropdown-datepicker>

Alternative Select Labels

<dropdown-datepicker submit-id="example11" year-label="Anno" month-label="Mense" day-label="Die"></dropdown-datepicker>

v-model support

{{ exampleModel }}

<dropdown-datepicker v-model="exampleModel"></dropdown-datepicker>