微信小程序日历弹窗选择器代码实例

应公司需求，写了一个弹窗日历选择器，感觉用着还不错，封装了一下，分享给大家，希望大家有什么意见可以指出来相互交流共同改进！

先上一个效果图：(当天日期为2018-4-18)

时间改为5月份的效果图：

直接上代码：

wxml:

view class=' weui-cells weui-cells _ after-title ' style=' margin-top :100 rpx；'view class=' weui-cell weui-cell _ access ' hover-class=' weui-cell _ active ' catch tap=' showModalBtn ' view class=' weui-cell _ BD '选择时间/view view class=' weui-cell _ _ ft weui-cell _ _ ft _ in-access ' {选择日期} }/view/view/view view class=' modal-mask ' bind tap=' hide modal ' catch touch move='防止触摸移动' hidden=' { { show modal } } /view view class=' modal-dialog ' hidden=' { { show modal } } ' view class=' modal box ' view class=' box ' view class=' calendar box ' view class=' calendar title '当前月份：文本样式=' font-size :46 rpx' {{thisMonth}}/text月/view block wx : for=' { { week } } ' wx : key=' item ' view class=' week ' { week[index]}/view/block wx : for=' { { week num } } ' wx : key=' item ' view class=' week ' style=' border-bottom :0；color : transparent ' 0/view/block wx : for=' { { dayList } } ' wx : key=' item ' view class=' week ' style=' border-bottom :0；背景-color:{{dayIndexindex '？# f1 f1 ' :(TapiT==index '？# 1296 db ' : ' ')} }；color: { { tapThis==index '？white ' : ' ' } } ' catch tap='选择日期'数据-索引=“{ { index } }”数据-值=' { { item } } ' { { item } }/视图/块/视图/视图/视图wxss 3360。modalBox {宽度： 100%；font-size : 32 rpx}.box { margin: 0 auto宽度： 630 rpx}.日历标题{/*边距： 0 auto宽度： 630 rpx*/宽度： 100%；高度： 80rpx线高： 80 rpx文本对齐：中心；边框-底部： 1rpx实心# ddd}。日历框{/*宽度： 630 rpx*/宽度：100%；margin : 0 auto order :1 rpx实心# ddd}。周{ display : inline-block；宽度宽度：90 rpx h8 : 80 rpx文本对齐：中心；线高： 80 rpx边框-底部： 1rpx实心# ddd}。dateBtn { width :100%；height : 80 rpxdisplay : flex justice-content :空格；保证金-top : 20 rpx；} .日期按钮{宽度： 45%;高度： 100%;display : flex justice-内容中心：align-items:居中；保证金： 0；font-size : 36rpx} /* 模态框*/.模态掩码{宽度： 100%；高度： 100%;位置：固定；top : 0；左： 0；背景技术： # 000;opacity: 0.5飞越：隐藏；z指数： 9000；} .模态对话框{宽度： 85%；padd : 100 rpx 30 rpx 30 rpx 30 rpx；飞越：隐藏；位置：固定；前：名20%；左： 0；右： 0；margin: 0 autoz指数： 9999；背景： rgba(255，255，255，1)；边界半径： 5rpx} js:

page({/* * * page的初始数据*/data : { show model : true，weeklength 33607，week: ['day '，' one '，' two '，' three '，' four '，' five '，' six']，daylist tapThis:0，thisMonth:0，thisYear:0，dayIndex:0，chooseDate: ' '，}，getWeek(年，月，日){ var那=thisvar d=新日期()；d.setFullYear(年份)；d.setMonth(月-1)；d . setdate(1)；var n=d . GetDay()；var arr=[]；var Index=0；var DaYn=1；for(var I=0；idayI){ arr . push(DaYn)；} var now=new Date()；var now year=now . getfullyear()；var now month=now . getmonth()1；var now day=now . getdate()；var val=1；if(year==now year){ if(month==now month){ Index=arr . indexof(now day)；控制台日志(索引)；val=nowDay} } that.setData({ weekNum:n，dayList:arr，dayIndex:Index，tapThis:Index，thisMonth:month，thisYear:year，choose date : year '-' month '-' val，}) }，choose date(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，choose date : that . data . this year '-. that . data . this month '-' val，showModal:true，})}，/* * *弹出掩码截断touchmove事件*/prevent touch vee : function(){ }，/* * *隐藏模式对话框*/hideModal(){ var=this；that . setdata({ show modal : true，}) }，show modal BTN(){ var that=this；that . setdata({ show modal : false })}，/* * *生命周期函数-监听页面加载*/onload :函数(e){ var that=this；that.getWeek('2018 '，' 04 '，' 31 ')；//用法：在此功能中传入年、月、日(本月天数)。}})代码设计思路：

1.该代码是根据我公司实际情况定制的。选择哪个月的时候，需要传递哪个月的参数。比如我想要2018-04的日历选择器，那么我需要在getWeek()中传递年、月、日(这个月的总天数)作为参数，代码会自动计算出一个月的第一天是星期几，并排版好！

如果你不知道这个月的天数，这里还提供了下面的代码，方便你的代码朋友计算每个月的天数

传入GetDayNum(年、月){ //要计算的参数年、月，可以是字符串，也可以是数字。变量=这个；var d=新日期()；d.setFullYear(年份)；d.setMonth(月)；d . setdate(0)；console . log(d . GetDate())；//d.getDate()是本月的总天数！},2.具体思路是根据传递的参数，将月的第一天计算为星期几，然后从星期几开始排列，循环日期{{total days}}次。然后获取当前日期，判断日历弹出窗口是否与当前月份一致。如果是，则当前日期之前的所有日期都应设置为不可点击。然后点击获取数值，整个日历过程就完成了。

以上就是边肖介绍的微信小程序日历弹出窗口选择器的详细讲解和集成，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！