广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序日期选择器使用详解
  • 830

0
分享到

微信小程序日期选择器使用详解

2024-04-02 19:04:59 830人浏览 泡泡鱼
摘要

本文实例为大家分享了微信小程序日期选择器的具体代码，供大家参考，具体内容如下 需求：在小程序开发中，时常会遇到日期选择器、时间选择器或者地区选择器来进行选择的功能。往往设计图上面并不

本文实例为大家分享了微信小程序日期选择器的具体代码，供大家参考，具体内容如下

需求：在小程序开发中，时常会遇到日期选择器、时间选择器或者地区选择器来进行选择的功能。往往设计图上面并不是按部就班沿用官方提供那种控件样式来实现显示，比如：样式会多样化、功能会复杂化。这时我们就要自己写一个适合需求的组件。

下面跟大家分享下我写的一个自定义日期选择器组件

首先上效果图看看:

主要步骤：

第一步：首先自定义选择器组件需要用到picker-view跟picker-view-column。使用方法如下~

<picker-view indicator-class="picker-indicator" value="{{pickerIndexList}}" bindchange="bindChangeDate">
    <picker-view-column>
        <view wx:for="{{yearList}}" wx:key="index" class="{{pickerIndexList[0]==index?'txt-active':''}}">{{item}}年</view>
    </picker-view-column>
    <picker-view-column>
        <view wx:for="{{monthList}}" wx:key="index" class="{{pickerIndexList[1]==index?'txt-active':''}}">{{item}}月</view>
    </picker-view-column>
    <picker-view-column>
        <view wx:for="{{dayList}}" wx:key="index" class="{{pickerIndexList[2]==index?'txt-active':''}}">{{item}}日</view>
    </picker-view-column>
</picker-view>

第二步：打开选择器时就要获取到当前的年月日，我这里使用了for遍历直接生成年份数组跟月份数组。注：天数根据年份跟月份动态生成

//獲取當前日期
  getCurrentDate: function (e) {
    var that = this;
    var yearList = [], monthList = [], dayList = [];
    for (var i = new Date().getFullYear(); i <= 2050; i++) {//年份
      yearList.push(i);
    }
    for (var i = 1; i <= 12; i++) {//月份
      monthList.push(i);
    }
    var myDate = new Date();
    var currentYearIndex = yearList.findIndex(o => o == myDate.getFullYear());
    var currentMonthIndex = monthList.findIndex(o => o == myDate.getMonth() + 1);
    var dayList = that.getDayList(currentYearIndex, currentMonthIndex);//天
    var currentDayIndex = dayList.findIndex(o => o == myDate.getDate());
    var pickerIndexList = that.data.pickerIndexList;
    pickerIndexList[0] = currentYearIndex;
    pickerIndexList[1] = currentMonthIndex;
    pickerIndexList[2] = currentDayIndex;
    app.globalData.dateIndexList = pickerIndexList;
    that.setData({
      yearList,
      monthList,
      dayList,
    })
  },

第三步：在选择的过程中，选择器有个改变事件，当年份或者月份改变的时候，天数要随之变化

//日期选择改变事件
 bindChangeDate: function (e) {
    var that = this;
    var pickerColumnList = e.detail.value;
    that.setData({
      dayList: that.getDayList(pickerColumnList[0], pickerColumnList[1]),
      pickerIndexList: pickerColumnList,
    })
 },

有个样式的小问题：如选中行背景色写在picker-view控件中，则会出现滚动时背景色也会随着动，体验不好。所以我这里写了一个占位符，设置背景色，滚动选择时背景色就不会受到影响

<!-- 选中行背景色 start-->
<view class="top-background">
    <view></view>
    <view></view>
    <view></view>
</view>
<!-- 选中行背景色 end-->

下面是全部代码~~

wxml：

<!-- 自定义选择日期层 start -->
<view class="date-layer" wx:if="{{isshowDateLayer}}" catchtouchmove="catchTouchMove">
    <view class="layer-box">
        <view class="box-top">
            <!-- 选中行背景色 start-->
            <view class="top-background">
                <view></view>
                <view></view>
                <view></view>
            </view>
            <!-- 选中行背景色 end-->
            <picker-view indicator-class="picker-indicator" value="{{pickerIndexList}}" bindchange="bindChangeDate">
                <picker-view-column>
                    <view wx:for="{{yearList}}" wx:key="index" class="{{pickerIndexList[0]==index?'txt-active':''}}">{{item}}年</view>
                </picker-view-column>
                <picker-view-column>
                    <view wx:for="{{monthList}}" wx:key="index" class="{{pickerIndexList[1]==index?'txt-active':''}}">{{item}}月</view>
                </picker-view-column>
                <picker-view-column>
                    <view wx:for="{{dayList}}" wx:key="index" class="{{pickerIndexList[2]==index?'txt-active':''}}">{{item}}日</view>
                </picker-view-column>
            </picker-view>
        </view>
        <view class="box-bottom">
            <button class="btn-confirm" bindtap="bindConfirmDate">確定</button>
            <button class="btn-cancel" bindtap="bindCancelDate">取消</button>
        </view>
    </view>
</view>
<!-- 选择日期层 end -->

js：


  data: {
    pickerIndexList: [0, 0, 0],//日期选择器下标
    isShowDateLayer: false,//是否显示日期弹层
    txtDate: '請选择提貨日期',//选中日期
    isSeltDate: false,//是否选择日期
  },

  // 截获竖向滑动
  catchTouchMove: function (res) {
    return true;
  },

  //获取天数列表
  getDayList: function (year, month) {
    var that = this;
    var dayList;
    switch (month + 1) {
      case 1:
      case 3:
      case 5:
      case 7:
      case 8:
      case 10:
      case 12: dayList = that.getDayNum(31);
        break;
      case 4:
      case 6:
      case 9:
      case 11: dayList = that.getDayNum(30);
        break;
      case 2: dayList = that.getDayNum((that.data.yearList[year] % 4 == 0 && that.data.yearList[year] % 100 != 0 || that.data.yearList[year] % 400 == 0) ? 29 : 28);
        break;
    }
    return dayList;
  },

  //获取天数
  getDayNum: function (num) {
    var dayList = [];
    for (var i = 1; i <= num; i++) {
      dayList.push(i);
    }
    return dayList;
  },

  //打开选择日期弹层
  bindOpenDateLayer: function (e) {
    var that = this;
    var pickerIndexList = that.data.pickerIndexList;
    that.setData({
      isShowDateLayer: !that.data.isShowDateLayer,
      dayList: that.getDayList(pickerIndexList[0], pickerIndexList[1]),
    })
  },

  //日期选择改变事件
  bindChangeDate: function (e) {
    var that = this;
    var pickerColumnList = e.detail.value;
    that.setData({
      dayList: that.getDayList(pickerColumnList[0], pickerColumnList[1]),
      pickerIndexList: pickerColumnList,
    })
  },

  //选择日期弹层确定按钮
  bindConfirmDate: function (e) {
    var that = this;
    var pickerIndexList = that.data.pickerIndexList;
    var txtDate = that.data.yearList[pickerIndexList[0]] + '-' + that.data.monthList[pickerIndexList[1]] + '-' + that.data.dayList[pickerIndexList[2]];
    that.setData({
      isShowDateLayer: false,
      pickerIndexList,
      txtDate,
      isSeltDate: true,
    })
  },

  //选择日期弹层取消按钮
  bindCancelDate: function (e) {
    var that = this;
    var pickerIndexList = that.data.pickerIndexList;
    that.setData({
      isShowDateLayer: !that.data.isShowDateLayer,
    })
    var yearList = that.data.yearList;
    var monthList = that.data.monthList;
    var txtDate = that.data.txtDate;
    var yearIndex = yearList.findIndex(o => o == parseInt(txtDate.slice(0, txtDate.indexOf('-'))));//年份下标
    var monthIndex = monthList.findIndex(o => o == parseInt(txtDate.slice(txtDate.indexOf('-') + 1, txtDate.lastIndexOf('-'))));//月份下标
    var dayList = that.getDayList(yearIndex, monthIndex);//天数
    if (that.data.isSeltDate) {//选择过日期
      if (txtDate == (yearList[pickerIndexList[0]] + '-' + monthList[pickerIndexList[1]] + '-' + dayList[pickerIndexList[2]]))
        that.setData({ pickerIndexList })
      else
        that.setData({ pickerIndexList: [yearIndex, monthIndex, dayList.findIndex(o => o == parseInt(txtDate.slice(txtDate.lastIndexOf('-') + 1, txtDate.length)))] })
    } else {//未选择过日期
      that.setData({
        pickerIndexList: app.globalData.dateIndexList,
      })
    }
  },

  //阻止冒泡事件
  catchLayer: function (e) { },

  //獲取當前日期
  getCurrentDate: function (e) {
    var that = this;
    var yearList = [], monthList = [], dayList = [];
    for (var i = new Date().getFullYear(); i <= 2050; i++) {//年份
      yearList.push(i);
    }
    for (var i = 1; i <= 12; i++) {//月份
      monthList.push(i);
    }
    var myDate = new Date();
    var currentYearIndex = yearList.findIndex(o => o == myDate.getFullYear());
    var currentMonthIndex = monthList.findIndex(o => o == myDate.getMonth() + 1);
    var dayList = that.getDayList(currentYearIndex, currentMonthIndex);//天
    var currentDayIndex = dayList.findIndex(o => o == myDate.getDate());
    var pickerIndexList = that.data.pickerIndexList;
    pickerIndexList[0] = currentYearIndex;
    pickerIndexList[1] = currentMonthIndex;
    pickerIndexList[2] = currentDayIndex;
    app.globalData.dateIndexList = pickerIndexList;
    that.setData({
      yearList,
      monthList,
      dayList,
    })
  },

  
  onLoad: function (options) {
    var that = this;
    that.getCurrentDate();//獲取當前時間
    that.setData({
      pickerIndexList: that.data.pickerIndexList
    })
  },

wxss：


.main .date-layer {
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.65);
  position: fixed;
  top: 0;
  z-index: 20;
}

.date-layer .layer-box {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
}

.date-layer .layer-box .box-top {
  padding: 30rpx 0;
  position: relative;
}

.date-layer .layer-box picker-view {
  height: 120px;
  width: 88%;
  margin: 0 auto;
}

.date-layer .layer-box .picker-indicator {
  height: 40px;
  line-height: 40px;
}

.date-layer .layer-box picker-view-column view {
  line-height: 42px;
  text-align: center;
  width: 96%;
  margin: 0 auto;
}

.date-layer .layer-box .box-top .top-background {
  height: 80rpx;
  width: 88%;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transfORM: translate(-50%, -50%);
  display: flex;
}

.layer-box .box-top .top-background view {
  height: 100%;
  width: 96%;
  margin: 0 auto;
  background: rgba(195, 218, 49, 0.12);
  border-top: 2rpx solid #D9E87D;
  border-bottom: 2rpx solid #C3DA31;
  margin: 0 4rpx;
  box-sizing: border-box;
}

.date-layer .layer-box .box-bottom {
  display: flex;
}

.date-layer .layer-box .box-bottom button {
  margin: 0;
  padding: 0;
  width: 50%;
  border-radius: 0;
  border: none;
  background: #fff;
  height: 100rpx;
  line-height: 100rpx;
  font-size: 34rpx;
  border-top: 2rpx solid #D8D8D8;
}

.date-layer .layer-box .box-bottom .btn-confirm {
  border-right: 1rpx solid #D8D8D8;
  color: #C3DA31;
}

.date-layer .layer-box .box-bottom .btn-cancel {
  border-left: 1rpx solid #D8D8D8;
  color: #B1B1B4;
}

介绍到这里就可以实现一个不管是自己还是设计图都想要的选择器啦

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 微信小程序日期选择器使用详解

本文链接: https://www.lsjlt.com/news/154016.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 微信小程序日期选择器使用详解
    本文实例为大家分享了微信小程序日期选择器的具体代码，供大家参考，具体内容如下 需求：在小程序开发中，时常会遇到日期选择器、时间选择器或者地区选择器来进行选择的功能。往往设计图上面并不...
    99+
    2022-11-13
  • 微信小程序日期选择器如何使用
    本文小编为大家详细介绍“微信小程序日期选择器如何使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“微信小程序日期选择器如何使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。需求：在小程序开发中，时常会遇到日期选...
    99+
    2023-07-02
  • 微信小程序自定义日期选择器
    日期选择器是我们在写项目的过程中经常遇到的，有需要标题的选择器，也有不需要标题的选择器 今天给大家带来一个自定义的时间选择器，废话不多说，直接上代码 第一步：先创建一个picker的...
    99+
    2022-11-12
  • 在微信小程序使用picker实现日期选择
    微信小程序开发项目中，或多或少要使用时间选择器picker实现日期选择。选择开始日期和结束日期 而且选择开始时间后，选择结束时间，能够选择的日期不能比开始日期还要早。要实现以上效果可这样写： 在wxml中写 ...
    99+
    2023-08-25
    微信小程序 小程序 前端
  • 微信小程序实现日期范围选择
    本文实例为大家分享了微信小程序实现日期范围选择的具体代码，供大家参考，具体内容如下 样式如下： 分别点击开始日期和结束日期选择时间（底部弹框）： date.wxml:  <...
    99+
    2022-11-13
  • 微信小程序中日历/日期选择插件怎么用
    这篇文章给大家分享的是有关微信小程序中日历/日期选择插件怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。具体内容如下wxml<view class="...
    99+
    2022-10-19
  • 实现微信小程序中的日期选择器效果
    随着微信小程序的广泛应用，越来越多的开发者需要实现日期选择器效果来提高用户体验。本文将介绍如何在微信小程序中实现日期选择器效果，并给出具体的代码示例。一、实现思路实现日期选择器效果的基本思路是：首先在 WXML 中建立日期选择器组件，通过 ...
    99+
    2023-11-21
    微信小程序 实现 日期选择器
  • 微信小程序如何实现日期范围选择
    本篇内容介绍了“微信小程序如何实现日期范围选择”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！样式如下：分别点击开始日期和结束日期选择时间（底...
    99+
    2023-07-02
  • 微信小程序自定义日期选择器的示例分析
    这期内容当中小编将会给大家带来有关微信小程序自定义日期选择器的示例分析，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。日期选择器是我们在写项目的过程中经常遇到的，有需要标题的选择器，也有不需要标题的选择器今...
    99+
    2023-06-26
  • 微信小程序实现日期时间筛选器
    开发微信小程序过程中，有个需求需要用到日期时间筛选器，查看微信官方文档后，发现官方文档的picker筛选器只能单独支持日期或者是时间，所以为了实现需求自己参考企业微信封装了个日期时间...
    99+
    2022-11-13
  • 微信小程序选择器怎么用
    这篇文章主要介绍“微信小程序选择器怎么用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“微信小程序选择器怎么用”文章能帮助大家解决问题。页面结构<!--pages/warn/index.wxml...
    99+
    2023-06-26
  • 微信小程序怎么使用picker实现时间和日期选择框功能
    这篇文章主要介绍微信小程序怎么使用picker实现时间和日期选择框功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！具体如下：1、效果展示2、关键代码① index.wxml<...
    99+
    2022-10-19
  • 小程序日期（日历）时间 选择器组件
    封装一个小程序日期（日历）时间 选择器组件 简要说明： 一共两个版本 ，date-time-picker 和 date-time-picker-plus. date-time-picker 弹窗层...
    99+
    2023-09-01
    小程序 javascript ui
  • 微信小程序多项选择器checkbox
    本文实例为大家分享了微信小程序多项选择器checkbox的具体代码，供大家参考，具体内容如下 第一的话就是我们的相关的布局文件： <view class="container...
    99+
    2022-11-13
  • 微信小程序实现课程选择器
    本文实例为大家分享了微信小程序实现课程选择器的具体代码，供大家参考，具体内容如下 话不多说，直接上效果图 代码如下 wxml <view class="urg_input"&...
    99+
    2022-11-13
  • 微信小程序复选框组件使用详解
    在工作中频繁用到复选框，于是自己写了个组件，增加其复用性，提高效率。先看效果图： 提交后得到一个选中项的id组成的数组 下边直接上代码： 代码地址为：components/chec...
    99+
    2022-11-13
  • 微信小程序自定义多列选择器使用
    本文实例为大家分享了微信小程序自定义多列选择器的具体代码，供大家参考，具体内容如下 项目需要，需要实现一个多列选择器，在用户确定之前，无论列表如何转，都不会影响已确定值的显示，只要用...
    99+
    2022-11-13
  • 微信小程序多项选择器checkbox怎么使用
    这篇文章主要介绍“微信小程序多项选择器checkbox怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“微信小程序多项选择器checkbox怎么使用”文章能帮助大家解决问题。第一的话就是我们的相...
    99+
    2023-07-02
  • 微信小程序选择器组件picker怎么使用
    本篇内容介绍了“微信小程序选择器组件picker怎么使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！picker组件的定义picker组件...
    99+
    2023-07-05
  • 微信小程序日历弹窗选择器的示例分析
    小编给大家分享一下微信小程序日历弹窗选择器的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！先上一个效果图：时间改为5月份...
    99+
    2022-10-19
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作