GithubHelp home page GithubHelp logo

vue-material-datepicker's Introduction

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

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

vue-material-datepicker's People

Contributors

bastiengranger avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

vue-material-datepicker's Issues

Not able to make it work

[Vue warn]: Failed to mount component: template or render function not defined.
(found in )

I am using vue-material and I have done following

npm install --save vue-material-datepicker

i the bootstrap file

import Datepicker from 'vue-material-datepicker'

Vue.component('datepicker', Datepicker)

Emit events and/or attach functions

Hello! Good morning.

Would be a great feature (and great help) if you could attach events on this bad boy. Events like: selected day, selected month, selected year, etc.

It would be nicer if you could add a prop that is a function thats called once you select a date and another one when a date is fully selected.

If that's impossible or you don't have time for doing it right now, I can fork it and add those features for you.

Failed to mount component

I'm getting this error when I have properly imported the package

import Datepicker from 'vue-material-datepicker'

export default {
    components: {
       'datepicker': Datepicker
    }
}

[Vue warn]: Failed to mount component: template or render function not defined.
(found in component )

still valid with vue

I'm getting:

vue.runtime.esm.js?a427:563 [Vue warn]: Failed to mount component: template or render function not defined. 
(found in <Datepicker>)

here's my package.json dependencies:

  "dependencies": {
    "@websanova/vue-auth": "^2.8.2-beta",
    "axios": "^0.15.3",
    "vee-validate": "^2.0.0-beta.25",
    "vue": "^2.1.10",
    "vue-axios": "^2.0.1",
    "vue-material-datepicker": "^2.0.1",
    "vue-router": "^2.2.0",
    "vue-server-renderer": "^2.1.10",
    "vuetify": "^0.8.9",
    "vuex": "^2.1.2",
    "vuex-router-sync": "^4.1.2"
  },

and I mount it with:

<template>
  <!-- stufff and: -->
  <div name="dob"><datepicker orientation="landscape" /></div>
</template>
<script>
import Datepicker from 'vue-material-datepicker'

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

export default {
  props: ['crud', 'id'],
  components: { datepicker: Datepicker },

ps> I tried aliasing in vue: 'vue/dist/vue.js' in my webpack config and it is still breaking

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.