跳到主要内容

Calendar 日历

为兼容多端，所以编写的日历组件，支持日、周、范围选择，支持多种自定义日历的方式

示例​

import { Header, ScrollView, TopView, GroupList } from '@/duxuiExample'
import { Calendar, Checkbox, dayjs, Radio, Row, Text, toast } from '@/duxui'
import { useMemo, useState } from 'react'

export default function ButtonExample() {

  const [mode, setMode] = useState()

  const [checkbox, setCheckbox] = useState(false)

  const [onlyCurrentWeek, setOnlyCurrentWeek] = useState(false)

  const [maxmin, setMaxmin] = useState(false)

  const customDate = useMemo(() => {
    return [
      {
        date: [dayjs().format('YYYY-MM-DD')],
        bottom: ({ select }) => <Text size={1} type='primary' {...select ? { color: 4 } : {}}>今天</Text>,
        top: ({ select }) => <Text size={1} color={select ? 4 : 1}>顶部</Text>
      },
      {
        date: [dayjs().add(-1, 'day').format('YYYY-MM-DD')],
        bottom: ({ select }) => <Text size={1} type='secondary' {...select ? { color: 4 } : {}}>昨天</Text>
      },
      {
        date: [dayjs().add(1, 'day').format('YYYY-MM-DD')],
        bottom: ({ select }) => <Text size={1} type='secondary' {...select ? { color: 4 } : {}}>明天</Text>
      }
    ]
  }, [])

  const customSelect = useMemo(() => {
    return {
      top: ({ select, selectType }) => {
        if (selectType === 'start') {
          return <Text size={1} color={4}>开始</Text>
        } else if (selectType === 'end') {
          return <Text size={1} color={4}>结束</Text>
        } else if (selectType === 'select') {
          return <Text size={1} color={4}>选中</Text>
        }
      }
    }
  }, [])

  return <TopView>
    <Header title='Calendar' />
    <ScrollView>
      <GroupList>
        <GroupList.Item title='天选择'>
          <Radio.Group value={mode} onChange={setMode}>
            <Radio value={undefined} label='不选择' />
            <Radio value='day' label='天选择' />
            <Radio value='scope' label='范围选择' />
            <Radio value='week' label='周选择' />
          </Radio.Group>
          <Row className='gap-3 items-center'>
            <Checkbox label='多选' checked={checkbox} onClick={() => setCheckbox(!checkbox)} />
            <Checkbox label='仅显示当前周' checked={onlyCurrentWeek} onClick={() => setOnlyCurrentWeek(!onlyCurrentWeek)} />
            <Checkbox label='限制最大最小日期' checked={maxmin} onClick={() => setMaxmin(!maxmin)} />
          </Row>
          <Calendar mode={mode}
            key={mode + '' + checkbox}
            checkbox={checkbox}
            onlyCurrentWeek={onlyCurrentWeek}
            {
            ...maxmin ? {
              min: dayjs().format('YYYY-MM-DD'),
              max: dayjs().add(15, 'day').format('YYYY-MM-DD'),
            } : {}
            }
          />
        </GroupList.Item>
        <GroupList.Item title='事件'>
          <Calendar
            mode='day'
            onMonthChange={e => toast('onMonthChange:' + e)}
            onDayClick={e => toast('onDayClick:' + e.day)}
          />
        </GroupList.Item>
        <GroupList.Item title='自定义日历'>
          <Calendar
            mode='scope'
            customDate={customDate}
            customSelect={customSelect}
          />
        </GroupList.Item>
      </GroupList>
    </ScrollView>
  </TopView>
}

Props​

mode​

日历功能类型 默认不支持选择

  • day 天选择
  • week 周选择
  • scope 日期范围选择
类型必填默认值
enum('day', 'week', 'scope')否

checkbox​

多选模式

开启后如果选择天，则可以选择多个天，如果选择周，则可以选择多个周、范围选择多个范围

类型必填默认值
boolean否false

value​

选中的值

当为日期选择时需要传入字符串 格式为 2020-01-01

当为周或者范围选择时需要传入数组，数字第一项为开始日期，第二项为结束日期 如 ['2020-01-01', '2020-01-05']

多选模式时，将会在以上基础上再套一层数组

类型必填默认值
string | string[] | string[][]否

导航部分的样式

类型必填默认值
CSSProperties否

headStyle​

头部的容器样式

类型必填默认值
CSSProperties否

onChange​

当选择发生改变时触发的事件

类型必填默认值
(value: string | string[] | string[][]) => void否

onMonthChange​

月份切换的时候触发

类型必填默认值
(value: string) => void否

onDayClick​

日期天点击事件 如果返回true将会阻止默认操作 如选中日期

类型必填默认值
(option: { day: string, scopeStart: string }) => boolean否

max​

允许选择的最大日期 如2030-01-01

类型必填默认值
string否

min​

允许选择的最小日期 如2020-01-01

类型必填默认值
string否

onlyCurrentWeek​

是否仅显示当前日期所在的周 为true只会显示一周的数据

类型必填默认值
boolean否false

disabledDate​

禁用的日期 日期或者日期范围组成的数组

类型必填默认值
(string | [string, string])[]否

enabledDate​

可用的日期 除了传入的日期或者范围，其他的日期将被禁用，当 enabledDate 的日期在 disabledDate 里面时 此日期将不可用

类型必填默认值
(string | [string, string])[]否

customDate​

自定义日期日历数据

参照上面的示例完成编写

类型必填默认值
CalendarCustom[]否

customSelect​

自定义选中的部分的日历数据

参照上面的示例完成编写

类型必填默认值
CalendarSelect否