https://github.com/piskula/vuejs-simple-datepicker

DatePicker for Vue
https://github.com/piskula/vuejs-simple-datepicker

calendar datepicker dropdown mousewheel scrolling vue vue2 vuejs2

Last synced: 2 days ago
JSON representation

DatePicker for Vue

• Host: GitHub
• URL: https://github.com/piskula/vuejs-simple-datepicker
• Owner: piskula
• License: mit
• Created: 2017-10-04T10:54:46.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2017-10-09T08:25:46.000Z (almost 7 years ago)
• Last Synced: 2024-09-21T10:06:09.156Z (7 days ago)
• Topics: calendar, datepicker, dropdown, mousewheel, scrolling, vue, vue2, vuejs2
• Language: Vue
• Size: 73.2 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vuejs-simple-datepicker

![npm](https://img.shields.io/npm/dm/vuejs-simple-datepicker.svg)

![npm](https://img.shields.io/npm/v/vuejs-simple-datepicker.svg)

![npm](https://img.shields.io/npm/l/vuejs-simple-datepicker.svg)

Simple and EasyToUse **Datepicker** for every application based on [Vue](https://github.com/vuejs/vue/).

This datepicker supports changing months by mouse scroll.

![alt text](example/date01.png)

![alt text](example/date02.png)

![alt text](example/date03.png)

![alt text](example/date04.png)

### How to install

Here is very simple example how to use datepicker:

1. add dependency on `vuejs-simple-datepicker` to your *package.json*

2. run `npm i`

3. in your Vue component *import datepicker* and *register component*:

```javascript

    import myDatepicker from 'vuejs-simple-datepicker'

    export default {

        components: { 'date-picker': myDatepicker },

        data () {

            return {

                date: null

            }

        },

    }

```

4. in your template use your datepicker:

```HTML

```

### Full Simple Example

```Vue

    


        


            

        

        


            Date: {{date ? date.toLocaleString() : 'null'}}

        

        Delete

    


    import myDatepicker from 'vuejs-simple-datepicker'

    const DATE_FORMAT = 'D.M.YYYY'

    export default {

        components: { 'date-picker': myDatepicker },

        data () {

            return {

                date: null,

                DATE_FORMAT: DATE_FORMAT

            }

        },

        methods: {

            remove () {

                this.date = null

            }

        }

    }

```