Skip to content
This repository has been archived by the owner on Jun 4, 2024. It is now read-only.

Fix Readme.md #9

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 21 additions & 21 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
#vue-material-datepicker
# vue-material-datepicker
This datepicker is a fully customisable Vue(v2.1.6) version of the [material-ui datepicker](http://www.material-ui.com/#/components/date-picker) that fit all your projects.

See below to discover all customisable components.

#Contact
# 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](https://s3-eu-west-1.amazonaws.com/npm-images/vue-material-datepicker/simple-version.png)
# Demo
## Simple portrait
[simple datepicker](https://s3-eu-west-1.amazonaws.com/npm-images/vue-material-datepicker/simple-version.png)

![Change Years](https://s3-eu-west-1.amazonaws.com/npm-images/vue-material-datepicker/change-years.png)
[Change Years](https://s3-eu-west-1.amazonaws.com/npm-images/vue-material-datepicker/change-years.png)

##Doubled portrait
![doubled datepicker](https://s3-eu-west-1.amazonaws.com/npm-images/vue-material-datepicker/doubled-version.png)
## Doubled portrait
[doubled datepicker](https://s3-eu-west-1.amazonaws.com/npm-images/vue-material-datepicker/doubled-version.png)

![change year doubled](https://s3-eu-west-1.amazonaws.com/npm-images/vue-material-datepicker/change-year-doubled.png)
[change year doubled](https://s3-eu-west-1.amazonaws.com/npm-images/vue-material-datepicker/change-year-doubled.png)

##Simple landscape
## Simple landscape
![simple landscape](https://s3-eu-west-1.amazonaws.com/npm-images/vue-material-datepicker/landscape-simple.png)
![simple years landscape](https://s3-eu-west-1.amazonaws.com/npm-images/vue-material-datepicker/landscape-simple-years.png)

Expand All @@ -30,18 +30,18 @@ email : [email protected]
![doubled years landscape](https://s3-eu-west-1.amazonaws.com/npm-images/vue-material-datepicker/landscape-double-years.png)


#Installation
# Installation

## npm

```shell
$ npm install vue-datepicker
```

#Requirements
# Requirements
[moment^2.14.1](http://momentjs.com/)

#Usage
# Usage

```javascript
import Vue from 'vue';
Expand Down Expand Up @@ -136,7 +136,7 @@ e.g :
result :
![lang result](https://s3-eu-west-1.amazonaws.com/npm-images/vue-material-datepicker/lang-result.png)

##disablePassedDays
## disablePassedDays
Boolean to disable passed days

type : `Boolean`
Expand All @@ -151,7 +151,7 @@ e.g :
result :
![disabledPassedDays](https://s3-eu-west-1.amazonaws.com/npm-images/vue-material-datepicker/disabled-passed-days.png)

##disabledDays
## disabledDays
Array of [moment](http://momentjs.com/) or date to disable.
Date format must be `YYYY-MM-DD`or `YYYY-MM-D`

Expand Down Expand Up @@ -186,7 +186,7 @@ result:
![disabledDays](https://s3-eu-west-1.amazonaws.com/npm-images/vue-material-datepicker/disabled-days.png)


##name
## name
Field's name attribute

type : `String`
Expand All @@ -198,7 +198,7 @@ e.g :
<datepicker name="event_date"></datepicker
```

##id
## id
Field's id attribute

type: `String`
Expand All @@ -210,7 +210,7 @@ e.g :
<datepicker id="my-datepicker"></datepicker>
```

##class-design
## class-design
To bind style to datepicker's input you can pass a css class as in the exemple below.

type: `String`
Expand Down Expand Up @@ -238,7 +238,7 @@ e.g:
result :
![input style](https://s3-eu-west-1.amazonaws.com/npm-images/vue-material-datepicker/input-style.png)

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

type: `String`
Expand All @@ -257,7 +257,7 @@ e.g:
result:
![datepicker landscape exemple](https://s3-eu-west-1.amazonaws.com/npm-images/vue-material-datepicker/landscape-simple.png)

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

```sass
Expand Down Expand Up @@ -309,7 +309,7 @@ $secondary-color: #FFFFFF;
result :
![color customisation](https://s3-eu-west-1.amazonaws.com/npm-images/vue-material-datepicker/color-customisation.png)

#Next steps
# Next steps
- responsive
- color customisation
- date range
Expand Down