# vue-datepicker-persian

> A Persian Datepicker Component For Vue2

## Demo

![image](https://github.com/MostafaTech/vue-datepicker-persian/raw/master/screenshot/demo.PNG)

## Install

```bash
$ npm install vue-datepicker-persian --save
```

## Usage

```html
<script>
import DatePicker from 'vue-datepicker-persian'

export default {
  components: { DatePicker },
  data() {
    return {
      time1: '',
      time2: '',
      time3: '',
      shortcuts: [
        {
          text: 'Today',
          onClick: () => {
            this.time3 = [ new Date(), new Date() ]
          }
        }
      ],
      timePickerOptions:{
        start: '00:00',
        step: '00:30',
        end: '23:30'
      }
    }
  }
}
</script>

<template>
  <div>
    <date-picker v-model="time1" :first-day-of-week="1"></date-picker>
    <date-picker v-model="time2" type="datetime" :time-picker-options="timePickerOptions"></date-picker>
    <date-picker v-model="time3" range :shortcuts="shortcuts"></date-picker>
  </div>
</template>
```
### Props

| Prop                | Type          | Default     | Description                                         |
|---------------------|---------------|-------------|-----------------------------------------------------|
| type                | String        | 'date'      | select date type (date/datetime/year/month/time)    |
| range               | Boolean       | false       | if true, the type is daterange or datetimerange     |
| format              | String        | YYYY/MM/DD  | The parsing tokens are similar to the moment.js     |
| lang                | String/Object | fa          | Translation (fa)(custom) |
| clearable           | Boolean       | true        | if false, don't show the clear icon                 |
| confirm             | Boolean       | false       | if true, need click the button to change the value  |
| editable            | Boolean       | true        | if false, user cann't type it                       |
| disabled            | Boolean       | false       | Disable the component                               |
| placeholder         | String        |             | input placeholder text                              |
| width               | String/Number | 210         | input size                                          |
| not-before          | String/Date   | ''          | Disable all dates before new Date(not-before)       |
| not-after           | String/Date   | ''          | Disable all dates after new Date(not-after)         |
| disabled-days       | Array/function| []          | Disable Days                                        |
| shortcuts           | Boolean/Array | true        | the shortcuts for the range picker                  |
| time-picker-options | Object        | {}          | set timePickerOptions(start, step, end)             |
| minute-step         | Number        | 0           | if > 0 don't show the second picker(0 - 60)         |
| first-day-of-week   | Number        | 7           | set the first day of week (1-7)                     |
| input-class         | String        | 'mx-input'  | the input class name                                |
| input-name          | String        | 'date'      | the input name attr                                 |
| confirm-text        | String        | 'OK'        | the default text to display on confirm button       |
| range-separator     | String        | '~'         | the range separator text                            |
| date-format         | String        | ''          | format the time header and tooltip                  |


#### shortcuts
* true -      show the default shortcuts
* false -     hide the shortcuts
* Object[] -  custom shortcuts, [{text, start, end}]
* Object[] -  custom shortcuts, [{text, onClick}]

| Prop            | Type          |  Description           |
|-----------------|---------------|------------------------|
| text            | String        | Text                   |
| start           | Date          | Start Date             |
| end             | Date          | End Date               |
| onClick         | Function      | click handler          |

#### time-picker-options
* Object[] -  custom time-picker, [{start, step, end}]

| Prop            | Type          |  Description           |
|-----------------|---------------|------------------------|
| start           | String        | startTime (eg '00:00') |
| step            | String        | stepTime  (eg '00:30') |
| end             | String        | endTime   (eg '23:30') |


### Events
| Name            | Description                  |  Callback Arguments    |
|-----------------|------------------------------|------------------------|
| change          | When the value change        | the currentValue       |
| input           | When the value change        | the currentValue       |
| confirm         | When click 'OK' button       | the currentValue       |
| clear           | When click 'clear' button    |                        |
| input-error     | When user type a invalid Date| the input text         |


### Slots

| Name            | Description              |
|-----------------|--------------------------|     
| calendar-icon   | custom the calender icon |
| header          | popup header             |
| footer          | popup footer             |


### Thanks

This component is a forked branch of mengxiong10's [vue2-datepicker](https://github.com/mengxiong10/vue2-datepicker) datepicker component

## License

[MIT](https://github.com/mostafatech/vue-datepicker-persian/blob/master/LICENSE)

Copyright (c) 2017-present MostafaTech