https://github.com/CYBAI/vue-mdl-datepicker

Material Design Datepicker for Vue.js
https://github.com/CYBAI/vue-mdl-datepicker

datepicker material vue

Last synced: 3 months ago
JSON representation

Material Design Datepicker for Vue.js

• Host: GitHub
• URL: https://github.com/CYBAI/vue-mdl-datepicker
• Owner: CYBAI
• License: mit
• Created: 2016-11-26T07:30:32.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-07-10T08:39:00.000Z (over 6 years ago)
• Last Synced: 2024-04-29T22:07:53.395Z (6 months ago)
• Topics: datepicker, material, vue
• Language: Vue
• Size: 120 KB
• Stars: 7
• Watchers: 5
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-material-design - vue-mdl-datepicker - Material Date picker for Vue (Vue / Components)

README

        
# vue-mdl-datepicker

[![Build Status](http://img.shields.io/travis/CYBAI/vue-mdl-datepicker.svg?style=flat-square)](https://travis-ci.org/CYBAI/vue-mdl-datepicker)

[![NPM Version](https://img.shields.io/npm/v/vue-mdl-datepicker.svg?style=flat-square)](https://www.npmjs.com/package/vue-mdl-datepicker)

> Material Design Datepicker for Vue.js

## Install

```sh

# via yarn

yarn add vue-mdl-datepicker

# or via npm

npm install --save vue-mdl-datepicker

```

## Usage

```vue

  
{{date}}

  


import 'vue-mdl-datepicker/dist/vue-mdl-datepicker.css';

import MdlDatepicker from 'vue-mdl-datepicker';

export default {

  name: 'MyComponent',

  components: { MdlDatepicker },

  data() {

    return {

      date: new Date(),

    };

  },

};

```

## Props

|         Name         |    Type    |      Default     |                       Description                     |

|----------------------|------------|------------------|-------------------------------------------------------|

|    firstDayOfWeek    |  `Number`  |         0        |  The fist day of the week, where 0 represents Sunday. |

|        default       |   `Date`   |                  |  Default selected date                                |

|         autoOk       |  `Boolean` |       false      |  If true, automatically ok and close datepicker       |

| disableYearSelection |  `Boolean` |       false      |  If true, year selection will be disabled             |

|        maxDate       |   `Date`   |  date + 100 year |  Maximum selected date                                |

|        minDate       |   `Date`   |  date - 100 year |  Minimum selected date                                |

|   shouldDisableDate  | `Function` |                  |  Function return those days should be disabled        |

|      formatDate      | `Function` |     YYYY-MM-dd   |  Function return format of displayed date             |

|      orientation     |  `String`  |    `portrait`    |  Orientation of datepicker, `portrait` or `landscape` |

### TODO

- [ ] Transitions

# LICENSE

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2016 CYBAI