Skip to main content

DatePicker

用于选择或输入日期。

基本用法​

通过 value 属性传入日期值。

function App() {
  const [value, setValue] = useState('2021-10-11')

  const args = {
    value,
    radius: 2,
    onChange: (v) => {
      console.log(v)
      setValue(v)
    }
  }

  return (
    <div className="ykui-demo-column">
      <DatePicker {...args} />
    </div>
  )
}

日期多选​

  • value 属性传入数组日期值
  • multiple 属性设置日期多选
function App() {
  const [value, setValue] = useState(['2021-10-01', '2021-10-07'])

  const args = {
    value,
    radius: 2,
    width: '480px',
    multiple: true,
    onChange: (v) => {
      console.log(v)
      setValue(v)
    }
  }

  return (
    <div className="ykui-demo-column">
      <DatePicker {...args} />
    </div>
  )
}

日期范围选择器​

可通过 type 属性指定日期选择器类型。

function App() {
  const [value, setValue] = useState(['2021-10-11', '2021-10-12'])

  const args = {
    type: 'daterange',
    value,
    radius: 2,
    onChange: (v) => {
      console.log(v)
      setValue(v)
    }
  }

  return (
    <div className="ykui-demo-column">
      <DatePicker {...args} />
    </div>
  )
}

自定义分隔符​

可通过 rangeSeparator 属性自定义分隔符。

function App() {
  const [value, setValue] = useState(['2021-10-11', '2021-10-12'])

  const args = {
    type: 'daterange',
    value,
    rangeSeparator: '👍🏻',
    onChange: (v) => {
      console.log(v)
      setValue(v)
    }
  }

  return (
    <div className="ykui-demo-column">
      <DatePicker {...args} />
    </div>
  )
}

API​

属性说明类型默认值
multiple是否多选boolean--
className类名string--
dateStyle样式CSSProperties--
type选择器类型typeProps--
value日期值valueProps--
rangeSeparator自定义分隔符string--
placeholder默认提示语string--
width宽度string--
radius自定义圆角number--
separator自定义分隔符ReactNode--
onChange值变化时触发Func--