svelma-pro

默认与暗黑主题

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

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

范围选择与自由选择

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

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

获取结果

<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`	—	选定事件