Vue-just-datepicker NPM

#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 years landscape

##Doubled landscape doubled years landscape

#Installation

npm

$ npm install vue-just-datepicker

#Requirements moment^2.14.1

#Usage

import Vue from 'vue';
import Datepicker from 'vue-just-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 ##chooseDate.sync Get value into variable

<datepicker :chooseDate.sync="date"></datepicker>

##is-visible.sync Get visibility of component

<datepicker :is-visible.sync="datepickerVisible"></datepicker>

##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" 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 :
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 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 :
color customisation

#Next steps

responsive
color customisation
date range

vue babel-preset-es2015 moment moment-range

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago