微信小程序周日历制作

在小程序开发中，经常会遇到特殊日历的制作，下面开源一个在日常项目用到的日历demo.代码可直接复制，即可看到如下效果：

一、效果

二、代码部分

clener.js文件内容

// pages/services/servicesdetail/serdetails.tsPage({/*** 页面的初始数据*/data: {titleData: "",services_tags: "服务介绍",diseaseList: [{ diseaseCode: "0", diseaseName: "08:00~10:00", checked: false },{ diseaseCode: "1", diseaseName: "10:00~12:00", checked: false },{ diseaseCode: "2", diseaseName: "14:00~15:30", checked: false },{ diseaseCode: "3", diseaseName: "15:30~17:00", checked: false },],thisDate: 2, //日期选中nowDate: '',temp: '',oneData: "#06c6ad",//日期隐藏显示标记twoData: "#f0f0f0",threeData: "#f0f0f0",fourData: "#f0f0f0",fiveData: "#f0f0f0",sixData: "#f0f0f0",sevenData: "#f0f0f0",firstValue: "",//月份twoValue: "",//月份},/*** 时间选择切换 */diseaseSwitch: function (options) {let that = this;// 按钮索引var index = options.currentTarget.dataset.index;// 索引对应内容var item = that.data.diseaseList[index];for (var y in that.data.diseaseList) {that.data.diseaseList[y].checked = false;}// 数据处理let timeDate = new Date();let d = timeDate.getDate();let h = timeDate.getHours();// let h=15;let m = timeDate.getMinutes();let timestampTwo = new Date(''+that.data.nowDate).getTime();//选中日期字符串转时间戳let timeStamp = Date.parse(new Date()+"");//当前时间if (timestampTwo-timeStamp> 0) {// 选中，未选中状态切换item.checked = !item.checked;} else {if (h < 10) {// 选中，未选中状态切换item.checked = !item.checked;} else if (h >= 10 && h < 12) {// 选中，未选中状态切换if (index == 0) {wx.showToast({title: '无效时间段',icon: 'error',duration: 2000})return 0;} else {item.checked = !item.checked;}} else if (h < 15 || (16 > h && h >= 15 && m < 30)) {if (index == 0 || index == 1) {wx.showToast({title: '无效时间段',icon: 'error',duration: 2000})return 0;} else {item.checked = !item.checked;}} else if (h < 17) {if (index == 0 || index == 1 || index == 2) {wx.showToast({title: '无效时间段',icon: 'error',duration: 2000})return 0;} else {item.checked = !item.checked;}} else {wx.showToast({title: '无效时间段',icon: 'error',duration: 2000})return 0;}}that.setData({diseaseList: that.data.diseaseList})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {let that = this;// s时间段数据处理let timeDate = new Date();let h = timeDate.getHours();let m = timeDate.getMinutes();if (h < 10) {that.data.diseaseList[0].checked = true;} else if (h >= 10 && h < 12) {that.data.diseaseList[1].checked = true;} else if (h >= 12 && h < 15 || (16 > h && h >= 15 && m < 30)) {that.data.diseaseList[2].checked = true;} else if ((17 > h && h >= 15 && m >= 30) && h < 17) {that.data.diseaseList[3].checked = true;}that.setData({diseaseList: that.data.diseaseList})// 时间段处理this.getWeekDay();const tmp = this.data.temp;this.setData({nowDate: tmp});},/** 日期选择监听 */dateClick: function (options) {let _this = this;let dateId = options.currentTarget.dataset.id;let times = options.currentTarget.dataset.time;let date = new Date();if (dateId > date.getDate()) {for (var y in _this.data.diseaseList) {_this.data.diseaseList[y].checked = false;}// s时间段数据处理_this.data.diseaseList[0].checked = true;_this.setData({thisDate: dateId,nowDate: times,diseaseList: _this.data.diseaseList});} else {// s时间段数据处理let timeDate = new Date();let h = timeDate.getHours();let m = timeDate.getMinutes();for (var y in _this.data.diseaseList) {_this.data.diseaseList[y].checked = false;}if (h < 10) {_this.data.diseaseList[0].checked = true;} else if (h >= 10 && h < 12) {_this.data.diseaseList[1].checked = true;} else if (h >= 12 && h < 15 || (16 > h && h >= 15 && m < 30)) {_this.data.diseaseList[2].checked = true;} else if ((17 > h && h >= 15 && m >= 30) && h < 17) {_this.data.diseaseList[3].checked = true;}_this.setData({thisDate: dateId,nowDate: times,diseaseList: _this.data.diseaseList});// 时间段处理}var timestamp = new Date(''+times).getTime();//日期字符串转时间戳console.log("=====okkookojjo===" + times+"==时间戳=="+timestamp);},// 月份处理paddingZero: function (n) {if (n < 10) {return '0' + n;} else {return n;}},/*** 获取明日开始一周日期*/getWeekDay: function () {let that = this;let myDate = new Date();let year = myDate.getFullYear();let month = myDate.getMonth() + 1;let dates = myDate.getDate();let week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];myDate.setDate(myDate.getDate()-5);//调试时间也可使用例如+1天或者+10几天let dateTemp;let timeArr = [];let times;var currentNum = 0;//数字Number标记月份切换var lastNum = 0;//数字Number标记月份切换for (let i = 0; i < 7; i++) {//月份标记处理times = year + '-' + that.paddingZero((myDate.getMonth() + 1)) + "-" + that.paddingZero(myDate.getDate());dateTemp = myDate.getDate();currentNum = parseInt(times.substring(times.indexOf("-") + 1, times.lastIndexOf("-")));if (i == 0) {that.firstValue = times.substring(times.indexOf("-") + 1, times.lastIndexOf("-"));that.setData({firstValue: that.firstValue})}if (i >= 1) {//月份显示标记var s = currentNum - lastNum;var result = currentNum + "";if (s == 1 && i == 1) {that.setData({twoData: "#06c6ad",twoValue: result})} else if (s == 1 && i == 2) {that.setData({threeData: "#06c6ad",twoValue: result})} else if (s == 1 && i == 3) {that.setData({fourData: "#06c6ad",twoValue: result})} else if (s == 1 && i == 4) {that.setData({fiveData: "#06c6ad",twoValue: result})} else if (s == 1 && i == 5) {that.setData({sixData: "#06c6ad",twoValue: result})} else if (s == 1 && i == 6) {that.setData({sevenData: "#06c6ad",twoValue: result})}}lastNum = parseInt(times.substring(times.indexOf("-") + 1, times.lastIndexOf("-")));//数字if (i == 0) {that.data.temp = times;timeArr.push({ 'week': '今天', 'day': dateTemp, 'time': times });} else if (i == 1) {timeArr.push({ 'week': '明天', 'day': dateTemp, 'time': times });} else {timeArr.push({ 'week': week[myDate.getDay()], 'day': dateTemp, 'time': times });}myDate.setDate(myDate.getDate() + 1);}//更新数据that.setData({dateArray: timeArr,thisDate: timeArr[0].day,nowDate: times});},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {},//转换为时间格式formatDate(time) {let show_day = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六');var date = new Date(time);date.setDate(date.getDate());let weekDay = date.getDay();var weekDate = show_day[weekDay]var YY = date.getFullYear() + '-';var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + " ";var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());var mm = ':' + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());var ss = ':' + (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());return YY + MM + DD + hh + mm + ss;},})

三、clener.wxss代码内容

/* pages/load/rili/clener.wxss *//* 月份标记 */.month_tag {width: 100%;height: 40rpx;display: flex;margin-top: 20rpx;flex-direction: row;align-items: flex-end;}.one {width: 70rpx;text-align: center;font-size: 26rpx;margin-left: 17rpx;}.two {width: 70rpx;text-align: center;font-size: 26rpx;margin-left: 18rpx;}/* 服务时间 */.services_time {background-color: #eeeeee;margin-top: 30rpx;border-radius: 20rpx;margin-left: 60rpx;margin-right: 60rpx;display: flex;flex-direction: column;}/* 时间段选择 */.time_select {margin-top: 20rpx;margin-left: 10rpx;font-size: 28rpx;color: #434343;font-weight: bold;}.timeselect {display: flex;justify-content: space-between;align-items: center;padding-top: 70rpx;margin-left: 10rpx;margin-right: 10rpx;flex-wrap:wrap;}/* 时间段属性 */#button_time {width: 48%;height: 60rpx;border-radius: 10rpx;text-align: left;font-size: 24rpx;background-color: rgba(255, 255, 255, 1);border: 2rpx solid #caccce;color: #666666;padding: 0rpx 10rpx;margin: 0rpx 5rpx 10rpx 0rpx;display: flex;align-items: center;justify-content: center;}#button_time::after {border: none}#button_time.active {height: 60rpx;background-color: #06c7ae;color: #fff}/* 周日期 */.week_select {background-color: #f0f0f0;}.choose-time-middle {width: 100%;height: 120rpx;padding: 0rpx 0 0rpx 0;background-color: #f0f0f0;}.date view {float: left;width: 14%;padding-top: 10rpx;text-align: center;}/* 日期属性 */.date view button {padding: 0;width: 70rpx;height: 60rpx;line-height: 60rpx;font-size: 28rpx;background-color: #ffff;border-radius: 10rpx;}/* 周属性 */.week_data_num {color: #d1c1c1;font-size: 28rpx;}.date view button.active {background-color: #06c7ae;color: #fff;}.date view button::after {border: none;}.show-date {width: 100%;text-align: center;padding: 50rpx 0rpx;}

四、clener.wxml代码内容

<!--pages/load/rili/clener.wxml--><!-- 预约时间选择 --><view class="services_time"><view class="time_select">时间选择</view><!-- 月份标记 --><view class="month_tag"><view class="one" style="color: {{oneData}}">{{firstValue}}月</view><view class="one" style="color: {{twoData}}">{{twoValue}}月</view><view class="one" style="color: {{threeData}}">{{twoValue}}月</view><view class="one" style="color: {{fourData}}">{{twoValue}}月</view><view class="two" style="color: {{fiveData}}">{{twoValue}}月</view><view class="two" style="color: {{sixData}}">{{twoValue}}月</view><view class="two" style="color: {{sevenData}}">{{twoValue}}月</view></view><view class="week_select"><view class="choose-time-middle"><view class="date"><!-- 日期 --><view wx:for="{{dateArray}}" wx:key="index"><button class="{{item.day == thisDate ? 'active' : ''}}" data-id="{{item. day}}" bindtap="dateClick" data-time="{{item.time}}">{{item.day}}</button></view><text class="clearfix"></text></view><view class="date"><!-- 周日期 --><view class="week_data_num" wx:for="{{dateArray}}" wx:key="index">{{item.week}}</view><text class="clearfix"></text></view></view></view><!-- 时间段 --><view class="timeselect"><button style="height: 70rpx;" id="button_time" wx:for="{{diseaseList}}" wx:key="*this" data-index="{{index}}" class="{{item.checked ? 'active' : ''}}" bindtap="diseaseSwitch">{{item.diseaseName}}</button></view><!-- 展示选中时间 --><view class="show-date" hidden="true"><text>当前时间：{{nowDate}}</text></view></view>

微信小程序周日历制作相关推荐

微信小程序自定义日历组件
微信小程序自定义日历组件 wxml <view class="maskWrap" bindtap="close"></view>< ...
微信小程序使用swiper制作轮播图留白的解决方法
微信小程序相比网页制作轮播图快捷了很多,直接可以使用swiper标签,但是对于新手来说,也有很多不可避免的坑. 附上轮播图代码 <view class="swp">&l ...
微信小程序：block制作动态商品列表
微信小程序:block制作动态商品列表在制作微信小程序时,我们往往会碰到需要动态生成列表的情况,本文便是以常见的商品列表为例来学习如何利用block制作动态商品列表. 运行截图实现代码 js: P ...
个人怎么制作微信小程序，微信小程序可以免费制作吗？微信小程序制作教程
微信小程序微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应 ...
微信小程序使用 setInterval 制作计时器后台延迟问题
微信小程序使用 setInterval 制作计时器后台延迟问题之前参加2020年微信小程序应用开发大赛的时候写了一个用于校园足球的微信小程序--踢在浙大. 在小程序的设计过程中出现了一个裁判工具的功 ...
微信小程序：scroll-view制作横向滚动导航条特效
微信小程序:scroll-view制作横向滚动导航条特效一.scroll-view介绍微信小程序官方释义为:可滚动视图区域,目前一共有10几个属性,包括:scroll-x.scroll-y.scr ...
微信小程序中如何制作瀑布流效果
微信小程序中如何制作瀑布流效果如图是首先,页面布局,页面分为两个部分,左右各一部分,各自插入图片,页面代码如下: <view class="city_history"> ...
android日历小程序,微信小程序实现日历功能
本文实例为大家分享了微信小程序实现日历功能的具体代码,供大家参考,具体内容如下效果图: 代码: {{year}}年{{month}}月 {{item}} {{item}} data: { year: ...
微信小程序引入日历组件
GitHub - treadpit/wx_calendar: 微信小程序-日历组件

微信小程序周日历制作

微信小程序周日历制作相关推荐

最新文章

热门文章