脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序picker时间和日期选择框

微信小程序使用picker实现时间和日期选择框功能【附源码下载】

 更新时间：2017年12月11日 08:57:49   作者：FutrueJet  
这篇文章主要介绍了微信小程序使用picker实现时间和日期选择框功能,结合实例形式分析了微信小程序picker组件进行日期与时间选择的相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下

本文实例讲述了微信小程序使用picker实现时间和日期选择框功能。分享给大家供大家参考，具体如下：

1、效果展示

2、关键代码

① index.wxml

<picker value="{{picker1Value}}" range="{{picker1Range}}" bindchange="normalPickerBindchange">
  当前城市选择：{{picker1Range[picker1Value]}}
</picker>
<picker mode="time" value="{{timeValue}}" start="00:00" end="24:00" bindchange="timePickerBindchange">
 当前时间选择: {{timeValue}}
</picker>
<picker mode="date" value="{{dateValue}}" start="1999-01-01" end="2999-12-12" bindchange="datePickerBindchange">
 当前日期选择: {{dateValue}}
</picker>

② 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.value
  })
 },
 datePickerBindchange:function(e){
  this.setData({
   dateValue:e.detail.value
  })
 }
})

3、源代码点击此处本站下载。

关于picker组件的详细介绍可参考官网：https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html

希望本文所述对大家微信小程序开发有所帮助。

您可能感兴趣的文章:

相关文章

  • 匹配html标记的正则

    匹配html标记的正则

    匹配html标记的正则...
    2006-07-07
  • js前端URL含有特殊字符的转码的实现

    js前端URL含有特殊字符的转码的实现

    本文主要介绍了js前端URL含有特殊字符的转码的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • tab栏切换原理

    tab栏切换原理

    本文主要介绍了tab栏切换的原理以及实现方法代码。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • Elasticsearch实现复合查询高亮结果功能

    Elasticsearch实现复合查询高亮结果功能

    这篇文章主要介绍了Elasticsearch实现复合查询,高亮结果功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • 深入浅析javascript继承体系

    深入浅析javascript继承体系

    这篇文章主要介绍了javascript继承体系的相关资料,需要的朋友可以参考下
    2017-10-10
  • ES6中Proxy代理用法实例浅析

    ES6中Proxy代理用法实例浅析

    这篇文章主要介绍了ES6中Proxy代理用法,结合实例形式简单分析了Proxy代理的概念、功能、使用方法与相关注意事项,需要的朋友可以参考下
    2017-04-04
  • Js中安全获取Object深层对象的方法实例

    Js中安全获取Object深层对象的方法实例

    Object是JavaScript基本数据类型之一（function也属于object，是特殊的object）,其存储于堆中,这篇文章主要给大家介绍了关于Js中安全获取Object深层对象的相关资料,需要的朋友可以参考下
    2021-09-09
  • js中.sort()函数的常见用法与高级操作

    js中.sort()函数的常见用法与高级操作

    JavaScript中的sort函数可以用来对数组进行排序,默认情况下sort函数将数组中的元素转换为字符串,并按照Unicode码点的顺序进行排序,下面这篇文章主要给大家介绍了关于js中.sort()函数的常见用法与高级操作的相关资料,需要的朋友可以参考下
    2023-05-05
  • Three.js中如何使用CSS3DRenderer和CSS3DSprite实现模型标签文字

    Three.js中如何使用CSS3DRenderer和CSS3DSprite实现模型标签文字

    在Three.js中,使用CSS3DRenderer和CSS3DSprite可以轻松地实现模型标签文字的效果,为场景中的模型提供更直观的信息展示,本文将介绍如何使用这两个工具来实现模型标签文字,并提供相应的代码示例,感兴趣的朋友跟随小编一起看看吧
    2024-05-05
  • 详解如何快速配置webpack多入口脚手架

    详解如何快速配置webpack多入口脚手架

    这篇文章主要介绍了详解如何快速配置webpack多入口脚手架，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12

最新评论