vue-material-datepicker
v2.0.1
Published
vue datepicker with a material-ui design
Downloads
32
Readme
#vue-material-datepicker 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.
#Contact 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]
#Demo
##Simple portrait
##Doubled portrait
##Simple landscape
##Doubled landscape
#Installation
npm
$ npm install vue-datepicker#Requirements moment^2.14.1
#Usage
import 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>#API ##format 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:
##lang 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" Ukrenian
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 :
##disablePassedDays Boolean to disable passed days
type : Boolean
required : false
default : false
e.g :
<datepicker :disable-passed-days="true"></datepicker>result :
##disabledDays
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:
##name Field's name attribute
type : String
required : false
default : "datepicker"
e.g :
<datepicker name="event_date"></datepicker##id Field's id attribute
type: String
required: false
default: "vue-datepicker"
e.g :
<datepicker id="my-datepicker"></datepicker>##class-design 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 :
##Orientation 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. 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 :
#Next steps
- responsive
- color customisation
- date range