用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实用组件/插件 查看内容

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

Rolan 2017-10-31 00:29

因为项目需要,做了一个类似电商的时间预约功能,觉得有用,就独立出来成了个小插件。部分js代码var that=this; function getThisMonthDays(year, month) { return new Date(year, month, 0).getDate(); } // 计算每 ...

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



部分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


鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 李佳明同学 来自: 简书

相关阅读

  • wx_Bob38 2018-10-17 11:23
    正好用上,怎么把上面显示的预约日期改成一周??