微信小程序picker日期-时间段选择

古城微笑少年丶 2021-07-24 23:16 861阅读 0赞

\--------今天休息跟大家分享一下在开发小程序遇到的时间选择这块的代码;当前时间的格式为：月+日+点+分+点+分  
\--------代码复制即可用，也可以直接下载git上的demo运行就可以了~git地址：https://github.com/hjqit/Wechat-demo-picker  
\--------Emmmm、代码易懂，有需要的小伙伴看看就知道了；

--------------------

图1：设计图  
![在这里插入图片描述][20191102104711483.png]  
图2：demo效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]

--------------------

上代码中…

.wxml文件

<view>
      <view>{ { month}}月{ { day}}日{ { hour}}点:{ { minute}}分~{ { hours_}}点:{ { minutes_}}分</view>
      
      <view style="border:1px solid red;position: fixed;width: 100%;bottom: 0;">
        <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;text-align: center;" value="{ {value}}" bindchange="bindChange">
          <picker-view-column style="display:none;">
            <view wx:for="{ {years}}" wx:key style="line-height: 50px;display:none;">{ { item}}年</view>
          </picker-view-column>
          <picker-view-column>
            <view wx:for="{ {months}}" wx:key style="line-height: 50px">{ { item}}月</view>
          </picker-view-column>
          <picker-view-column>
            <view wx:for="{ {days}}" wx:key style="line-height: 50px">{ { item}}日</view>
          </picker-view-column>
    
    
    
          <picker-view-column>
            <view wx:for="{ {hours}}" wx:key style="line-height: 50px">{ { item}}点</view>
          </picker-view-column>
          <picker-view-column>
            <view style="line-height: 50px;text-align: center;">:</view>
          </picker-view-column>
          <picker-view-column>
            <view wx:for="{ {minutes}}" wx:key style="line-height: 50px">{ { item}}分</view>
          </picker-view-column>
    
    
          <picker-view-column>
            <view style="line-height: 50px;text-align: center;">~</view>
          </picker-view-column>
    
    
          <picker-view-column>
            <view wx:for="{ {hours_s}}" wx:key style="line-height: 50px">{ { item}}点</view>
          </picker-view-column>
          <picker-view-column>
            <view style="line-height: 50px;text-align: center;">:</view>
          </picker-view-column>
          <picker-view-column>
            <view wx:for="{ {minutes_s}}" wx:key style="line-height: 50px">{ { item}}分</view>
          </picker-view-column>
    
        </picker-view>
      </view>
    </view>

--------------------

.wxss文件略

--------------------

.js文件

[20191102104711483.png]: /images/20210724/4ba822c31f194e2aa8ca9778a58b26db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]: /images/20210724/d759aec604e8497d8e7d94bcc0de9480.png