小程序筛选日期、时间、多选以及清空筛选

本文介绍如何在小程序中实现日期、时间和多选功能,通过展示WXML页面和JS页面的代码实现,并提供了日期选择的效果图。
摘要由CSDN通过智能技术生成

接上一文章遮罩层模板内的功能实现

日期时间选择器Picker

 WXML页面

<block wx:if="{
  {current=='0'}}">
          <view class="limitedAt">
            <picker mode="date" value="{
  {date}}" bindchange="changeDate">
              <input class="picker-detail" disabled placeholder="年-月-日" value='{
  {date}}'></input>
          </picker>
            
          </view>
          <picker mode="time" value="{
  {time}}" bindchange="changeTime">
            <view class='picker-time'>到厂时间:
            <input class="time" disabled placeholder="0:00-23:00" value='{
  {time}}'></input></view>   
          </picker>
        </block>

 JS页面

Page({
  data: {
    current:0,
    date: '',
    time:'',
    begin: '',
    end: '',
  },
// 到厂时间
  changeDate(e) {
    this.setData({
      date: e.detail.value,
      begin:'00:00:00',
    })
  },
  changeTime(e) {
    this.setData({
      time: e.detail.value,
      end:":00"
    })
  },

日期效果图 

<block wx:if="{
  {current=='1'}}">
          <view class="cargoType">
            <view class="in {
  {state=='import'?'active1':''}}"  data-state="import" bindtap="cargoType">进口</view>
            <view class="ex {
  {state=='export'?'active1':''}}" data-state="export" bindtap="cargoType">出口</view>
          </view>
        </block>
<block wx:if="{
  {current=='3'}}">
          <view class="cargoType">
            <view class="in {
  {states=='online'?'active1':''}}"  data-states="online" bindtap="payType">平台垫付</view>     
            <view class="ex {
  {stat
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值