源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-08-11 17:38 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:微信小程序使用picker实现时间和日期选择框功能【附源码下载】
本文实例讲述了微信小程序使用picker实现时间和日期选择框功能。分享给大家供大家参考,具体如下: [b]1、效果展示[/b] [img]http://files.jb51.net/file_images/article/201712/2017121191017462.gif?2017111191058[/img] [b]2、关键代码[/b] ① 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
  })
 }
})

[b]3、源代码[/b]点击此处[url=http://xiazai.jb51.net/201712/yuanma/wxapp_picker(jb51.net).rar][b]本站下载[/b][/url]。 关于picker组件的详细介绍可参考官网:[url=https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html]https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html[/url] 希望本文所述对大家微信小程序开发有所帮助。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部