vue-material-datepicker

#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 : grangerbastien@gmail.com

#Demo
##Simple portrait
!simple datepicker

!Change Years

##Doubled portrait
!doubled datepicker

!change year doubled

##Simple landscape
!simple landscape
!simple years landscape

##Doubled landscape
!doubled landscape
!doubled years landscape

#Installation

npm

``shell
$ npm install vue-datepicker
`

#Requirements
moment^2.14.1

#Usage

`javascript
import Vue from 'vue';
import Datepicker from 'vue-material-datepicker';

new Vue({
el: 'body',
components: { datepicker: Datepicker }
});
`


`html










`

#API
##format
Date's format written in the text input

!date input

type : String
required : false
default : "YYYY-MM-DD"

e.g :
`html

`

result:
!date format 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 :
`html

`

result :
!lang result

##disablePassedDays
Boolean to disable passed days

type : Boolean
required : false
default : false

e.g :
`html

`

result :
!disabledPassedDays

##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 :
`html

`

`javascript
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:
!disabledDays


##name
Field's name attribute

type : String
required : false
default : "datepicker"

e.g :
`html
`

##id
Field's id attribute

type: String
required: false
default: "vue-datepicker"

e.g :
`html

`

##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:
`css
.input-style {
display: block;
padding: 5px;
font-size: 16px;
line-height: 16px;
background-color: #ffffff;
border: 1px solid #B7B7B7;
border-radius: 4px;
}
`


`html

`

result :
!input style

##Orientation
As shown before, this datepicker can be Protrait or Landscape

type: String
required: false
default: "portrait"

supported orientation:
"portrait"
"landscape"

e.g:
`html

`

result:
!datepicker landscape exemple

##Color customisation.
Color customisation si not supported yet. But you can overwrite css classes as below :

`sass
$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 :
!color customisation

#Next steps
- responsive
- color customisation
- date range