微信小程序地区日期时间选择器实现

<!-- pages/index/index.wxml -->

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}" wx:key="unique">
        <swiper-item>
            <image src="{{item}}" class="slide-image"/>
        </swiper-item>
    </block>
</swiper>
<!-- 弹幕开关 -->
<view class="barrage-Switch" style="color:{{barrageTextColor}};">
    <switch id="switch_" bindchange="barrageSwitch"/>
    <text>弹幕</text>
</view>
<!--弹幕输入框-->
<view class="barrage-inputText" style="display: {{barrage_inputText}}">
    <view class="barrage-input">
        <input bindblur="bind_shoot" value="{{bind_shootValue}}"/>
    </view>
    <view class="barrage-shoot">
        <button class="shoot" size="mini" bindtap="shoot">发射</button>
    </view>
</view>
<!--弹幕上单文字-->
<view class="barrage-fly" style="display: {{barragefly_display}}">
    <block wx:for="{{barrage_style}}" wx:key="unique">
    <text class="barrage-textFly" style="color:{{item.barrage_shoottextColor}};left:{{item.barrage_phoneWidth}}px;top:{{item.barrageText_height}}px;">{{item.barrage_shootText}}</text>
    </block>
</view>

index.wxss

.section{
    background: #cabbc7;
    margin:20rpx;
    padding:20rpx;
}

index.js

Page({
    data:{
        dates:"2016-11-08",
        times:"12:00",
        objectArray:['中国','英国','美国'],
        index:0
    },
    //点击时间组件确定事件
    bindTimeChange:function(e){
        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
        })
    }
})