微信小程序日历弹框组件

参考文章：https://blogai.cn/posts/46

calendar.json

{"usingComponents": {},"disableScroll": true
}

calendar.wxml

<view class="titleDate"><button class="cu-btn" bindtap="lastMonth"><text class="cuIcon-back">＜</text></button>{{currentYear}} - {{currentMonth+1}}<button class="cu-btn" bindtap="nextMonth"><text class="cuIcon-right">＞</text></button>
</view><view class="title"><view wx:for='{{weeks}}' wx:key='index'>{{item}}</view>
</view>
<view class="calender  {{anmation? 'animation-slide-skew':''}}"><view wx:for='{{monthNum+week}}' class="cal-body {{index-week+1==currentDay&&nowMonth==currentMonth&&nowYear==currentYear?'now':''}}" wx:key='index' data-day="{{index-week+1}}" bindtap="choseDay"><view class="{{index-week+1>0?'cal-text ':''}} {{choseDay==index-week+1&&currentMonth==choseMonth?'chose':''}}">{{index-week+1 >0?index-week+1:''}}</view></view>
</view>
<view>
</view>
<picker-view wx:if='{{datePick}}' class="picker" mask-class='mask' indicator-class='indicator' bindchange="bindChange"><picker-view-column class='column'><view wx:for='{{24}}' style="line-height:50rpx;" wx:key='index'>{{index<10? '0'+index:index}}</view></picker-view-column><picker-view-column class='column'><view wx:for='{{60}}' style="line-height:50rpx;" wx:key='imdex'>{{index<10? '0'+index:index}}</view></picker-view-column>
</picker-view><view>您选择的是：{{choseDate}} {{choseHours}} : {{choseMin}}</view><view><view class="toToday" bindtap="initDay">今</view>
</view>

calendar.wxss

/* pages/sigle/calendar/calendar.wxss */page {background: #fff;
}.datePick {margin-top: 20rpx;
}.indicator {height: 50rpx;width: 80%;margin-left: 10%;border-radius: 10rpx;
}.column {text-align: center;color: cornflowerblue;font-weight: bold;font-size: 34rpx;
}.picker {height: 150rpx;width: 80%;margin: 0 auto;
}.text {width: 150px;height: 60px;margin-left: 20px;
}.move {width: 100px;height: 60px;position: absolute;right: 0;transform: translateX(100px);background: rgb(245, 51, 93);
}.calender {margin: 0 auto;width: 90%;height: 600rpx;color: rgb(68, 68, 68);display: grid;grid-template-columns: repeat(7, 1fr);grid-column-gap: 20rpx;transition: height 1s;
}.titleDate {display: flex;justify-content: center;align-items: center;font-size: 32rpx;font-weight: bold;
}.cu-btn {display: flex;justify-content: center;align-items: center;width: 60rpx !important;
}.title {border-bottom: 4rpx solid cornflowerblue;font-size: 30rpx;font-weight: bold;height: 80rpx;line-height: 80rpx;text-align: center;margin: 0 auto;width: 90%;color: rgb(93, 98, 136);display: grid;grid-template-columns: repeat(7, 1fr);grid-column-gap: 20rpx;
}.cal-body {width: 80rpx;margin-top: 20rpx;font-size: 30rpx;font-weight: bold;height: 80rpx;text-align: center;
}.cal-body .cal-text {line-height: 80rpx;border-bottom: 1rpx dashed rgba(100, 148, 237, 0.747);
}.now {background: cornflowerblue;color: #fff;font-size: 32rpx;font-weight: bold;border-radius: 50%;box-shadow: 2rpx 2rpx 12rpx cornflowerblue;
}.chose {background: rgb(20, 20, 20);color: #fff;font-size: 32rpx;font-weight: bold;border-radius: 14rpx;box-shadow: 2rpx 2rpx 12rpx rgb(122, 122, 122);
}.toToday {text-align: center;width: 100rpx;height: 100rpx;border-radius: 50%;line-height: 100rpx;position: absolute;bottom: 30rpx;font-weight: bold;right: 30rpx;color: #fff;background: cornflowerblue;box-shadow: 2rpx 2rpx 20rpx rgba(123, 154, 211, 0.808);
}

calendar.js

const weeks = ['日', '一', '二', '三', '四', '五', '六']function getWeelDay(year, month, day) {return new Date(year)
}
Page({/*** 页面的初始数据*/data: {weeks: ['日', '一', '二', '三', '四', '五', '六'],datePick: false},start_(e) {this.setData({Start: e.touches[0].pageX,animation: false})console.log('start', this.data.Start)},move_(e) {let x = e.touches[0].pageX - this.data.Startif (x > -100 && x < 0) {this.setData({movex: x})}this.setData({show: e.touches[0].pageX - this.data.Start > 0 ? 'hide' : 'show'})console.log('move', x)},end_(e) {if (this.data.show == 'show') {this.setData({movex: -100,animation: true})} else {this.setData({movex: 0,animation: true})}// this.setData({//    ListTouchDirection: null// })},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {// let date = new Date()// let currentYear = date.getFullYear(),// currentMonth = date.getMonth(),// currentDay = date.getDate()// let monthNum = new Date(currentYear,currentMonth+1,0).getDate()// let week = new Date(currentYear, currentMonth, 1).getDay()// this.setData({//    currentYear:currentYear,//    currentMonth:currentMonth,//    currentDay:currentDay,//    monthNum: monthNum,//    week: week,//    nowYear: currentYear,//    nowMonth: currentMonth,//    nowDay: currentDay// })this.initDay()},initDay() {//获取当前选择的年月日let date = new Date()let currentYear = date.getFullYear(),currentMonth = date.getMonth(),currentDay = date.getDate()//获取当年，当月的天数 getDate()，此时month+1let monthNum = new Date(currentYear, currentMonth + 1, 0).getDate()//获取该月1号是周几，注意此时month不加1let week = new Date(currentYear, currentMonth, 1).getDay()this.setData({currentYear: currentYear,currentMonth: currentMonth,currentDay: currentDay,monthNum: monthNum,week: week,nowYear: currentYear, //这里的now代表今天对应的日期，存在data中，点击回到今天时再从data中取出nowMonth: currentMonth,nowDay: currentDay})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {},bindChange(e) {console.log(e.detail.value[0], e.detail.value[1])this.setData({choseHours: e.detail.value[0],choseMin: e.detail.value[1]})},choseDay(e) {let index_ = e.currentTarget.dataset.dayif (index_ > 0) {if (this.data.choseMonth == this.data.currentMonth && this.data.choseDay == index_) {this.setData({choseDay: '',choseYear: '',choseMonth: '',choseDay: '',datePick: false})} else {console.log(this.data.currentYear, this.data.currentMonth, index_)let choseDate = this.data.currentYear + '' + this.data.currentMonth + '' + index_this.setData({choseDate: choseDate,choseYear: this.data.currentYear,choseMonth: this.data.currentMonth,choseDay: index_,datePick: true})}}},lastMonth() {this.setData({anmation: true})//计算余数，除以12之后的余数便是要减的月份数let Remainder = this.data.currentMonth % 12;if (this.data.currentMonth < 1) {//parseInt(this.data.currentMonth / 12) 计算整数，得到的值就是要减的年//如果当前选择的月份是负数，需要减整数后再-1var currentYear = this.data.currentYear - 1 - parseInt(this.data.currentMonth / 12)var currentMonth = 12 - Math.abs(Remainder) - 1} else {var currentYear = this.data.currentYear + parseInt(this.data.currentMonth / 12)var currentMonth = Remainder - 1}let monthInt = parseInt(this.data.currentMonth / 12)// let currentDay = this.data.currentDay;let monthNum = new Date(currentYear, currentMonth + 1, 0).getDate()let week = new Date(currentYear, currentMonth, 1).getDay()this.setData({currentYear: currentYear,currentMonth: currentMonth,monthNum: monthNum,week: week})setTimeout(() => {this.setData({anmation: false})}, 1000)console.log(currentYear, currentMonth, week, monthNum)},nextMonth() {this.setData({anmation: true})let Remainder = (this.data.currentMonth + 1) % 12;if (Remainder < 0) {var currentYear = this.data.currentYear - 1 - parseInt(Remainder / 12)var currentMonth = 12 - Math.abs(Remainder)} else {console.log(Remainder)var currentYear = Remainder == 0 ? this.data.currentYear + 1 : this.data.currentYear + parseInt(Remainder / 12)var currentMonth = Remainder}let monthInt = parseInt(this.data.currentMonth / 12)// let currentDay = this.data.currentDay;let monthNum = new Date(currentYear, currentMonth + 1, 0).getDate()let week = new Date(currentYear, currentMonth, 1).getDay()this.setData({currentYear: currentYear,currentMonth: currentMonth,monthNum: monthNum,week: week})setTimeout(() => {this.setData({anmation: false})}, 1000)console.log(currentYear, currentMonth, week, monthNum)}
})

微信小程序日历弹框组件相关推荐

微信小程序自定义弹框组件
话不多说直接上代码目录 1.wxml 2.js 3.wxss 4.json 5.效果展示(具体内容可以自定义) 1.wxml <!--pages/components/confirmBox/c ...
微信小程序下拉框插件_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
下拉多选框微信小程序_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
下拉多选框微信小程序_微信小程序下拉框组件使用方法
这篇文章主要为大家详细介绍了微信小程序下拉框组件的使用方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正.[推荐教程:小程序开发教程] 适用场景 ...
微信小程序禁止弹框下面的内容滑动弹窗禁止底部内容滚动
我们需要解决的问题:当弹框显示的时候,弹框下面的内容不能滚动小程序的弹框特别多,像下面这样,弹框的底部是一个可以下拉的页面,但是当弹框出现的时候,需要禁止底部的滚动,那么怎么做呢? 解决方案: 给v ...
微信小程序自定义弹框+生成二维码功能
最近在做小程序的功能,需求是弹框生成二维码功能,所以根据需求自定义了一个弹框组件,后续其他地方也可以用到. 最后效果图如下 dialog部分 <!--components/dialog/dial ...
微信小程序tooltip提示框组件
需要将文件引入需要插件的.json文件的usingComponents里. 算了,直接看代码理解把,有问题联系会及时回复. 文件结构,我这里组件放在根目录的cpmponents文件夹里面 index. ...
微信小程序底部弹框 showActionSheet
志在巅峰的攀登者,不会陶醉在沿途的某个脚印之中,在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的 ...
微信小程序 - 解决弹框遮罩层的滚动穿透问题
在小程序页面里有自定义弹窗时候,发现弹窗外滚动的时候,底部背景页面也会跟随滚动.面对这个bug,我们可以用下面几种方法实现: 方法1:catchtouchmove="true" 可 ...

微信小程序日历弹框组件

calendar.json

calendar.wxml

calendar.wxss

calendar.js

微信小程序日历弹框组件相关推荐

最新文章

热门文章