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

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

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

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

首先上效果图看看:

主要步骤:

第一步:首先自定义选择器组件需要用到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:

/* 日期选择弹框 start */
.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 */

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序如何实现精确的日期时间选择器

    这篇文章主要介绍了微信小程序如何实现精确的日期时间选择器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变. 造成原因:这一点就是由于在bindcolumnchange事件做的值改变处理造成. 处理方法:如果需要确定后再改变值,请将bindcolumnchange事件中的处理操作放到bi

  • 微信小程序之picker日期和时间选择器

    下面来介绍小picker,分三种样式: 默认的自己可以定义数据的 mode="time"是时间选择器 mode="date"是日期选择器 跟其他的一样先来看下picker.wxml <view class="page"> <view class="page__hd"> <text class="page__title">picker</text> <te

  • 微信小程序 滚动选择器(时间日期)详解及实例代码

    微信小程序  滚动选择器(时间日期)详解 微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器. 看下相应的属性: 具体的来看看代码,布局: <view class="section" > <

  • 微信小程序的日期选择器的实例详解

    微信小程序的日期选择器的实例详解 前言: 关于微信小程序中的日期选择器大家用过都会发现有个很大的问题,就是在2月的时候会有31天,没有进行对闰年的判断等各种情况.看了官方文档提供的源码后进行了一些修改,测试修复了上面所说的bug! 下面源码: <!---js---> const date = new Date();//获取系统日期 const years = [] const months = [] const days = [] const bigMonth = [1,3,5,7,8,10,

  • 微信小程序日期时间选择器使用方法

    本文实例为大家分享了精确到秒的微信小程序日期时间选择器,供大家参考,具体内容如下 效果图 实现原理 利用微信小程序的picker组件的多列选择器实现! WXML <view class="tui-picker-content"> <view class="tui-picker-name">时间选择器(选择时分)</view> <picker mode="time" value="{{time}}

  • 微信小程序自定义日期选择器

    日期选择器是我们在写项目的过程中经常遇到的,有需要标题的选择器,也有不需要标题的选择器 今天给大家带来一个自定义的时间选择器,废话不多说,直接上代码 第一步:先创建一个picker的文件夹 第二步 :在wxml中写布局样式 <!--picker/picker.wxml--> <view class="full-box {{isOpen?'cur':''}}">     <!--<view class="modal" bindtap

  • 微信小程序日期选择器实例代码

    /* JS代码部分 */ 3 const date = new Date() const years = [] const months = [] const days = [] const hours = [] const minutes = [] var thisMon = date.getMonth(); var thisDay = date.getDate(); for (let i = 2017; i <= date.getFullYear() + 1; i++) { years.pu

  • 微信小程序 选择器(时间,日期,地区)实例详解

    微信小程序 选择器(时间,日期,地区) 微信小程序 开发由于本人最近学习微信小程序的开发,根据自己的实践结果整理了下结果,对日期选择器,时间选择器,地区选择器做的实例,有不对的地方,希望大家指正. 用微信封装好的控件感觉很好,为我们开发人员省去了很多麻烦.弊端就是不能做大量的自定义.今天试用了选择器. 上gif: 上代码: 1.index.js //index.js //获取应用实例 var app = getApp() Page({ data: { date: '2016-11-08', ti

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

    本文实例为大家分享了微信小程序日期选择器的具体代码,供大家参考,具体内容如下 需求:在小程序开发中,时常会遇到日期选择器.时间选择器或者地区选择器来进行选择的功能.往往设计图上面并不是按部就班沿用官方提供那种控件样式来实现显示,比如:样式会多样化.功能会复杂化.这时我们就要自己写一个适合需求的组件. 下面跟大家分享下我写的一个自定义日期选择器组件 首先上效果图看看: 主要步骤: 第一步:首先自定义选择器组件需要用到picker-view跟picker-view-column.使用方法如下~ <p

  • 微信小程序 省市区选择器实例详解(附源码下载)

    微信小程序 省市区选择器:       最近学习微信小程序,为了检验自己的学习效果,自己做一个小示例,网上搜索下类似的实例,发现这个更好,大家看下. 一.区域间手势滑动切换,标题栏高亮随之切换 思路是:拿当前的current来决定高亮样式 1.监听swiper滚动到的位置: <swiper class="swiper-area" current="{{current}}" bindchange="currentChanged"> cu

  • 微信小程序日历组件calendar详解及实例

    微信小程序日历组件calendar详解及实例 模版使用: src="../cal/calendar.wxml"> is="calendar" data="{{selected_value,days,month,years,lunar_years,lunar_month,lunar_days,selectDateType,l unar_selected_value}}"> JS代码使用: var Calendar = require('

  • 微信小程序 常用工具类详解及实例

    微信小程序 常用工具类详解 前言: 做微信小程序当中,会遇到好多的工具类util.js,这里记载下来以便平常使用 (Ps:建议通过目录查看) -获取日期(格式化) function formatTime(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() var hour = date.getHours() var minute = date.getMinut

  • 微信小程序中input标签详解及简单实例

    微信小程序中input标签详解及简单实例 使用input标签,我们都会,在微信小程序中使用,必定也是可以一下子就会的,但是却有些常用的属性无法按照习惯去使用: 我就用我最常用的来做例子: 一个一个来解读: 首先,我是定义了他的id,这是我们最常用的,所以就配了一个id,毕竟不操作他,又为什么设成输入框呢, 第二,设置他的样式, 第三,设置他的输入类别,以上都是很简单的 第四.使用正则l:哎限定输入为纯数字.这点可能有点不理解,这是对他的keyup事件监听,将不是纯数字的list无视掉.注意,是对

  • 微信小程序Redux绑定实例详解

    微信小程序Redux绑定实例详解 安装 clone或者下载代码库到本地: git clone https://github.com/charleyw/wechat-weapp-redux 将dist/wechat-weapp-redux.js(或者拷贝minify的也可以)文件直接拷贝到小程序的工程中,例如(下面假设我们把第三方包都安装在libs目录下): cd wechat-weapp-redux cp -r dist/wechat-weapp-redux.js <小程序根目录>/libs

  • 微信小程序 Buffer缓冲区的详解

     微信小程序 Buffer缓冲区的详解 JavaScript 语言自身只有字符串数据类型,没有二进制数据类型. 但在处理像TCP流或文件流时,必须使用到二进制数据.因此在 Node.js中,定义了一个 Buffer 类,该类用来创建一个专门存放二进制数据的缓存区. 在 node.js 中,Buffer 类是随 Node 内核一起发布的核心库.Buffer 库为 Node.js 带来了一种存储原始数据的方法,可以让 Node.js 处理二进制数据,每当需要在 Node.js 中处理I/O操作中移动

  • 微信小程序 MD5的方法详解及实例代码

    微信小程序 MD5的方法详解 生成的文件可以放在  utils文件中哦!!! /* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algorithm, as defined in RFC 1321. * Version 1.1 Copyright (C) Paul Johnston 1999 - 2002. * Code also contributed by Greg Holt

  • 微信小程序组件 marquee实例详解

    微信小程序组件 marquee实例详解 1. marquee标签 html是有marquee标签的,可以实现跑马灯效果,但小程序没有,所以要实现.这里考虑使用css3的animation实现. html的marquee是这样使用的. <marquee direction="left" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1"

  • 微信小程序 地图map实例详解

    微信小程序 地图map实例详解 wxml: class="button" bindtap="getlocation" style="margin-top:30px" markers="{{markers}}">定位 longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" co

随机推荐

其他