移动端弹出日历

• 支持选择1个时间和区间时间
• 支持起始时间和结束时间
• 支持渲染日历的月数

在线链接

查看链接

API

属性如下

| 参数 | 说明 | 类型 | 默认值 | | :-----| :----: | :----: | ----: | | isOpen | 是否显示日历 | Boolean | false | | onClose | 点击关闭的回调函数 | Function | function | | onSelect | 日历控件点击确定的回调 | function | function | | onSelect | 日历控件点击确定的回调 | function | function | | isMultipleMode | 是否多选日历,多选可以选择开始和结束时间 | Boolean | false | | disabledStartTime | 静止选择之前的时间 | Date | null | | disabledEndTime | 静止选择之后的时间 | Date | null | | monthCount | 渲染的日历月数 | Number | 1 | | defaultDate | 日历的可点击时间+1 | Date | new Date | | footerRender | 自定义日历的底部按钮区域 | function 返回 react Element | function | | headerRender | 自定义日历的头部区域 | function 返回 react Element，当前函数的参数是每个月的monthArr数组 | function | | contentRender | 自定义日历的内容区域 | function 返回 react Element | | | dateCellRender | 自定义日历的内每一项天的回调函数 | function 返回 react Element，当前函数的参数item, index | function |

单选日历

示例代码

import React, { useState, useEffect } from 'react';
import Calendar from 'Calendar';
import moment from 'moment';
function () => {
  const [isOpen, setIsOpen] = useState(false)
  const [checkStartTime, setCheckStartTime] = useState('')
  const onClose = () => {
    setIsOpen(false)
  }

  const onSelect = (start, end) => {
    setCheckStartTime(start)
    setIsOpen(false)
  }

  return (
    <React.Fragment>
      <button onClick={() => setIsOpen(true)}>单选日历</button>
      {
        checkStartTime && (<div>选择的时间：{checkStartTime.format('YYYY-MM-DD')}</div>)
      }
      <Calendar
        isOpen={isOpen}
        onClose={onClose}
        onSelect={onSelect}
      >
      </Calendar>
    </React.Fragment>
  )
}

多选日历

import React, { useState, useEffect } from 'react';
import Calendar from 'Calendar';
import moment from 'moment';
function () => {
  const [isOpen, setIsOpen] = useState(false)
  const [checkStartTime, setCheckStartTime] = useState('')
  const [checkEndTime, setCheckEndTime] = useState('')
  const onClose = () => {
    setIsOpen(false)
  }
  const onSelect = (start, end) => {
    setCheckStartTime(start)
    setCheckEndTime(end)
    setIsOpen(false)

  }
  return (
    <React.Fragment>
      <button onClick={() => setIsOpen(true)}>多选日历</button>
      {
        checkStartTime && (<div>选择区间的时间：{checkStartTime.format('YYYY-MM-DD')} - {checkEndTime.format('YYYY-MM-DD')}</div>)
      }
      <Calendar
        isOpen={isOpen}
        onClose={onClose}
        onSelect={onSelect}
        isMultipleMode
      >
      </Calendar>
    </React.Fragment>
  )
}

禁用区间日历

import React, { useState, useEffect } from 'react';
import Calendar from 'Calendar';
import moment from 'moment';
function () => {
  const [isOpen, setIsOpen] = useState(false)
  const [checkStartTime, setCheckStartTime] = useState('')
  const [checkEndTime, setCheckEndTime] = useState('')
  const [disabledStartTime, setDisabledStartTime] = useState(moment().add(7, 'days'))
  const [disabledEndTime] = useState(moment().add(11, 'days'))
  const onClose = () => {
    setIsOpen(false)
  }
  const onSelect = (start, end) => {
    setCheckStartTime(start)
    setCheckEndTime(end)
    setIsOpen(false)

  }
  return (
    <React.Fragment>
      <button onClick={() => setIsOpen(true)}>禁用区间日历</button>
      {
        checkStartTime && (<div>选择区间的时间：{checkStartTime.format('YYYY-MM-DD')} - {checkEndTime.format('YYYY-MM-DD')}</div>)
      }
      <Calendar
        isOpen={isOpen}
        onClose={onClose}
        onSelect={onSelect}
        disabledStartTime={disabledStartTime}
        disabledEndTime={disabledEndTime}
        isMultipleMode
      >
      </Calendar>
    </React.Fragment>
  )
}

渲染3个月日历

import React, { useState, useEffect } from 'react';
import Calendar from 'Calendar';
import moment from 'moment';
function () => {
  const [isOpen, setIsOpen] = useState(false)
  const [checkStartTime, setCheckStartTime] = useState('')
  const [checkEndTime, setCheckEndTime] = useState('')
  const [disabledStartTime, setDisabledStartTime] = useState(moment().add(7, 'days'))
  const [disabledEndTime] = useState(moment().add(11, 'days'))
  const [monthCount, setMonthCount] = useState(3)
  const onClose = () => {
    setIsOpen(false)
  }
  const onSelect = (start, end) => {
    setCheckStartTime(start)
    setCheckEndTime(end)
    setIsOpen(false)

  }
  return (
    <React.Fragment>
      <button onClick={() => setIsOpen(true)}>渲染3个月日历</button>
      {
        checkStartTime && (<div>选择区间的时间：{checkStartTime.format('YYYY-MM-DD')} - {checkEndTime.format('YYYY-MM-DD')}</div>)
      }
      <Calendar
        isOpen={isOpen}
        onClose={onClose}
        onSelect={onSelect}
        disabledStartTime={disabledStartTime}
        disabledEndTime={disabledEndTime}
        isMultipleMode
        monthCount={monthCount}
      >
      </Calendar>
    </React.Fragment>
  )
}

默认可选中起始时间往后+1天

import React, { useState, useEffect } from 'react';
import Calendar from 'Calendar';
import moment from 'moment';
function () => {
  const [isOpen, setIsOpen] = useState(false)
  const [checkStartTime, setCheckStartTime] = useState('')
  const [checkEndTime, setCheckEndTime] = useState('')
  const [startDate] = useState(moment().add(-2, 'days'))
  
  const onClose = () => {
    setIsOpen(false)
  }
  const onSelect = (start, end) => {
    setCheckStartTime(start)
    setCheckEndTime(end)
    setIsOpen(false)

  }
  return (
    <React.Fragment>
      <button onClick={() => setIsOpen(true)}>默认选中开始时间</button>
      {
        checkStartTime && (<div>选择区间的时间：{checkStartTime.format('YYYY-MM-DD')} - {checkEndTime.format('YYYY-MM-DD')}</div>)
      }
      <Calendar
        isOpen={isOpen}
        onClose={onClose}
        onSelect={onSelect}
        defaultDate={startDate}
      >
      </Calendar>
    </React.Fragment>
  )
}