# svelma-pro
日期选择器

# Datepicker

## 日期选择器

默认与暗黑主题

Codesandbox

    <script>
      import {Datepicker} from 'svelma-pro'
    </script>

    <Datepicker/>
    <Datepicker theme="dark"/>

范围选择与自由选择

Codesandbox

    <script>
      import {Datepicker} from 'svelma-pro'
    </script>

    <Datepicker pickerRule="freeChoice"/>
    <Datepicker pickerRule="rangeChoice"/>

获取结果

Codesandbox

    <script>
      import Datepicker from 'svelma-pro'

      function click(e){
        alert(e.detail.timeStamp)
      }
    </script>

    <Datepicker on:dateChecked={click}/>

## API

Name | Description | Type | Values | Default
--- | --- | --- | --- | ---
`date` | 当前日期 | timestamp | — | ``
`i18n` | 多语言 | String | 'EN'、'ZH' | `'ZH'`
`theme` | 主题 | String | 'light'、'dark' | `'light'`
`markDate` | 标记的日期集合 | Array | ['2020-3-1','2020-3-2','2020-3-3'...] | ``
`disableDateRule` | 禁用规则。'piecemeal'表示零碎的，不连续的；'range'表示为一个范围。 | String | 'piecemeal'、'range' | ``
`disableDate` | 当disableDateRule为piecemeal时，格式为['2020-3-1','2020-3-2'...] 当disableDateRule为range时，格式为[{start:'2019-3-27'},{end:'2020-3-27'}] | Array, Object | ['2020-3-1','2020-3-2'...] or [{start:'2019-3-27'},{end:'2020-3-27'}] | ``
`pickerRule` | 选取规则：singleChoice（单选）、freeChoice（自由选择）、rangeChoice(范围选择) | String | 'singleChoice'、'freeChoice'、'rangeChoice' | `'singleChoice'`
`pickerResult` | 选取结果，请与外部变量绑定来获取结果值 |  | — | `''`
`calendar` | 日历模式 | Boolean | — | `false`
`width` | 宽度 | Sting | px,%,rem | `300px`
`align` | 位置 | Sting | 'left'、'center'、'right' | `left`
`icon` | 图标 | Boolean | — | `true`
`inputClass` | 输入框样式类 | String | — | ``

## EVENT

Name | Parameters | Description
--- | --- | ---
`dateChecked` | — | 选定事件