动态解锁！uniapp小程序picker 超强日期时间段选择器

前端

2024-01-31 07:30:32

Uni-picker：让你的小程序日期时间段选择如虎添翼

引言

在 UniApp 小程序开发中，日期和时间段的选择是常见的需求。Uni-picker 组件提供了强大的功能，让开发者轻松满足各种日期时间段选择需求。

Uni-picker 的强大功能

多样化选择模式： 支持单列、多列、日期、时间和日期时间段等多种选择模式。
自定义显示格式： 支持多种自定义格式，如日期范围 "2023-03-08 至 2023-03-15"。
多级联选择： 可实现多级联选择，满足复杂的时间段选择需求。
丰富回调事件： 提供 onColumnChange、onChange 等回调事件，方便开发者捕捉选择变化。
样式高度定制： 支持自定义主题和样式，满足不同小程序的视觉需求。

Uni-picker 的简单用法

使用 Uni-picker 组件非常简单，仅需几步即可实现：

添加组件： 在页面中添加组件。
设置模式： 通过 mode 属性设置选择模式，如 "date"、"time" 或 "datetime"。
设置值： 通过 value 属性设置默认选择值。
设置列信息： 通过 fields 属性设置列信息，包括文本、范围和步长等。
监听回调： 通过 onChange 属性监听选择变化的回调。

代码示例

<template>
  <picker
    :mode="mode"
    :value="value"
    :fields="fields"
    @change="onChange"
  />
</template>

<script>
import { Picker } from '@uni-app/core';
export default {
  data() {
    return {
      mode: 'date',
      value: [],
      fields: [
        {
          text: '年份',
          range: ['2023', '2024', '2025'],
        },
        {
          text: '月份',
          range: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        },
      ],
    };
  },
  methods: {
    onChange(e) {
      console.log('选择日期：', e.detail);
    },
  },
};
</script>