微信小程序-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

  • 0
    点赞
  • 11
    收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论 1

打赏作者

意外金喜

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值