vant小程序时间选择器如何使用

Vant 小程序时间选择器的使用非常简单，只需在页面json文件中引用vant-weapp中的time-picker组件，然后在wxml文件中按照文档中的示例代码进行引用，就可以完成时间选择器的使用了。

相关问题

vantweapp中时间选择器

### Vant WeApp 时间选择器使用教程

#### 安装依赖
为了在项目中使用 `Vant WeApp` 的时间选择器组件，需先通过 npm 或 yarn 添加依赖。确保已经配置好微信小程序支持 NPM 模块的方式。

npm install @vant/weapp -D --save

或者

yarn add @vant/weapp -D

完成上述操作之后，在构建过程中会自动生成 `miniprogram_npm` 文件夹[^3]，其中包含了所有由框架预先编写好的组件文件。

#### 引入组件
编辑页面对应的 `.json` 配置文件来声明所要使用的组件：

{
  "usingComponents": {
    "van-datetime-picker": "@vant/weapp/datetime-picker/index"
  }
}

这段 JSON 片段展示了如何引入 `datetime-picker` 组件到当前页面中[^4]。

#### 基本用法
下面给出一段简单的 WXML 和 JS 代码片段用于展示基本的时间选择功能：

<!-- index.wxml -->
<view class="container">
  <button bindtap="showPicker">显示时间选择器</button>
  
  <!-- 时间选择器弹窗 -->
  <van-popup show="{{ show }}" position="bottom" custom-style="height: 40%;">
    <van-datetime-picker
      type="time"
      value="{{ currentTime }}"
      onChange="onChange"
      onClose="onClose"
      onConfirm="onConfirm"
    />
  </van-popup>

  <text>选定时间为：{{ selectedTime }}</text>
</view>

// index.js
Page({
  data: {
    show: false,
    currentTime: new Date().getHours() * 60 + new Date().getMinutes(),
    selectedTime: ''
  },

  showPicker () {
    this.setData({ show: true });
  },
  
  onChange (event) {
    const { detail } = event;
    console.log('change', detail);
  },

  onClose () {
    this.setData({ show: false });
  },

  onConfirm(event){
    let time = event.detail;
    var hours = Math.floor(time / 60).toString().padStart(2, '0');
    var minutes = (time % 60).toString().padStart(2,'0');

    this.setData({
      show: false,
      selectedTime:`${hours}:${minutes}`
    })
  }
});

此示例实现了点击按钮后弹出底部滑动层形式的时间选择界面，并允许用户选取具体时刻；当确认选择时更新界面上的文字提示内容[^1]。

vant 时间选择器

vant时间选择器组件是一个用于选择日期和时间的可定制组件。它可以在你的小程序页面中使用，并通过引用组件和设置相关属性来实现功能。

在你的小程序页面中，你需要在index.json文件中引用vant时间选择器组件，注册组件如下：

{
  "usingComponents": {
    "v-dateTimePicker": "../../components/dateTimePicker/index"
  }
}

然后，在data中定义相关属性，例如birthDate用于显示选择的出生日期，isShowpopup用于控制时间选择器的显示与隐藏。

接下来，在方法中添加showBirthDate方法，用于显示时间选择器。该方法可以通过调用子组件中的方法来实现：

showBirthDate() {
  this.setData({ isShowpopup: true });
  this.selectComponent("#page").showPop('isShowpopup');
}

同时，还需要添加onConfirm和onCancel方法，分别用于在确认和取消选择时更新日期并控制时间选择器的隐藏：

onConfirm(e) {
  this.setData({ isShowpopup: e.detail.isShowpopup, birthDate: e.detail.selectDate });
}

onCancel(e) {
  this.setData({ isShowpopup: e.detail.isShowpopup });
}

通过以上的配置和设置，你可以在你的小程序页面中使用vant时间选择器组件，并实现选择日期和时间的功能。