小程序模板网

微信小程序时间预约插件(包含日历)

因为项目需要,做了一个类似电商的时间预约功能,觉得有用,就独立出来成了个小插件。

 

 

部分js代码

 

				
  1. var that=this;
  2. function getThisMonthDays(year, month) {
  3. return new Date(year, month, 0).getDate();
  4. }
  5. // 计算每月第一天是星期几
  6. function getFirstDayOfWeek(year, month) {
  7. return new Date(Date.UTC(year, month - 1, 1)).getDay();
  8. }
  9. const date = new Date();
  10. const cur_year = date.getFullYear();
  11. const cur_month = date.getMonth() + 1;
  12. const cur_date=date.getDate();
  13. const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
  14. //利用构造函数创建对象
  15. function calendar(date,week){
  16. this.date=cur_year+'-'+cur_month+'-'+date;
  17. if(date==cur_date){
  18. this.week = "今天";
  19. }else if(date==cur_date+1){
  20. this.week = "明天";
  21. }else{
  22. this.week = '星期' + week;
  23. }
  24. }
  25. //当前月份的天数
  26. var monthLength= getThisMonthDays(cur_year, cur_month)
  27. //当前月份的第一天是星期几
  28. var week = getFirstDayOfWeek(cur_year, cur_month)
  29. var x = week;
  30. for(var i=1;i<=monthLength;i++){
  31. //当循环完一周后,初始化再次循环
  32. if(x>6){
  33. x=0;
  34. }
  35. //利用构造函数创建对象
  36. that.data.calendar[i] = new calendar(i, [weeks_ch[x]][0])
  37. x++;
  38. }
  39. //限制要渲染的日历数据天数为7天以内(用户体验)
  40. var flag = that.data.calendar.splice(cur_date, that.data.calendar.length - cur_date <= 7 ? that.data.calendar.length:7)
  41. that.setData({
  42. calendar: flag
  43. })
  44. //设置scroll-view的子容器的宽度
  45. that.setData({
  46. width: 186 * parseInt(that.data.calendar.length - cur_date <= 7 ? that.data.calendar.length : 7)
  47. })

源代码地址https://github.com/Dorr2333/calendar-and-order.git



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24001.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询