vue-klender

0.4.0 • Public • Published

vue-klender

Yet another date picker for vuejs. Currently still using CSS Grid for layout so that it won't work in browser without that feature. This component is still a work in progress so that it might not suit your use case. See to do section for planned features.

Installation

npm install --save vue-klender

Usage

Import and register in script.

<script>
import DatePicker from 'vue-klender'
 
export default {
    ...
    components: {
        DatePicker
    },
    ...
}
</script>

Then use it in template.

<template>
    <div id="app">
        <date-picker @change-selected-dates="onChangeSelectedDates" />
        // ...
    </div>
</template>

Everytime a date is clicked, it will emit change-selected-dates event with string of selected dates in an array. Selected dates are in YYYY-MM-DD format. In example above, we call onChangeSelectedDates method every time change-selected-dates event occurred.

export default {
    ...
    methods: {
        onChangeSelectedDates (dates) {
            this.dates = dates
        }
    }
    ...
}

You can use min-date and max-date to limit choosable time range. Use YYYY-MM-DD format. It defaults to today for min-date and a year from now for max-date.

<date-picker
    min-date="2019-09-01"
    max-date="2019-12-31"
    @change-selected-dates="onChangeSelectedDates"
/>

Samples

Run npm run serve to run app in example folder.

To Do

  • Return selected dates to parent component.
  • Can set minimal and maximal selectable dates. Default to today and a year from now respectively.
  • Clearable.
  • Set initial selected dates.
  • Single date, multiple dates, or range of dates.
  • Array of selectable dates. For example: can only select July 20, July 27, and Aug 1.
  • Slide in and out animation when changing month.
  • Shows more than 1 month at once.
  • Show calendar in vertical instead of horizontal.
  • Configurable month name and date number format.
  • Configurable css styling (color, width, etc).
  • Show holidays.
  • Internationalization.
  • Add CI to build and publish.

Readme

Keywords

none

Package Sidebar

Install

npm i vue-klender

Weekly Downloads

1

Version

0.4.0

License

MIT

Unpacked Size

13.7 kB

Total Files

9

Last publish

Collaborators

  • rizaldim