微信小程序日历弹窗选择器代码实例
这篇文章主要介绍了微信小程序日历弹窗选择器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
应项目需求,写了一个弹窗日历选择器,感觉用着还不错,封装了一下,分享给大家,希望大家有什么意见可以指出来相互交流共同改进!
先上一个效果图:(当天日期为2019-05-10)
直接上代码:
wxml:
<view class="weui-cells weui-cells_after-title" style='margin-top:100rpx;'>
<view class="weui-cell weui-cell_access" hover-class="weui-cell_active" catchtap='showModalBtn'>
<view class="weui-cell__bd">选择时间</view>
<view class="weui-cell__ft weui-cell__ft_in-access">{{chooseDate}}</view>
</view>
</view>
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" hidden="{{showModal}}"></view>
<view class="modal-dialog" hidden="{{showModal}}">
<view class='modalBox'>
<view class='box'>
<view class='calendarBox'>
<view class='calendarTitle'>
当前月份:
<text style='font-size:46rpx;'>{{thisMonth}}</text> 月
</view>
<block wx:for="{{week}}" wx:key="item">
<view class="week">{{week[index]}}</view>
</block>
<block wx:for="{{weekNum}}" wx:key="item">
<view class="week" style="border-bottom:0;color:transparent">0</view>
</block>
<block wx:for="{{dayList}}" wx:key="item">
<view class='week' style="border-bottom:0;background-color:{{dayIndex>index?'#f1f1f1':(tapThis==index?'#1296db':'')}};color:{{tapThis==index?'white':''}}" catchtap="chooseDate" data-index="{{index}}" data-value="{{item}}">{{item}}</view>
</block>
</view>
</view>
</view>
</view>
wxss:
.modalBox{
width: 100%;
font-size: 32rpx;
}
.box{
margin: 0 auto;
width: 630rpx;
}
.calendarTitle{
/* margin: 0 auto;
width: 630rpx; */
width: 100%;
height: 80rpx;
line-height: 80rpx;
text-align: center;
border-bottom: 1rpx solid #ddd;
}
.calendarBox{
/* width: 630rpx; */
width:100%;
margin: 0 auto;
border:1rpx solid #ddd;
}
.week{
display: inline-block;
width:90rpx;
height: 80rpx;
text-align: center;
line-height: 80rpx;
border-bottom: 1rpx solid #ddd;
}
.dateBtn{
width:100%;
height: 80rpx;
display: flex;
justify-content: space-between;
margin-top: 20rpx;
}
.dateBtn>button{
width: 45%;
height: 100%;
display:flex;
justify-content: center;
align-items: center;
margin: 0;
font-size: 36rpx;
}
/* 模态框 */
.modal-mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
overflow: hidden;
z-index: 9000;
}
.modal-dialog {
width: 85%;
padding: 100rpx 30rpx 30rpx 30rpx;
overflow: hidden;
position: fixed;
top: 20%;
left: 0;
right: 0;
margin: 0 auto;
z-index: 9999;
background: rgba(255, 255, 255, 1);
border-radius: 5rpx;
}
js:
Page({
/**
* 页面的初始数据
*/
data: {
showModal:true,
weekLength:7,
week:["日","一","二","三","四","五","六"],
dayList:[],
weekNum:0,
tapThis:0,
thisMonth:0,
thisYear:0,
dayIndex:0,
chooseDate:"",
},
getWeek(year,month,day){
var that = this;
var d = new Date();
d.setFullYear(year);
d.setMonth(month-1);
d.setDate(1);
var n = d.getDay();
var arr =[];
var Index=0;
var dayN=1;
for(var i = 0; i<day; i++){
arr.push(dayN++);
}
var now = new Date();
var nowYear = now.getFullYear();
var nowMonth = now.getMonth()+1;
var nowDay = now.getDate();
var val = 1;
if(year==nowYear){
if(month==nowMonth){
Index=arr.indexOf(nowDay);
console.log(Index);
val = nowDay;
}
}
that.setData({
weekNum:n,
dayList:arr,
dayIndex:Index,
tapThis:Index,
thisMonth:month,
thisYear:year,
chooseDate:year+"-"+month+"-"+val,
})
},
chooseDate(e){
var that = this;
var n = e.currentTarget.dataset.index;
var val = e.currentTarget.dataset.value;
console.log(n);
if(n>=that.data.dayIndex){
that.setData({
tapThis:n,
chooseDate:that.data.thisYear+"-"+that.data.thisMonth+"-"+val,
showModal:true,
})
}
},
/**
* 弹出框蒙层截断touchmove事件
*/
preventTouchMove: function () {
},
/**
* 隐藏模态对话框
*/
hideModal() {
var that = this;
that.setData({
showModal: true,
})
},
showModalBtn(){
var that = this;
that.setData({
showModal:false
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (e) {
var that = this;
that.getWeek("2018","04","31"); //使用方法: 在此函数内传入年、月、日(此月的天数)即可。
}
})
代码设计思路:
1、此代码是符合我们公司实际情况定制的,选择哪个月份,需要传递哪个月份的参数,比如我要2018-04的日历选择器,那么我需要在 getWeek() 中传递年,月,日(此月的总天数)作为参数,代码会自动计算出当月的一号是星期几并且排版好!
如果不知道此月的天数 ,这里还提供如下代码方便各位码友计算出各个月份的天数
getDayNum(year,month){ //传入参数年份 和 要计算的月份, 可以为字符串,也可以为数字。
var that = this;
var d = new Date();
d.setFullYear(year);
d.setMonth(month);
d.setDate(0);
console.log(d.getDate()); //d.getDate() 即为此月的总天数!
},
2、具体思路就是:根据传递的参数计算出当月的第一天为星期几,然后从星期几开始排列,通过循环{{总天数}}次,让日期循环出来。然后再获取当前日期,判断日历弹窗与当前月份是否吻合,如果吻合,就要将在当前日期之前的日期都设置为不可点击状态。然后就是点击获取值,整个日历流程完毕。
为了美观大家记得引入weui.wxss
只需要在app.wxss中加入
@import 'weui.wxss';
以上所述是小编给大家介绍的微信小程序日历弹窗选择器详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对轩宇网的支持!
微信扫描下方的二维码阅读本文
阅读剩余
版权声明:
标题:微信小程序日历弹窗选择器代码实例
作者:admin
链接:https://www.kmtky.com/472.html
文章版权归作者所有,未经允许请勿转载。
声明:仅供内部测试和技术交流使用,任何非法商业使用及商业利益冲突带来的法律纠纷,与本人无关,本人概不负责,请下载后24小时内删除,谢谢合作!如有侵权请于作者联系,尽快删除。
标题:微信小程序日历弹窗选择器代码实例
作者:admin
链接:https://www.kmtky.com/472.html
文章版权归作者所有,未经允许请勿转载。
声明:仅供内部测试和技术交流使用,任何非法商业使用及商业利益冲突带来的法律纠纷,与本人无关,本人概不负责,请下载后24小时内删除,谢谢合作!如有侵权请于作者联系,尽快删除。
THE END