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.

ee 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

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

$ 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

date input

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

e.g :

<datepicker format="DD/MM/YYYY"></datepicker>

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" 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 :

lang result

disablePassedDays

Boolean to disable passed days

type : Boolean
required : false
default : false

e.g :

<datepicker :disable-passed-days="true"></datepicker>

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 :

<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:

disabledDays

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 :

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 :

<datepicker orientation="landscape"></datepicker>

result :

datepicker landscape exemple

Color customization.

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 :

color customization

Next steps

  • responsive
  • color customi<ation
  • date range

GitHub

https://github.com/bastienGranger/vue-material-datepicker