轻松掌握：用原生小程序组件Picker自定义日期时间选择器

前端

2023-09-26 17:54:14

巧用 Picker 组件，打造个性化日期时间选择器

在小程序开发中，用户经常需要选择日期或时间。Picker 组件作为小程序的一项强大工具，可以帮助开发者轻松快速地创建自定义日期时间选择器，为用户提供便捷的操作体验。

Picker 组件简介

Picker（选择器）是一种常见的用户界面控件，用于从多个选项中选择一个或多个选项。小程序中的 Picker 组件支持多种模式，包括：

单列选择器： 用户从指定选项列表中选择一个选项。
多列选择器： 用户从指定二维选项列表中选择多个选项。
联动选择器： 用户选择一个选项后，其他选项的列表会随之改变。

使用 Picker 组件

使用 Picker 组件只需几个简单的步骤：

import { Picker } from '@tarojs/components'

const App = () => {
  const handleDateChange = (value) => {
    console.log(value)
  }

  return (
    <Picker
      mode="date"
      range={['2023-01-01', '2023-12-31']}
      value="2023-06-01"
      onChange={handleDateChange}
    />
  )
}

其中：

mode 属性： 指定选择器的模式，可选值有 'date'、'time'、'region' 或 'custom'。
range 属性： 指定选择器的选项列表，不同模式下数据格式不同。
value 属性： 指定选择器的初始值。
onChange 属性： 指定选择器值改变时的处理函数。

自定义 Picker 组件

如果 Picker 组件提供的模式不满足需求，可以自定义一个 Picker 组件：

const App = () => {
  const customOptions = ['选项1', '选项2', '选项3']

  const handleCustomChange = (value) => {
    console.log(value)
  }

  return (
    <Picker
      mode="custom"
      range={customOptions}
      value="选项1"
      onChange={handleCustomChange}
    />
  )
}

常见问题

如何设置默认值？

通过设置 value 属性，可以设置 Picker 组件的默认值。

如何禁用 Picker？

通过设置 disabled 属性为 true，可以禁用 Picker 组件。

如何联动多列选择器？

通过设置 linkage 属性，可以指定联动关系。例如：

const App = () => {
  const provinceOptions = ['北京', '上海', '广东']
  const cityOptions = {
    北京: ['东城', '西城', '朝阳'],
    上海: ['黄浦', '徐汇', '长宁'],
    广东: ['广州', '深圳', '珠海'],
  }

  const handleLinkageChange = (value) => {
    console.log(value)
  }

  return (
    <Picker
      mode="multiSelector"
      linkage={cityOptions}
      range={[provinceOptions]}
      value={['北京', '东城']}
      onChange={handleLinkageChange}
    />
  )
}