DatePicker日期选择

https://github.com/samous0726/dynamic-antd-rangepicker
https://blog.csdn.net/qq_39186346/article/details/107687502
https://blog.csdn.net/weixin_44674459/article/details/106000338

网页保存图片
import domtoimage from ‘dom-to-image’

https://blog.csdn.net/liona_koukou/article/details/90445679
https://blog.csdn.net/liuliuliuliumin123/article/details/103044141
https://my.oschina.net/u/4333022/blog/3324077
https://blog.csdn.net/weixin_44371012/article/details/104295115
http://t.zoukankan.com/changyuqing-p-13748738.html

disabledHours

function disabledHours() {
  const hours = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
}

disabledMinutes

function disabledMinutes() {
}

RangeTime字符串日期报错

The value/defaultValue of RangePicker must be a moment object array after antd@2.0
解决：用 moment(‘string time’) 把字符串日期包裹起来，转成moment格式

RangeTime

// 禁用的日期：今天之前的日期不能选择
function disabledDate(current) {
  return current && current < moment().endOf('day');
}
// 禁用的日期：大于今天的不能选择
function disabledDate(current) {
  return current && current > moment().endOf('day')
}
// 禁用的日期：只能选择一个月的日期
function disabledDate(current) {
  // current && current < moment().subtract(30, 'days') 30天之前的日期不可选
  return current && current < moment().subtract(30, 'days') ||  current > moment().endOf('day')
}
function disabledRangeTime(_, type) {
  if (type === 'start') {
    return {
      disabledHours: () => range(0, 60).splice(4, 20),
      disabledMinutes: () => range(30, 60),
      disabledSeconds: () => [55, 56],
    };
  }
  return {
    disabledHours: () => range(0, 60).splice(20, 4),
    disabledMinutes: () => range(0, 31),
    disabledSeconds: () => [55, 56],
  };
}
<RangePicker disabledDate={disabledDate} />
<RangePicker
  disabledDate={disabledDate}
  disabledTime={disabledRangeTime}
  showTime={{
    hideDisabledOptions: true,
    defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
  }}
  format="YYYY-MM-DD HH:mm:ss"
  />

DatePicker

// 禁用的时分秒
function disabledTime() {
  const [hours, minus, second] = moment().format('HH-mm-ss').split('-')
  return {
    disabledHours: () => range(hours*1, 24), // 设置的时间都是禁用的
    disabledMinutes: () => range(minus*1, 60),
    disabledSeconds: () => range(second*1, 60),
  }
}
<DatePicker
  format="YYYY-MM-DD HH:mm:ss"
  disabledDate={disabledDate}
  disabledTime={disabledDateTime}
  showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
  />

3.x时间日期选择

日期禁用

1. 资料 https://blog.csdn.net/nongweiyilady/java/article/details/79960028

1. moment() 回显时间
   1. 注意:这里不能返回moment()，否则默认值是当前日期
   2. 更不能写{}，不是个日期格式的数据，虽然要求是object类型，但是数值无法被组件成功解析

      const date = (type == 'edit') ? moment(time, 'YYYY/MM/DD HH:mm') : null

时间只能选择 30天

const [selectDate, setSelectDate] = useState(null)
const onCalendarChange = (dates) => {
  if (!dates || !dates.length) return
  setSelectDate(dates[0])
}
const onEndChange = () => {
  setSelectDate(null)
}
const disabledTaskDate = (current) => {
  if (selectDate){
    const offsetV = 2592000000;  // 30天转换成ms
    const selectV = selectDate.valueOf() // 选择的开始时间
    return current > moment(selectV+offsetV) ||
      current < moment(selectV-offsetV) ||
      current > moment().endOf('day')
  } else {
    return current &&  current > moment().endOf('day')
  }
}
// 点击日期面板 确定按钮
function onOk (value) {
  const [r1, r2] = value
  const start = r1.valueOf()
  let end = r2.valueOf()
  if (end > moment().valueOf()) end = moment().valueOf()
  onChange({action: 'radio', value: [start, end], subKey: 'custom' })
}
const attr = {
  format: 'YYYY-MM-DD HH:mm:ss',
  disabledDate,
  disabledTime,
  //  默认选择时间为最近 8 天
  defaultValue: [moment().startOf('day').subtract(7, 'days'),  moment().endOf('day')],
  // 面板的日期 近一月
  defaultPickerValue:  [moment().subtract(1, 'month'), moment()],
  showTime: { defaultValue: moment().endOf('day'), format: 'HH:mm' },
  onPanelChange,
  onChange: onEndChange,
  onCalendarChange,
  onOk,
}
<RangePicker {...attr} />
// const month = 2592000000  // 30天转换成ms
const week = 10080000  // 七天天转换成ms
今天: [moment().startOf('day'), moment()],
本周: [moment().startOf('week'), moment()],
本月: [moment().startOf('month'), moment()],
近一周: [moment().subtract(1, 'week'), moment()],
近一月: [moment().subtract(1, 'month'), moment()],
近三月: [moment().subtract(3, 'month'), moment()]
// 禁用的日期：不能选择大于今天；超出30天内也不能选择
function disabledDate(current) {
  return current && current < moment().subtract(30, 'days') ||  current > moment().endOf('day')
}
// 默认选择时间为最近7天
const defaultSelectDate = {
  startDate: moment().startOf('day').subtract(6, 'days'),
  endDate: moment().endOf('day')
}
选择时间限制,今天往前的3个月，也就是最近三个月
const limitSelectDate = {
  min: moment().startOf('day').subtract(3, 'months'),
  max: moment().endOf('day')
}

4.x时间日期选择

时间禁用

// 禁用的时间
function lockTime() {
  const [hours, minus, second] = moment().format('HH-mm-ss').split('-')
  return {
    disabledHours: () => range(hours*1 + 1, 24), // 设置的时间都是禁用的
    disabledMinutes: () => range(minus*1 + 1, 60),
    disabledSeconds: () => range(second*1 + 1, 60),
  }
  // 时间区间数组
  function range(start, end) {
    const result = [] // 如果 start是字符串会死循环
    // eslint-disable-next-line no-plusplus
    for (let i = start; i < end; i++) {
      result.push(i)
    }    
    return result
  }
}

月份禁用

onPanelChange

1. 必须用 onPanelChange触发面板的改变，open属性控制面板的关闭