uni-data-picker 使用 代码

uni-data-picker 是 uni-app 框架中的一个日期选择器组件，可以用于选择日期、时间等。下面是一个使用 uni-data-picker 的示例代码：

<template>
  <view>
    <!-- 点击按钮弹出日期选择器 -->
    <button @click="showPicker = true">选择日期</button>
    <!-- uni-data-picker 组件 -->
    <uni-data-picker
      v-model="showPicker"
      :fields="fields"
      :start="startDate"
      :end="endDate"
      @change="onDateChange"
    ></uni-data-picker>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        showPicker: false, // 是否显示日期选择器
        fields: "day", // 可选值为 year、month、day、hour、minute
        startDate: "2021-01-01",
        endDate: "2022-12-31",
        selectedDate: "" // 选中的日期
      };
    },
    methods: {
      onDateChange(e) {
        this.selectedDate = e.detail.value;
        console.log("选中的日期为：", this.selectedDate);
      }
    }
  };
</script>

在上述代码中，我们首先定义了一个按钮，当用户点击该按钮时，会弹出日期选择器。日期选择器使用了 uni-data-picker 组件，其中 `v-model` 属性用于控制日期选择器的显示和隐藏，`fields` 属性用于设置可选的日期粒度，`start` 和 `end` 属性用于设置可选的日期范围。当用户选择日期时，会触发 `change` 事件，我们可以在事件处理函数中获取选中的日期。

需要注意的是，uni-data-picker 只能在 H5 和 APP 端使用，不支持在小程序端使用。如果需要在小程序端使用日期选择器，可以使用原生的 `<picker>` 组件。