This datepicker is a fully customisable Vue(v2.1.6) version of the material-ui datepicker that fit all your projects.
See below to discover all customisable components.
Please give me some feedbacks to improve it !
If you have some issues or if you want to contribute, feel free to email me to !
email : [email protected]
$ npm install vue-datepickerimport Vue from 'vue';
import Datepicker from 'vue-material-datepicker';
new Vue({
el: 'body',
components: { datepicker: Datepicker }
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>datepicker</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<datepicker></datepicker>
</body>
</html>Date's format written in the text input
type : String
required : false
default : "YYYY-MM-DD"
e.g :
<datepicker format="DD/MM/YYYY"></datepicker>result:
The project's language
type : String
required : false
default : "en"
supported languages:
"da" Danish
"nl" Dutch
"de" German
"es" Spanish
"fi" Finnish
"fr" French
"fr-ca" French(Canada)
"fr-ch" French(Switzerland)
"hu" Hugarian
"it" Italian
"lb" Luxembourgish
"nb" Norvegian
"pl" Polish
"pt" Portuguese
"pt-br" Portuguese(Brazil)
"ro" Romanian
"ru" Russian
"sk" Slovak
"sl" Slovenian
"sv" Swedish
"uk" Ukranian
Traductions were made base on Google Translate... Feel free to email me if there are some mistakes or if your language is not supported yet.
e.g :
<datepicker lang="fr"></datepicker>result :
Boolean to disable passed days
type : Boolean
required : false
default : false
e.g :
<datepicker :disable-passed-days="true"></datepicker>result :
Array of moment or date to disable.
Date format must be YYYY-MM-DDor YYYY-MM-D
type : Array
required : false
default : []
e.g :
<datepicker :disabled-days="arrayOfDisabledDays"></datepicker>new Vue({
el: 'body',
components: { datepicker: Datepicker },
data() {
return {
arrayOfDisabledDays: []
}
},
ready() {
for (let i=0; i<31; i++) {
var tmp = moment().add(i, 'days');
if (i%2) this.arrayOfDisabledDays.push(tmp);
}
}
}); result:
Field's name attribute
type : String
required : false
default : "datepicker"
e.g :
<datepicker name="event_date"></datepickerField's id attribute
type: String
required: false
default: "vue-datepicker"
e.g :
<datepicker id="my-datepicker"></datepicker>To bind style to datepicker's input you can pass a css class as in the exemple below.
type: String
required: false
default: ""
e.g:
.input-style {
display: block;
padding: 5px;
font-size: 16px;
line-height: 16px;
background-color: #ffffff;
border: 1px solid #B7B7B7;
border-radius: 4px;
}<datepicker class-design="input-style"></datepicker>result :
As shown before, this datepicker can be Protrait or Landscape
type: String
required: false
default: "portrait"
supported orientation:
"portrait"
"landscape"
e.g :
<datepicker orientation="landscape"></datepicker>result :
Color customisation si not supported yet. But you can overwrite css classes as below :
$primary-color: #3F51B5;
$secondary-color: #FFFFFF;
.datepicker-header {
background-color: $primary-color !important;
}
.datepicker-day-effect {
background-color: lighten($primary-color, 5%) !important;
}
.datepicker-day {
&:hover {
color: $secondary-color !important;
}
&.selected {
color: $secondary-color !important;
}
}
.datepicker-date, .datepicker-year {
color: $secondary-color !important;
}
.datepicker-actions {
button {
color: lighten($primary-color, 10%) !important;
&:hover {
background-color: darken($secondary-color, 5%) !important;
}
}
}
.datepicker-years {
.datepicker-years-content {
.datepicker-year {
&.selected, &:hover {
color: $primary-color !important;
}
}
}
}result :
- responsive
- color customi<ation
- date range