小程序日期时间选择器怎么实现

今天小编给大家分享一下小程序日期时间选择器怎么实现的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

　　要用到picker组件，动画从底部弹起的滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器。

　　看下相应的属性：

　　①普通选择器

　　选择器用mode来区别,默认是普通选择器,e.detail.value拿到的值是选择了项的索引index,再通过array拿到值.在data里面做初始化的时候,将备选项加入array即可.

　　选择时触发bindPickerChange事件,获取index.

　　②时间选择器

　　mode = time时,是时间选择器.start,end分别是有效时间范围的开始和结束.格式hh:mm

　　选择时触发bindTimeChange事件,获取time.

　　③日期选择器

　　mode = date时,是时间选择器.start,end分别是有效日期范围的开始和结束.格式yyyy-MM-dd

　　选择时触发bindDateChange事件,获取date

　　具体的来看看代码，布局:

<view class="section" >    <picker bindchange="bindPickerChange" value="{{index}}" range="{{objectArray}}" mode = "selector">  <view class="picker">        国家：{{objectArray[index]}}  </view>    </picker>  </view>  <view class="section">    <picker mode="time" value="{{time}}" start="00:00" end="23:59" bindchange="bindTimeChange">  <view class="picker">       时间 : {{times}}</view>    </picker>  </view>  <view class="section">    <picker mode="date" value="{{date}}" start="1978-01-01" end="2017-1-23" bindchange="bindDateChange">  <view class="picker">        日期: {{dates}}  </view>    </picker>  </view>

CSS样式:

.section{   background:#CABBC7;   margin:20rpx;   padding:20rpxjs代码：

Page({  data: {    dates: '2016-11-08',    times: '12:00',    objectArray: ['中国', '英国', '美国'],    index: 0,  },  //  点击时间组件确定事件    bindTimeChange: function (e) {console.log("谁哦按")    this.setData({      times: e.detail.value})  },  //  点击日期组件确定事件    bindDateChange: function (e) { console.log(e.detail.value)    this.setData({      dates: e.detail.value})  },  //  点击城市组件确定事件    bindPickerChange: function (e) { console.log(e.detail.value)    this.setData({      index: e.detail.value})  }

代码很简单，分别绑定事件，点击切换就Ok。

以上就是“小程序日期时间选择器怎么实现”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。