Datepicker component for Vue.js
DatePicker helps to display calendar so that you could pick date on input box. In this post I am going to share simple Datepicker component for Vue.js Which allow your input box to display datepicker and user can easily pick date.
Installation
npm install vue-date –save
Usage
use with single .vue
file:
<template>
<div>
<datepicker v-model="date"></datepicker>
</div>
</template>
<script>
import datepicker from 'vue-date'
export default {
data() {
return {
date: '2016-10-16'
}
},
components: { datepicker }
}
</script>
use in browser:
//index.html
<html>
<script src="path/to/vue.js"></script>
<script src="path/to/index.js"></script>
<body>
<div id="app">
<datepicker v-model="date"></datepicker>
</div>
<script>
new Vue({
el: '#app',
data: {
date: '2016-10-16'
},
components: { datepicker }
})
</script>
</body>
</html>
Props
language
Type: String
Default: en
Optional: en(English)
, zh-cn(Chinese)
, uk(Ukrainsk)
, es(Spanish)
The language type. Support en
(English), zh-cn
(Chinese), uk
(Ukrainsk) and es
(Spanish) now.
min
Type: String
Default: 1970-01-01
The minimum date.
//pass string
<datepicker v-model="start" min="2015-01-01"</datepicker>
//or pass variable
<datepicker v-model="start" :min="variable"></datepicker>
max
Type: String
Default: 3016-01-01
The maximum date. Usage is same of min
.
range
Type: Boolean
Default: false
Use range mode or not. If pass true
, the binding value should be an Array containg the range start and range end. eg. ['1970-01-01', '3016-01-01']
See live demo and download source code.
DEMO | DOWNLOAD
This awesome script developed by showonne, Visit their official github repository for more information and follow for future updates.