小程序日期（日历）时间选择器组件

封装一个小程序日期（日历）时间选择器组件

简要说明：
一共两个版本，date-time-picker 和 date-time-picker-plus.
date-time-picker 弹窗层是基于 vant-weapp 的 van-popup 组件实现的
date-time-picker-plus 弹窗层是基于小程序自带的 page-container 组件来实现的
*注意：date-time-picker 需要下载 vant-weapp 组件库配合一起使用，date-time-picker-plus 可以直接在小程序里面使用

首先看一下效果图

组件代码

两个版本代码几乎一样，只是弹窗层用的不一样，这里我就用基于 vant-weapp UI一起使用的版本来写

wxml 中

<view class="date-time-picker-box"><van-popup show="{{ show }}" zIndex="9999" round position="bottom" custom-style="border-radius:16px 16px 0 0;min-height:355px;max-height:400px;" bind:close="handleCancel"><view class="date-time-picker-title"><view class="date-time-picker-nav"><view bindtap="handleChangeTag" data-index="0" class="tag date-tag {{currentIndex == 0 ? 'active' : ''}}">{{year}}年{{month}}月{{day}}日</view><view bindtap="handleChangeTag" data-index="1" class="tag time-tag {{currentIndex == 1 ? 'active' : ''}}">{{hour}}:{{minute}}</view><view class="date-time-line" style="left:{{left}}px;width: {{width}}px;"></view></view><button bindtap="handleConfirm" class="date-picker-oper-btn">确定</button></view><view class="date-time-picker-content"><!-- 日历主体 --><swiper current="{{currentIndex}}" style="height:100%;"><swiper-item catchtouchmove="catchtouchmove"><view class="swiper-item "><!-- 日历组件 --><calendar bindselectDay="selectDay" bindgetDateList="getDateList" vertical="{{vertical}}"></calendar></view></swiper-item><swiper-item catchtouchmove="catchtouchmove"><view class="swiper-item "><div class="date-time-item"><picker-view indicator-style="height: 50px;" style="width: 100%; height: 200px;text-align:center;" value="{{value}}" bindpickstart="bindpickstart" bindpickend="bindpickend" bindchange="bindChange"><picker-view-column><view wx:for="{{hours}}" wx:key="*this" style="line-height: 50px">{{item}}时</view></picker-view-column><picker-view-column><view wx:for="{{minutes}}" wx:key="*this" style="line-height: 50px">{{item}}分</view></picker-view-column></picker-view></div></view></swiper-item></swiper></view></van-popup>
</view>

wxss 中

.date-time-picker-box .date-time-picker-title {display: flex;align-items: center;justify-content: space-between;padding: 0rpx 48rpx;height: 112rpx;box-sizing: border-box;border-bottom: 2rpx solid #E5E3E3;max-height: 400px;/* overflow: hidden; */
}.date-time-picker-box .date-time-picker-title .title-txt {font-size: 17px;font-weight: 500;color: #1F1E1E;
}.date-time-picker-box .date-time-picker-title .date-picker-oper-btn {width: 104rpx;height: 64rpx;line-height: 64rpx;text-align: center;font-size: 28rpx;border-radius: 8rpx;font-weight: 500;margin: 0;padding: 0;color: var(--themeTxtColor);background-color: var(--themeColor);
}.date-time-picker-box .date-time-picker-title .cancel-btn {color: #5C5959;background-color: #fff;text-align: left;
}.date-time-picker-box .date-time-picker-title .date-time-picker-nav {position: relative;display: flex;align-items: center;font-weight: 500;color: #8F8D8D;height: 100%;
}.date-time-picker-box .date-time-picker-nav .date-tag {margin-right: 32rpx;
}.date-time-picker-box .date-time-picker-nav .tag {height: 100%;display: flex;align-items: center;justify-content: center;
}.date-time-picker-box .date-time-picker-nav .tag.active {color: #1F1E1E;
}.date-time-picker-box .date-time-picker-nav .date-time-line {position: absolute;bottom: 0;width: 40rpx;height: 4rpx;background-color: #5C5959;transition: all 0.3s linear;
}.date-picker-btn-box {display: flex;font-weight: 600;margin-top: 40rpx;color: var(--themeColor);justify-content: space-around;
}.date-time-picker-content {height: 600rpx;box-sizing: border-box;
}

json 中

{"component": true,"usingComponents": {"van-popup": "@vant/weapp/popup/index","calendar":"./calendar/index"}
}

js 中

const date = new Date(); // 获取系统日期
var getYear = date.getFullYear(),getMonth =date.getMonth() + 1 < 10? "0" + (date.getMonth() + 1): date.getMonth() + 1,getDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(),isScroll = false;
Component({properties: {show: {// 控制弹窗显示和隐藏type: Boolean,value: false,},vertical: {// 是否垂直滑动type: Boolean,value: false,},/*** type 时间类型 分钟， 支持两种类型 time 和 part , 默认是part* time : 2023-02-03 09:00  正常的日期时间 （例如： 09:30 、11:10 、12:36 ...）* part :  2023-02-03 09:00  分钟只包含 00 和 30 （例如： 09:30 、11:00 、12:30 ...）*/type: {type: String,value: "part", // time 和 part},},data: {year: getYear, // 当前已选年份，默认是当年month: getMonth, // 当前已选月份，默认是当月day: getDate, // 当前已选天，默认是当天hour: "09", // 当前已选小时， 默认 09 点minute: "00", // 当前已选分钟，默认00hours: [], // 时间选择器，存放的小时数组 0 - 23minutes: [], // 时间选择器，存放的分钟数组 00 和 30 或者 00 - 59value: [0, 0], // 时间选择器，当前选择时间 索引currentIndex: 0, // tab导航当前索引left: 0, // tab导航 底部线条 当前离左侧位置 距离width: 123, // tab导航 底部线条 当前 宽度firstEnter: true, // 是否第一次打开， 默认true},lifetimes: {attached: function () {this.initDateTimePicker();},moved: function () {},detached: function () {},},methods: {// 日期改变的回调selectDay({ detail }) {console.log(detail, "selectDay detail");let { year, month, day } = detail;month = month > 9 ? month : "0" + month;day = day > 9 ? day : "0" + day;if (!this.data.firstEnter) {setTimeout(() => {this.setData({ currentIndex: 1 });this.changeline();}, 300);}this.setData({ year, month, day, firstEnter: false });},// 切换导航handleChangeTag(e) {this.setData({currentIndex: e.currentTarget.dataset.index,firstEnter: false,});this.changeline();},// 渲染横线位置的方法changeline() {let _this = this;// SelectorQuery.in(Component component): 将选择器的选取范围更改为自定义组件 component 内let query = wx.createSelectorQuery().in(this);// select() 在当前页面下选择第一个匹配选择器 selector 的节点// boundingClientRect() 添加节点的布局位置的查询请求。相对于显示区域，以像素为单位query.select(".active").boundingClientRect();// SelectorQuery.exec(function callback) 执行所有的请求// 请求结果按请求次序构成数组，在callback的第一个参数中返回query.exec(function (res) {// console.log(res);_this.setData({left: res && res[0].left - 24,width: parseInt(res[0].width),});});},/**** 滚动选择时触发change事件，* 可以查看小程序官方文档了解*/bindChange(e) {const val = e.detail.value;this.setData({hour: this.data.hours[val[0]],minute: this.data.minutes[val[1]],});},// 滚动开始bindpickstart() {isScroll = true;},//滚动结束bindpickend() {isScroll = false;},// 点击取消按钮，关闭日期选择器handleCancel() {this.setData({ show: false });},// 点击确定按钮handleConfirm() {let { year, month, day, hour, minute } = this.data;// console.log(year, month, day, hour,  minute)// 判断用户选择时间滚动是否结束，解决 picker-view bindChange 延迟问题if (isScroll) return;const timeStr =year + "-" + month + "-" + day + " " + hour + ":" + minute;this.triggerEvent("onSelectDate", timeStr);this.setData({ show: false, currentIndex: 0 });this.changeline();},// 初始化 picker 时间数据initDateTimePicker() {let hours = [],minutes = [];// 存放小时的数组for (let i = 0; i <= 23; i++) {if (i < 10) {i = "0" + i;}hours.push(i);}// 存放分钟的数组if (this.data.type === 'time') {for (let i = 0; i <= 59; i++) {if (i < 10) { i = '0' + i }minutes.push(i)}} else {minutes = ['00', '30']}this.setData({ hours, minutes });this.setData({ value: [9, 0] });},// 加载日历数据getDateList() {// 防止滑动时 tab导航切换到时间模块this.setData({ firstEnter: true });},// 禁止 日期时间 swiper 滑动catchtouchmove() {return false;},},
});

简要说明：
在 index.wxml 文件中，会有一个日历组件
<calendar bindselectDay="selectDay" bindgetDateList="getDateList" vertical="{{vertical}}"></calendar>
这个组件会放在 date-time-picker 组件目录下，这里我就不把代码贴出来了，可以直接去我的远程仓库去拉取。
组件代码仓库地址：Gitee | Github 或者直接复制下面的链接直接下载代码

Gitee 远程仓库下载链接

git clone https://gitee.com/junfeng535/wx-date-time-picker.git

Github 远程仓库下载链接

git clone https://github.com/junfeng-git/wx-date-time-picker.git

小程序日期（日历）时间选择器组件相关推荐

小程序日期加时间筛选组件
小程序日期加时间筛选组件新建component->date-time-picker .wxml <picker mode="multiSelector" class= ...
创建微信小程序日期和时间的组件
效果如下微信小程序 1.首先创建一个components,接着创建一个文件picker 2.在picker.wxml文件里写入: <picker mode="multiSelecto ...
微信小程序日期与时间选择器
最近在开发一款微信小程序,需要用到里面的时间选择器(picker),根据它本身的特点以及需要开发的内容,我对时间选择器做了一个简单的demo,大家可以看一下效果图. 效果图: 在微信小程序中,文件按照 ...
微信小程序 - 日期(起止)选择器组件
原文链接传送门 2019-01-03 : 修复了日期day-1,新增了年月日(除去时分秒),删除了不必要的touchmove 新增: column: ""(年月日) 配置: pi ...
【微信小程序】日历弹窗选择器
应公司需求,写了一个弹窗日历选择器,感觉用着还不错,封装了一下,分享给大家,希望大家有什么意见可以指出来相互交流共同改进! 先上一个效果图:(当天日期为2018-4-18) 时间改为5月份的效果图: ...
微信小程序尺子样式滚动选择器组件
先上效果图: 背景色可以自定义,大概样式就是这样. 上组件代码: Component({/*** 组件的属性列表*/properties: {icon_path: {type: String,valu ...
微信小程序的年月日年月日选择器基于picker的mode = multiSelector
微信小程序的双时间选择器基于picker的mode = multiSelector 废了好大的劲写了这么一个组件,叉会腰~ 其实这段代码并不精炼,不过本人也是个刚工作一年多的小菜鸟,就先放在这里,有想 ...
微信小程序日期时分组件(年月日时分)--复制即用
微信小程序日期组件(年月日时分)–复制即用如图所示效果第一步新建picker组件文件 1,pickerTime.js组件代码内容 // component/pickerTime/pickerTim ...
微信小程序自定义日历组件
微信小程序自定义日历组件 wxml <view class="maskWrap" bindtap="close"></view>< ...

小程序日期（日历）时间选择器组件

封装一个小程序日期（日历）时间选择器组件

首先看一下效果图

组件代码

小程序日期（日历）时间选择器组件相关推荐

最新文章

热门文章

小程序日期（日历）时间 选择器组件

封装一个小程序日期（日历）时间 选择器组件

首先看一下效果图

组件代码

小程序日期（日历）时间 选择器组件相关推荐

最新文章

热门文章

小程序日期（日历）时间选择器组件

封装一个小程序日期（日历）时间选择器组件

小程序日期（日历）时间选择器组件相关推荐