import DropdownDatepicker from '../src/dropdown-datepicker.vue'; new Vue({ el: '#app', components: { DropdownDatepicker }, data:{}, methods: { //your method codes here } });
<dropdown-datepicker></dropdown-datepicker>
<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(); } } }
<dropdown-datepicker submit-id="example2" submit-format="dd/mm/yyyy"></dropdown-datepicker>
<dropdown-datepicker submit-id="example3" default-date="2010-02-17"></dropdown-datepicker>
<dropdown-datepicker submit-id="example4" v-bind:min-age="18"></dropdown-datepicker>
<dropdown-datepicker submit-id="example5" display-format="mdy"></dropdown-datepicker>
<dropdown-datepicker submit-id="example6" month-format="short"></dropdown-datepicker>
<dropdown-datepicker submit-id="example7" submit-format="unix" default-date-format="unix"></dropdown-datepicker>
<dropdown-datepicker submit-id="example8" submit-format="unix" default-date-format="unix" default-date="2148844553"></dropdown-datepicker>
<dropdown-datepicker submit-id="example9" submit-format="unix" default-date-format="unix" ></dropdown-datepicker>
<dropdown-datepicker submit-id="example10" v-bind:required="true"></dropdown-datepicker>
<dropdown-datepicker submit-id="example11" year-label="Anno" month-label="Mense" day-label="Die"></dropdown-datepicker>
{{ exampleModel }}
<dropdown-datepicker v-model="exampleModel"></dropdown-datepicker>