npm package: @heumlabs/vue-datepicker
Description: [![npm version](https://badge.fury.io/js/%40heumlabs%2Fvue-datepicker.svg)](https://badge.fury.io/js/%40heumlabs%2Fvue-datepicker)
Latest version: 0.1.0

# Heumlabs Vue Datepicker

[![npm version](https://badge.fury.io/js/%40heumlabs%2Fvue-datepicker.svg)](https://badge.fury.io/js/%40heumlabs%2Fvue-datepicker)


<p align="center">
      <img alt="Heumlabs Vue Datepicker" width="100" src="https://github.com/heumlabs/heum-vue-datepicker/blob/main/docs/logo.svg?raw=true">
    <br><br>
    A Datepicker component for Vue 3
</p>

### Install via npm

```
npm install @heumlabs/vue-datepicker
```


## Usage

![Usage](https://github.com/heumlabs/heum-vue-datepicker/blob/main/docs/usage.png?raw=true)

```vue
<script lang="ts" setup>
  import { DatePicker } from '@heumlabs/vue-datepicker';
  import '@heumlabs/vue-datepicker/dist/style.css';
  
  // all date will be converted to start of the day (ex. '1995-12-17T00:00:00')
  const startDate = new Date('1995-12-17T03:24:00');
  const endDate = new Date('1995-12-23T03:24:00');
  
  const disableDatesAfter = new Date('1995-12-26T18:24:00');
  
  const customCurrentDate = new Date('1995-12-25T13:07:00');
  
  const onSelect = (dateString: string) => {
    console.log(dateString) // '2023-01-01'
  }
</script>

<template>
  <div>
    <DatePicker
      :year="2023"
      :month-index="0"
      :start-date="startDate"
      :end-date="endDate"
      :current-date="customCurrentDate"
      :disable-dates-after="disableDatesAfter"
      @select="onSelect"
    />
  </div>
</template>
```

## API
### DatePicker
#### Props
| Name               | Description                                               | Type      | Required | Default                                       |
|--------------------|-----------------------------------------------------------|-----------|----------|-----------------------------------------------|
| year               | year to show                                              | `number`  | yes      |                                               |
| monthIndex         | month to show (0 ~ 11)                                    | `number`  | yes      |                                               |
| headerFormat       | header text format                                        | `string`  | no       | `'YYYY.M'               `                     |
| dayLabels          | day labels start from sunday                              | `string[]`| no       | `['Sun','Mon','Tue','Wed','Thu','Fri','Sat']` |
| todayLabel         | text shown below today                                    | `string`  | no       | `'Today'`                                     |
| startDate          | start date for select range                               | `Date`    | no       |                                               |
| endDate            | end date for select range                                 | `Date`    | no       |                                               |
| selectedDates      | dates to show selected                                    | `Date[]`  | no       | `[]`                                          |
| currentDate        | to customize current date to show today on different date | `Date`    | no       | `new Date()`                                  |
| disableDatesAfter  | show dates disabled after disableDatesAfter               | `Date`    | no       |                                               |
| disableDatesBefore | show dates disabled before disableDatesBefore             | `Date`    | no       |                                               |

#### Events
| Name   | Description                                       | Parameters                        |
|--------|---------------------------------------------------|-----------------------------------|
| select | date click event. dateString format: 'YYYY-MM-DD' | dateString:  string, event: Event |

### DateInput
#### Props
| Name               | Description                                                                           | Type      | Required | Default     |
|--------------------|---------------------------------------------------------------------------------------|-----------|----------|-------------|
| label              | input label text                                                                      | `string`  | yes      |             |
| value              | formatted date string ('YYYY-MM-DD') or empty string if input string value is invalid | `string`  | yes      |             |
| disableDatesAfter  | property for validation                                                               | `Date`    | no       |             |
| disableDatesBefore | property for validation                                                               | `Date`    | no       |             |

#### Events
| Name   | Description                                       | Parameters                        |
|--------|---------------------------------------------------|-----------------------------------|
| input  | date input event. dateString format: 'YYYY-MM-DD' | dateString: string                |
| focus  | input focus event.                                | event: Event                      |
| blur   | input blur event.                                 | event: Event                      |

## Changelog

All notable changes to this project will be documented in the [Releases Page](https://github.com/heumlabs/heum-vue-datepicker/releases).

## License

The [MIT](LICENSE) License. Please [see](http://opensource.org/licenses/MIT) for more information.

## Thanks to
- [Sukyeong Hong](https://sueh712.myportfolio.com)(sukyeongh83@gmail.com) for the design