小程序自定义日期组件，不显示今日之后的日期

官方picker可以设置有效时间，有效时间外的禁止选择，但是无法隐藏，于是决定通过picker-view和picker-view-column来手写一个，效果如图：

需要注意的一些地方：

2月份，需要判断是平/闰年；
大小月，30或31天；
还有就是选择本年，控制显示月份，选择本月控制显示日。

组件 wxml

<slot bindtap="handlePicker"></slot><view hidden="{{!visible}}" class="date-picker-cover" bindtap="tapCancel"></view>
<view class="date-picker" animation="{{animationData}}"><view class="btn-area"><view class="btn-cancel" bindtap="tapCancel">取消</view><view class="btn-confirm" bindtap="tapConfirm">确定</view></view><picker-view class="picker-view" value="{{value}}" bindchange="changeDate"><picker-view-column><view wx:for="{{years}}" wx:key="index" class="picker-view-column">{{item}}年</view></picker-view-column><picker-view-column><view wx:for="{{showDate.months}}" wx:key="index" class="picker-view-column">{{item > 9 ? item : '0' + item}}月</view></picker-view-column><picker-view-column><view wx:for="{{showDate.days}}" wx:key="index" class="picker-view-column">{{item > 9 ? item : '0' + item}}日</view></picker-view-column></picker-view></view>

组件 js

Component({/*** 组件的属性列表*/properties: {// 日期 格式 yyyy-MM-DDdateValue: {type: String,observer: function (val) {if (val) {this.initDate(val)}}}},/*** 组件的初始数据*/data: {visible: false,years: [],curDate: {year: null,month: null,day: null},// 全部月、日fullDate: {months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],days: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]},// 显示月、日showDate: {months: [],days: []},value: null,dateArr: null,formatDate: '',animate: null,animationData: null},pageLifetimes: {show() {let animate = wx.createAnimation({duration: 400,timingFunction: 'ease',})this.setData({animate})}},/*** 组件的方法列表*/methods: {// 选择日期handlePicker() {const slideUp = this.data.animate.bottom(0).step()this.setData({animationData: slideUp.export(),// 弹出日期时，显示确定的时间value: this.data.value,visible: true})},// 初始化日期initDate(val) {const date = new Date()const curDate = {year: date.getFullYear(),month: date.getMonth() + 1,day: date.getDate()}let years = []for (let i = 1; i <= curDate.year; i++) {years.push(i)}const value = val.split('-')this.setData({years,curDate,value: value.map(item => Number(item) - 1)})this.computedDate(value)},// 选择日期changeDate(val) {let value = val.detail.value.map(item => item + 1)this.computedDate(value)const month = value[1] > 9 ? value[1] : '0' + value[1]const day = value[2] > 9 ? value[2] : '0' + value[2]this.setData({dateArr: val.detail.value,formatDate: `${value[0]}-${month}-${day}`,})},// 计算月、日computedDate (val) {const { months: fullMonths, days: fullDays } = this.data.fullDateconst year = Number(val[0])const month = Number(val[1])// 闰年：能被 4 整除并且不能被 100 整除，或者被 400 整除const leapYear = !(year % 4) && (year % 100) || !(year % 400) ? true : false// 默认大月 0：2月 1：小月let monthType = nullif (month === 2) {monthType = 0} else if ([4, 6, 9, 11].includes(month)) {monthType = 1}// 本年显示 ≤ 本月let months = year === this.data.curDate.year ? fullMonths.slice(0, this.data.curDate.month) : fullMonthslet days = fullDaysif (year === this.data.curDate.year && month === this.data.curDate.month) {// 本年且本月，显示 ≤ 本日days = fullDays.slice(0, this.data.curDate.day)} else {if (monthType === 0) {// 2月days = leapYear ? fullDays.slice(0, 29) : fullDays.slice(0, 28)} else if (monthType === 1) {// 小月days = fullDays.slice(0, 30)}}this.setData({['showDate.months']: months,['showDate.days']: days})},// 确定tapConfirm() {const slideDown = this.data.animate.bottom('-560rpx').step()this.triggerEvent('change', this.data.formatDate)this.setData({value: this.data.dateArr,animationData: slideDown.export(),visible: false})},// 取消tapCancel() {const slideDown = this.data.animate.bottom('-560rpx').step()this.setData({animationData: slideDown.export(),visible: false})}}
})

组件 wxss

.date-picker-cover {width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, .5);position: fixed;top: 0;left: 0;z-index: 99;
}
.date-picker {width: 100%;position: absolute;left: 0;bottom: 0;background-color: #fff;position: fixed;bottom: -560rpx;left: 0;z-index: 100;
}
.date-picker .btn-area {box-sizing: border-box;width: 100%;display: flex;justify-content: space-between;padding: 18rpx 30rpx;border-bottom: 2rpx solid #f6f6f6;font-size: 32rpx;
}
.date-picker .btn-area .btn-cancel {color: #7f7f7f;
}
.date-picker .btn-area .btn-confirm {color: #07c160;
}
.date-picker .picker-view {width: 100%;height: 480rpx;
}
.date-picker .picker-view .picker-view-column {line-height: 34px;text-align: center;font-size: 32rpx;
}

调用组件

<!-- wxml -->
<view><date-picker dateValue="{{date}}" bindchange="changeDate"><view class="date-content">选择日期：{{date}}</view></date-picker>
</view>

// js
Page({data: {date: '2021-12-02'},onLoad() {},changeDate(val) {this.setData({date: val.detail})}
})

// json
{"usingComponents": {"date-picker": "/components/date-picker/date-picker"}
}

小程序自定义日期组件，不显示今日之后的日期相关推荐

微信小程序自定义日历组件
微信小程序自定义日历组件 wxml <view class="maskWrap" bindtap="close"></view>< ...
小程序自定义键盘组件之车牌号录入
小程序自定义键盘组件之车牌号录入效果图: html: <view bindtap="showAddCarNumFun">点击新增车牌号</view>< ...
微信小程序自定义标签组件component封装、组件生命周期，组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...
微信小程序自定义音频组件，自定义滚动条，单曲循环，循环播放
小程序自定义音频组件,带滚动条摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的而微信小程序API给我们提供的就是这样的而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 a ...
微信小程序自定义波浪组件
最近看到好多app上有波浪背景,有动态的,有静态的,这里是在小程序中用得动态. 先看看效果图:里面的文本是组件内部定义的. 这是用两个svg的图片用css关键帧动画做的效果(这里谢谢子弹短信里前端群的 ...
微信小程序自定义弹窗组件 action-sheet
最近公司在开发短剧小程序,短剧的剧集展示交互需要用到组件 action-sheet,小程序自带的有这个组件,但是这个组件支持的功能比较单一,相当于是一个选择表一样,不能自定义很多内容,只能自定义一个组 ...
uniapp | 小程序自定义头部组件
前言:在开发小程序的过程中,很经常会遇到各种各样的需求,有些顶部没法很单一的只显示标题和纯色的背景,因此就需要按照项目需求自定义. 思路:先根据设计稿在页面中绘制出结构和样式的内容,接着固定的样式值改 ...
java switch小程序,小程序自定义switch组件
如上图,小程序api中的switch组件只能自定义颜色,不能自定义宽高,所以就开始了自己写switch组件. 自定义组件样式 switch组件样式大致如图,样式思路:未选中时为一个长方形有圆角按钮,和 ...
小程序自定义picker组件 picker-view
参考git文档:https://gitee.com/zgp-qz/picker-view-custom-component 使用方法从git上下载下来放到components下 json引用使用 ...
微信小程序-自定义导航组件
一.如何自定义组件从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所有自定义组件相关特性都需要基础库版本 1.6.3 或更高. 开发者可以将页面内的功能模块抽象成自定义组件,以便在 ...

小程序自定义日期组件，不显示今日之后的日期

小程序自定义日期组件，不显示今日之后的日期相关推荐

最新文章

热门文章