picker-view日期选择器

小程序-时间选择器(picker-view)
一、功能介绍:
基于picker-view组件实现嵌入页面的选择器,用来实现日期选择器和时间选择器,可以更便捷、简单的选择时间日期。

二、使用方法:
点击页面时间,弹出悬浮窗,悬浮窗内是时间选择器,选定时间日期后点击确定即可。

三、效果展示:

1、页面:

在这里插入图片描述

2、日期选择器:

在这里插入图片描述
3、时间选择器:

在这里插入图片描述

4、精确到分的选择器:

在这里插入图片描述

四、示例代码:
1、日期选择器:

WXML代码
<view class="mask" catchtouchmove="preventTouchMove" wx:if="{
  {showModal}}"></view>
<view class="modalDlg" wx:if="{
  {showModal}}">
<view class="time_text">{
  {year}}年{
  {month}}月{
  {day}}日</view>
<picker-view wx:if="{
  {years.length>0 && months.length>0 && days.length>0}}" style="width: 100%; height: 500rpx;" indicator-style="height: 50px;" class="view_picker" value="{
  {value}}" bindchange="bindChange">
<picker-view-column style='margin-left: 20rpx;'>
<view wx:for="{
  {years}}" class="view_picker_text" wx:key="{
  {index}}">{
  {item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{
  {months}}" class="view_picker_text" wx:key="{
  {index}}">{
  {item}}月</view>
</picker-view-column>
<picker-view-column style='margin-right: 20rpx;'>
<view wx:for="{
  {days}}" class="view_picker_text" wx:key="{
  {index}}">{
  {item}}日</view>
</picker-view-column>
</p
  • 0
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值