展示

js部分

// component/timepick/timepick.js
Component({/*** 组件的属性列表*/properties: {'calednar': {type: Boolean,value: '',observer: function(newVal, oldVal) {// 属性值变化时执行this.setData({if_calednar: newVal})}},},ready: function() {},/*** 组件的初始数据*/data: {if_calednar: true,weeks: ['日', '一', '二', '三', '四', '五', '六'],days: [],year: 0,month: 0,day: 1,time: '00:00',nowday: "",leftIcon: "",nowtime: "",iftoday: "",},/*** 组件的方法列表*/lifetimes: {// 生命周期函数，可以为函数，或一个在methods段中定义的方法名attached: function() {this.dateData()this.ifnowday()this.ifnowtime()},moved: function() {},detached: function() {},},methods: {togglebg(data) {bglayer = {data: data}this.triggerEvent('togglebg', bglayer)},// 日历// 选择时间（日历弹窗）choseTime(e) {var id = e.currentTarget.dataset.idthis.setData({if_calednar: false,timeState: id})},// 日历操作// 用户改变月份changemonth: function(e) {var id = e.currentTarget.dataset.idvar month;var year;var day;month = this.data.monthyear = this.data.yearday = this.data.dayvar date = new Date();var nowyear = date.getFullYear();var nowmonth = date.getMonth() + 1;var nowday = date.getDate()var hour = date.getHours()var minute = date.getMinutes()var nowtime = hour + ":" + minuteif (id == "mius") {month--if (month < 1) {month = 12year--}} else if (id == "add") {month++if (month > 12) {month = 1year++}}if (nowyear == year && nowmonth == month && nowday == day) {this.setData({nowtime: nowtime,iftoday: true})} else {this.setData({iftoday: false})}if (minute < 10) {minute = "0" + minute}if (hour < 10) {hour = "0" + hour}var time = hour + ":" + minutethis.updateDays(year, month, day, time)},// 日历读取dateData: function() {var date = new Date();var days = [];var year = date.getFullYear();var month = date.getMonth() + 1;var day = date.getDate()var hour = date.getHours()var minute = date.getMinutes()if (minute < 10) {minute = "0" + minute}if (hour < 10) {hour = "0" + hour}var time = hour + ":" + minutethis.updateDays(year, month, day, time)},updateDays: function(year, month, day, time) {var days = [];var dateDay, dateWeek;// 根据日期获取每个月有多少天var getDateDay = function(year, month) {return new Date(year, month, 0).getDate();}//根据日期获取这天是周几var getDateWeek = function(year, month) {return new Date(year, month - 1, 1).getDay();}dateDay = getDateDay(year, month)dateWeek = getDateWeek(year, month)//向数组中添加天for (let index = 1; index <= dateDay; index++) {days.push(index)}//向数组中添加，一号之前应该空出的空格for (let index = 1; index <= dateWeek; index++) {days.unshift(0)}this.setData({days: days,year: year,month: month,day: day,time: time,})this.ifnowday()},// 选择某个dayclickdata(e) {var nowyear = this.data.yearvar nowmonth = this.data.monthvar nowday = e.currentTarget.dataset.idvar date = new Date();var year = date.getFullYear();var month = date.getMonth() + 1;var day = date.getDate()var hour = date.getHours()var minute = date.getMinutes()var nowtime = hour + ":" + minuteif (nowyear == year && nowmonth == month && nowday == day) {this.setData({nowtime: nowtime,iftoday: true})} else {this.setData({iftoday: false})}this.setData({day: nowday})},// 选择时间time_select(e) {var time = e.detail.valuethis.setData({time: time})},// 判断时间ifnowtime(e) {var nowyear = this.data.yearvar nowmonth = this.data.monthvar nowday = this.data.dayvar date = new Date();var year = date.getFullYear();var month = date.getMonth() + 1;var day = date.getDate()var hour = date.getHours()var minute = date.getMinutes()var nowtime = hour + ":" + minuteif (nowyear == year && nowmonth == month && nowday == day) {this.setData({nowtime: nowtime,iftoday: true})} else {this.setData({iftoday: false})}},// 日历上的确定按钮sure_btn(e) {var timeStatus = this.data.timeStatevar list = this.data.order_listvar state = this.data.time_statevar year = this.data.yearvar month = this.data.monthvar day = this.data.dayvar time = this.data.timevar date = {}if (month < 10) {month = "0" + month}if (day < 10) {day = "0" + day}date.year = yeardate.month = monthdate.day = daydate.time = timevar timeData = year + "-" + month + "-" + day + "T" + time + ":" + "00"this.setData({if_calednar: true,})var data = {"time": timeData,"if_calednar": true}this.triggerEvent("timeData", data)},// 判断年份大小ifnowday(e) {var date = new Date()var year = this.data.yearvar month = this.data.monthvar nowyear = date.getFullYear()var nowmonth = date.getMonth() + 1var nowday = date.getDate()if (year == nowyear && month <= nowmonth) {this.setData({month:nowmonth,leftIcon: true,day: nowday})} else {this.setData({leftIcon: false})}this.setData({nowday: nowday})},// 失去焦点lostTime(e) {this.setData({if_calednar: true,})var data = {"if_calednar": true}this.triggerEvent("lostTime", data)},},
})

wxss部分

.unlight{opacity: 0.5;
}/* 日历部分 */
.date {display: flex;justify-content: center;align-items: center;margin-top: 50rpx;position: relative;
}
.topYM{width: 210rpx;margin: 50rpx
}
.direction {width: 50rpx;height: 50rpx;position: absolute;top: 0;bottom: 0;margin: auto 0;text-align: center;display: flex;display: -webkit-flex;
}
.leftIcon{width: 14rpx;height: 24rpx;align-self: center;margin: 0 auto;
}
.rightIcon{width: 14rpx;height: 24rpx;align-self: center;margin: 0 auto;
}
.header {display: flex;flex-direction: row;margin:  0 68rpx 48rpx 68rpx;
}.weeks-item-text {width: 100%;font-size: 24rpx;text-align: center;font-weight: bold;opacity: 0.3;
}.body-days {display: flex;flex-direction: row;flex-wrap: wrap;text-align: center;margin: 0 68rpx;
}.days-item {width: 64rpx;height: 64rpx;display: flex;justify-content: center;align-content: center;margin-top: 10rpx;margin-left: 22rpx;
}.days-item-text {width: 64rpx;font-size: 32rpx;color: #333;align-self: center;
}
.light{background-color: rgba(96, 195, 255, 1);color: white;
}
.sure_btn{font-size: 30rpx;color: rgba(96, 195, 255, 1);font-weight: bold;position: absolute;top: 40rpx;right: 40rpx;z-index: 9;
}
.calednar{position: fixed;z-index: 1997;bottom: 160rpx;background-color: #fff;height: 700rpx;width: 100%;border-radius: 20rpx 20rpx 0 0;
}
.calednarImg{width: 34rpx;height: 32rpx;position: absolute;right: 20rpx;top: 0;bottom: 0;margin: auto 0;
}
.bg_layer{position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 1996;background-color: rgba(51, 51, 51, 1);opacity: 0.3;
}
.time{width: 100%;height: 160rpx;background-color: rgba(245, 245, 245, 1);position: fixed;bottom: 0;z-index: 1999;text-align: center;
}
.time_text{font-size: 48rpx;margin-top: 36rpx;letter-spacing: 6rpx;
}/* 输入框的占位符样式 */
.placeholderClass{color: rgba(51, 51, 51, 0.3);}.inputClass{width: 316rpx;height: 64rpx;border: 2rpx solid #E2E8ED;padding: 0 20rpx;font-size: 24rpx;font-weight: bold;color: #333;
}

wxml部分

<!-- 日历时间弹窗 -->
<view bindtouchmove='aaa' hidden='{{if_calednar}}'><view class='bg_layer' bindtouchmove='_aaa' bindtap="lostTime"></view><view class='calednar'><view class='sure_btn' bindtap='sure_btn'>确定</view><view class="date"><view class="direction" data-id="mius" bindtap='changemonth' hidden="{{leftIcon}}" style="left:150rpx"><image class="leftIcon" src='/images/left.png' /></view><label class="topYM">{{year}}年{{month}}月</label><view class="direction" data-id="add" bindtap='changemonth' style="right:150rpx"><image class="rightIcon" src='/images/right.png'/></view></view><view class="header"><block wx:for="{{weeks}}" wx:key="index"><text class="weeks-item-text">{{item}}</text></block></view><view class="body-days"><block wx:for="{{days}}" wx:key="index"><view class="days-item {{item==day?'light':''}}"><view class="days-item-text {{item==day?'light':''}} {{leftIcon==true?(item<nowday?'unlight':''):''}}" bindtap="{{leftIcon==true?(item>=nowday?'clickdata':''):'clickdata'}}" data-id='{{item}}' wx:if="{{item>0}}">{{item}}</view></view></block></view></view><view class="time"><picker mode="time" value="{{time}}" start="{{iftoday==true?nowtime:''}}" end="" bindchange="time_select" bindtap="ifnowtime"><view class="time_text">{{time}}</view></picker></view>
</view>

页面使用

<timepick calednar="{{if_calednar}}" bind:timeData="timeData"></timepick>

补充说明

该组件实现比较久远了，可能有部分地方还没有完善，欢迎大家评论区提出来

小程序日历+时间选择组件相关推荐

微信小程序日历签到组件(原创)
微信小程序日历签到组件(原创) 开发原因: 为满足定制需要,市面上又找不到车子和轮子,干脆自己撸了并开源分享有需要的人用其他说明: 该组件js日期均已使用yyyy/MM/dd格式连接解决ios不兼容 ...
教你如何写一个符合自己需求的小程序日历组件
1|0 前言很多时候,我们生活中会有各种打卡的情况,比如 keep 的运动打卡.单词的学习打卡和各种签到打卡或者酒店的入住时间选择,这时候就需要我们书写一个日历组件来处理我们这种需求. 但是更多时候 ...
手把手教你写一个微信小程序日历组件
今天我们一起写一个微信小程序日历组件微信小程序日历组件 github.com/749264345/w- 好,我们先看一下要实现的模样,如下图由以上截图我们可以看到 1.日历可以通过按钮[切换展示效 ...
自已撸的一个小程序日历组件
? 小程序日历组件概述这是一款简单易用的小程序日历组件,实现了选择开始时间和结束时间的功能.克隆 maxrisk/calendar 之后可在微信开发者工具中打开查看示例. 项目地址:https:/ ...
适配mpvue平台的的微信小程序日历组件mpvue-calendar
mpvue-calendar 基于vue-calendar的适配mpvue平台的的微信小程序日历组件预览安装 npm i mpvue-calendar 使用 import Calendar fro ...
小程序记账小程序--日历组件开发
最近接了女朋友的需求,做一个我们的记账小程序,考虑到使用日历组件,在网上找了一圈没找到满意的.于是觉得自己弄一个.成品如下: 显示前后一个月,支持年月. 设置组件属性组件方法源码=> laq ...
移动端日历插件_小程序日历组件开发教程！
微信小程序是我们生活中很常用的工具,在一些生活服务方面尤其有用,比如购物.点餐.预定,甚至是查看天气.日历等.小程序日历是很方便也很容易制作的,那么具体怎么做一个微信小程序日历呢?你可以下载安装微信官 ...
小程序解决方案 Westore - 组件、纯组件、插件开发
数据流转先上一张图看清 Westore 怎么解决小程序数据难以管理和维护的问题: 非纯组件的话,可以直接省去 triggerEvent 的过程,直接修改 store.data 并且 update,形 ...
微信小程序日历加课表项目
最近花了不少时间做了个微信小程序,期间遇到了挺多技术问题的,写个博客记录一下,我先上小程序使用图片! 1.进入小程序首先要登录才能添加行程和查看行程 2.登录成功后 3.首页日历日期是可点击,点击后是 ...

小程序日历+时间选择组件

小程序日历+时间选择组件

展示

js部分

wxss部分

wxml部分

页面使用

补充说明

小程序日历+时间选择组件相关推荐

最新文章

热门文章