Dropdown Date & Date Range Picker For Vue

https://www.vuescript.com/dropdown-date-range-picker/

Dropdown Date & Date Range Picker For Vue - Vue Script

props 예)

Vue Dropdown Datepicker

 

 

 

Description:

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

 

사용법 1. 직접 vue파일을 만들어서 import 해서 사용

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}

 

vue-dropdown-datepicker-master.zip

0.06MB

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

---

사용법 2. main.js에서 전역등록후 바로 사용

npm install 설치

Yarn $ yarn add vue-dropdown-datepicker  
NPM $ npm install vue-dropdown-datepicker 

 

main.js

import DropdownDatepicker from 'vue-dropdown-datepicker'

Vue.use(DropdownDatepicker)

Vue.component("DropdownDatepicker", DropdownDatepicker);

 

사용할 vue안에서

<DropdownDatepicker></DropdownDatepicker>

이제 이렇게 

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

할 필요없이 바로 사용가능하다.