微信小程序例子——使用picker实现时间和日期选择框

最新推荐文章于 2025-06-14 14:18:53 发布

原创

最新推荐文章于 2025-06-14 14:18:53 发布 · 3.3w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#Web前端 #互联网 #前端开发 #微信小程序 #编程语言

本文通过一个实例展示了如何在微信小程序中使用picker组件创建时间和日期选择框。提供了关键的WXML和JS代码，并给出了源代码的百度云下载链接，同时作者提供微信咨询服务，帮助解决使用过程中遇到的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、效果展示

2、关键代码

index.wxml


    当前城市选择：{
   
   {picker1Range[picker1Value]}}


  当前时间选择: {
   
   {timeValue}}


	当前日期选择: {
   
   {dateValue}}

index.js

Page({
  data:{
    // text:"这是一个页面"
    picker1Value:0,
    picker1Range:['北京','上海','广州','深圳'],
    timeValue:'08:08',
    dateValue:'2016-10-13'
  },
  normalPickerBindchange:function(e){
    this.setData({
      picker1Value:e.detail.value
    })
  },
  timePickerBindchange:function(e){
    this.setData({
      timeValue:e.detail.val