---
title: Date-picker
---

# DatePicker

日期选择器用于选择日期或时间。

# Usage

## 基础
```jsx
import React, { useState } from 'react'
import { observer } from 'mobx-react'
import { DatePicker, FormItem } from 'react-icecream'
import './demo.less'

export default observer(() => {
  const [value, setState] = useState(null)
  return (
    <FormItem>
      <DatePicker value={value} onChange={setState} />
    </FormItem>
  )
})
```

## 不同大小
```jsx
import React, { useState } from 'react'
import { DatePicker, RangeDatePicker } from 'react-icecream'
import './demo.less'

export default () => {
  return (
    <>
      <div style={{ marginBottom: 16 }}>
        <DatePicker size="small" />
        <DatePicker />
        <DatePicker size="large" />
      </div>
      <div>
        <RangeDatePicker size="small" />
        <RangeDatePicker />
        <RangeDatePicker size="large" />
      </div>
    </>
  )
}
```

## 时间选择器
```jsx
import React, { useState } from 'react'
import { DatePicker } from 'react-icecream'
import './demo.less'

export default () => {
  const [value1, setState1] = useState(null)
  const [value2, setState2] = useState(null)
  const [value3, setState3] = useState(null)
  return (
    <>
      <DatePicker value={value1} onChange={setState1} type="time" />
      <DatePicker value={value2} onChange={setState2} type="minute-second" />
      <DatePicker value={value3} onChange={setState3} type="hour-minute" />
    </>
  )
}
```

## 月选择器
```jsx
import React, { useState } from 'react'
import { DatePicker } from 'react-icecream'
import './demo.less'

export default () => {
  return (
    <>
      <DatePicker type="year-month" />
    </>
  )
}
```

## 带时间选择器的日期选择器
```jsx
import React, { useState } from 'react'
import { DatePicker } from 'react-icecream'
import './demo.less'

export default () => {
  return (
    <>
      <DatePicker type="datetime" />
      <DatePicker type="year-minute" />
    </>
  )
}
```

## 范围选择器
```jsx
import React, { useState } from 'react'
import { RangeDatePicker } from 'react-icecream'
import './demo.less'

export default () => {
  const [value1, setState1] = useState({ start: null, end: null })
  const [value2, setState2] = useState()
  const [value3, setState3] = useState()
  return (
    <>
      <div style={{ marginBottom: 16 }}>
        <RangeDatePicker value={value1} onChange={setState1} />
        <RangeDatePicker value={value2} onChange={setState2} type="time" />
        <RangeDatePicker value={value3} onChange={setState3} type="minute-second" />
      </div>
      <div>
        <RangeDatePicker type="datetime" />
        <RangeDatePicker type="year-minute" />
      </div>
    </>
  )
}
```

## 自定义日期单元格的内容和在面板中添加额外的页脚
```jsx
import React, { useState } from 'react'
import { DatePicker, RangeDatePicker } from 'react-icecream'
import './demo.less'

export default () => {
  function dateRender(v) {
    const todayValue = new Date().setHours(0,0,0,0)
    const dateValue = new Date(v).setHours(0,0,0,0)
    const date = new Date(v).getDate()
   
    if (todayValue === dateValue) {
      return <div class="date-cell bg-red">{date}</div>
    } else if(dateValue > todayValue) {
      return <div class="date-cell bg-orange">{date}</div>
    } else {
      return <div class="date-cell bg-green">{date}</div>
    }
  }

  return (
    <>
      <DatePicker 
        type="date" 
        dateRender={dateRender} 
        extraFooterRender={() => (
          <div class="legend-wrap">
            <div class="legend-item"><i class="legend bg-red" />结算中</div>
            <div class="legend-item"><i class="legend bg-orange" />待结算</div>
            <div class="legend-item"><i class="legend bg-green" />已结算</div>
          </div>
        )}
        />
      <DatePicker type="year-month" monthCellRender={v => <span style={{ color: 'red' }}>{new Date(v).getMonth() + 1}</span>} />
      <RangeDatePicker type="year-day" dateRender={dateRender} />
    </>
  )
}
```

## 禁用状态和默认值
```jsx
import React from 'react'
import { DatePicker, RangeDatePicker } from 'react-icecream'
import './demo.less'

export default () => {
  return (
    <>
      <DatePicker value={1433520000000} disabled />
      <DatePicker value={1617085381000} disabled type="time" />
      <RangeDatePicker value={{ start: 1433520000000, end: 1465142400000 }} disabled />
      <RangeDatePicker disableWhen={current => current && (current < (new Date().valueOf() - 1000000000) || current > new Date().valueOf())} />
    </>
  )
}
```

## 清空功能
```jsx
import React from 'react'
import { DatePicker, RangeDatePicker } from 'react-icecream'
import './demo.less'

export default () => {
  return (
    <>
      <DatePicker clearable />
      <RangeDatePicker clearable />
    </>
  )
}
```

## 指定时区
```jsx
import React, { useState } from 'react'
import { DatePicker, ConfigProvider } from 'react-icecream'
import './demo.less'

export default () => {
  return (
    <>
      <DatePicker
        type="datetime"
        utcOffset={0}
        disableWhen={current => current && (current > new Date().valueOf())}
        onChange={v => console.log(new Date(v).toISOString())}
      />
      <DatePicker
        type="datetime"
        utcOffset={8}
        disableWhen={current => current && (current > new Date().valueOf())}
        onChange={v => console.log(new Date(v).toISOString())}
      />
    </>
  )
}
```

## 设置全局时区
```jsx
import React, { useState } from 'react'
import { DatePicker, ConfigProvider } from 'react-icecream'
import './demo.less'

export default () => {
  return (
    <ConfigProvider time={{ utcOffset: 0 }}>
      <DatePicker
        type="datetime"
        disableWhen={current => current && (current > new Date().valueOf())}
        onChange={v => console.log(new Date(v).toISOString())}
      />
      <DatePicker
        type="datetime"
        utcOffset={8}
        disableWhen={current => current && (current > new Date().valueOf())}
        onChange={v => console.log(new Date(v).toISOString())}
      />
    </ConfigProvider>
  )
}
```

## 选择框开启或关闭时触发
比如在选择好时间后触发数据查询
```jsx
import React, { useRef } from 'react'
import { RangeDatePicker } from 'react-icecream'
import './demo.less'

export default () => {
  const date = useRef()

  return (
    <RangeDatePicker
      onChange={val => { date.current = val }}
      onOpenChange={open => {
        if (!open && date.current) {
          console.log(`do search from ${date.current?.start} to ${date.current?.end}`)
        }
      }}
    />
  )
}
```

<API></API>