最近做小程序 http://www.wxapp-union.com/ 开发, 出于练手, 也是工作需要, 就做了个微信小程序的类似于酒店预订的日历插件.
先上图:
这个插件分为上下两部分, 上边是 tab 栏, 会根据当前的日期自动定位到当前, 并展示以后 7 天的日期, 下边为内容展示, 随 tab 栏变化而变化.
思路:
首先用 new Data() 时间对象初始化时间, 获取当前的日期, 用
new Date(Date.UTC(year, month - 1, 1)).getDay()
获取每个月的第一天是星期几.
- // 计算每月第一天是星期几
- function getFirstDayOfWeek(year, month) {
- return new Date(Date.UTC(year, month - 1, 1)).getDay();
- }
- const date = new Date();
- const cur_year = date.getFullYear();
- const cur_month = date.getMonth() + 1;
- const cur_date=date.getDate();
- const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
利用构造函数生成数据, 一会用.
- // 利用构造函数创建对象
- function calendar(date,week){
- this.date=cur_year+'-'+cur_month+'-'+date;
- if(date==cur_date){
- this.week = "今天";
- }else if(date==cur_date+1){
- this.week = "明天";
- }else{
- this.week = '星期' + week;
- }
- }
使用 for 循环生成 json 数据:
- for(var i=1;i<=monthLength;i++){
- // 当循环完一周后, 初始化再次循环
- if(x>6){
- x=0;
- }
- // 利用构造函数创建对象
- that.data.calendar[i] = new calendar(i, [weeks_ch[x]][0])
- x++;
- }
这里因为一周有 7 天, 所以当 x>6 的时候, 重置为 0.
最后展示部分源码
- var that=this;
- function getThisMonthDays(year, month) {
- return new Date(year, month, 0).getDate();
- }
- // 计算每月第一天是星期几
- function getFirstDayOfWeek(year, month) {
- return new Date(Date.UTC(year, month - 1, 1)).getDay();
- }
- const date = new Date();
- const cur_year = date.getFullYear();
- const cur_month = date.getMonth() + 1;
- const cur_date=date.getDate();
- const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
- // 利用构造函数创建对象
- function calendar(date,week){
- this.date=cur_year+'-'+cur_month+'-'+date;
- if(date==cur_date){
- this.week = "今天";
- }else if(date==cur_date+1){
- this.week = "明天";
- }else{
- this.week = '星期' + week;
- }
- }
- // 当前月份的天数
- var monthLength= getThisMonthDays(cur_year, cur_month)
- // 当前月份的第一天是星期几
- var week = getFirstDayOfWeek(cur_year, cur_month)
- var x = week;
- for(var i=1;i<=monthLength;i++){
- // 当循环完一周后, 初始化再次循环
- if(x>6){
- x=0;
- }
- // 利用构造函数创建对象
- that.data.calendar[i] = new calendar(i, [weeks_ch[x]][0])
- x++;
- }
- // 限制要渲染的日历数据天数为 7 天以内 (用户体验)
- var flag = that.data.calendar.splice(cur_date, that.data.calendar.length - cur_date <= 7 ? that.data.calendar.length:7)
- that.setData({
- calendar: flag
- })
- // 设置 scroll-view 的子容器的宽度
- that.setData({
- width: 186 * parseInt(that.data.calendar.length - cur_date <= 7 ? that.data.calendar.length : 7)
- })
最后奉上地址: https://github.com/FrostNoval/calendar-and-order 地址
作者: 李佳明同学
链接: 微信小程序下订单件插 (日历)- 教程 - 小程序社区 - 微信小程序 - 微信小程序开发社区 - 小程序开发论坛 - 微信小程序联盟 http://www.wxapp-union.com/portal.php?mod=view&aid=3864
来源: https://blog.csdn.net/rolan1993/article/details/79853149