A fully customisable Vue version of the material-ui datepicker

by Vue.js Examples

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

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

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

Next steps

  • responsive
  • color customi<ation
  • date range

GitHub

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