微信小程序-picker组件地区,时间,日期选择

效果


html代码

<view class="section">
  <view class="section__title">省市区选择器</view>
  <picker mode="region" bindchange="bindRegionChange" value="" custom-item="">
    <view class="picker">
      当前选择:
      <view wx:if="{{region}}">{{region[0]}},{{region[1]}},{{region[2]}}</view>
    </view>
  </picker>
</view>

<view class="section">
  <view class="section__title">时间选择器</view>
  <picker mode="time" value="" start="09:01" end="21:01" bindchange="bindTimeChange">
    <view class="picker">
      当前选择: {{time}}
    </view>
  </picker>
</view>

<view class="section">
  <view class="section__title">日期选择器</view>
  <picker mode="date" value="" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    </view>
  </picker>
</view>

css代码

.section{
  padding: 20rpx;
  border-bottom: 1px solid #aaaaaa;
}

js代码

Page({
  data: {
    region: "",
    time: "",
    date: ""
  },
  bindRegionChange(e) {
    let { value } = e.detail;
    console.log("地区改变:", value);
    this.setData({
      region: value
    })
  },
  bindTimeChange(e) {
    let { value } = e.detail;
    console.log("时间改变:", value);
    this.setData({
      time: value
    })
  },
  bindDateChange(e) {
    let { value } = e.detail;
    console.log("日期改变:", value);
    this.setData({
      date: value
    })
  },
});
意外金喜的博客:http://blog.csdn.net/zzwwjjdj1

发布了118 篇原创文章 · 获赞 232 · 访问量 153万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览