@wu-component/wu-date-picker

DatePicker 日期选择器

用于选择或输入日期

日期选择器

::: demo

<template>
    <div style="display: flex; align-items: center;justify-content: space-evenly;padding: 16px">
        <wu-plus-date-picker id="timePicker" type="date"></wu-plus-date-picker>
    </div>
</template>
<script>
</script>

:::

周选择器

::: demo

<template>
    <div style="display: flex; align-items: center;justify-content: space-evenly;padding: 16px">
        <wu-plus-date-picker id="timePickerWeek" default="['2020-06-21', '2022-06-27']" type="week"></wu-plus-date-picker>
    </div>
</template>
<script>
</script>

:::

周数选择器

::: demo

<template>
    <div style="display: flex; align-items: center;justify-content: space-evenly;padding: 16px">
        <wu-plus-date-picker id="timePickerWeekNum" type="weeknum"></wu-plus-date-picker>
    </div>
</template>
<script>
</script>

:::

月选择器

::: demo

<template>
    <div style="display: flex; align-items: center;justify-content: space-evenly;padding: 16px">
        <wu-plus-date-picker id="timePickerMonth" type="month"></wu-plus-date-picker>
    </div>
</template>
<script>
</script>

:::

年选择器

::: demo

<template>
    <div style="display: flex; align-items: center;justify-content: space-evenly;padding: 16px">
        <wu-plus-date-picker id="timePickerYear" type="year"></wu-plus-date-picker>
    </div>
</template>
<script>
</script>

:::

日期时间选择器

::: demo

<template>
    <div style="display: flex; align-items: center;justify-content: space-evenly;padding: 16px">
        <wu-plus-date-picker id="timePickerDatetime" type="datetime"></wu-plus-date-picker>
    </div>
</template>
<script>
</script>

:::

日期时间段选择器

::: demo

<template>
    <div style="display: flex; align-items: center;justify-content: space-evenly;padding: 16px">
        <wu-plus-date-picker type="daterange" default="['2022-06-11', '2022-06-16']" id="timePickerDaterange"></wu-plus-date-picker>
    </div>
</template>
<script>
</script>

:::

月时间段选择器

::: demo

<template>
    <div style="display: flex; align-items: center;justify-content: space-evenly;padding: 16px">
        <wu-plus-date-picker type="monthrange" default="['2022-03-11', '2022-06-16']" id="timePickerManthrange"></wu-plus-date-picker>
    </div>
</template>
<script>
</script>

:::

年时间段选择器

::: demo

<template>
    <div style="display: flex; align-items: center;justify-content: space-evenly;padding: 16px">
        <wu-plus-date-picker type="yearrange" default="['2020-06-11', '2022-06-16']" id="timePickeryearrange"></wu-plus-date-picker>
    </div>
</template>
<script>
</script>

:::

禁用

::: demo

<template>
    <div style="display: flex; align-items: center;justify-content: space-evenly;padding: 16px">
        <wu-plus-date-picker id="timePickerDisabled" disabled="true"></wu-plus-date-picker>
    </div>
</template>
<script>
</script>

:::

Attributes

参数	说明	类型	可选值	默认值
type	选择器类型	PickerType	'year'、'month'、'date'、 'week'、'datetime'、、 'datetimerange'、'daterange'、'monthrange'、'yearrange' 、	date
defaultValue	时间值	string、string[]	--	--
size	组件大小	UISize	medium、small、mini	mini
options	配置项	PickerOptions	--	defaultOptions

const defaultOptions = 
{
      type: 'date',
      multipleDates: [],
      startTime: dayjs().format('YYYY-MM-DD'),
      endTime: dayjs().format('YYYY-MM-DD'),
      maxDate: '',
      separator: ' 到 ',
      showType: 'modal',
      linkPanels: false,//面板联动
      showClear: true,//是否显示清除按钮
      autoConfirm: true,
      showShortKeys: false,
      shortList: [],
      showBottomButton: false,
      autoFillDate: true,//自动变更element里面的值
      disableDate: function(date, dayjs, calcType){//还未对初始时间做处理
         return false;
      },
}

Event

事件名	说明	参数
change	值修改	(event: CustomEvent) => void

PickerOptions

属性名	说明	类型