小程序下单日历插件，类似于携程和其他酒店预订小程序

小程序订购日历插件在生活中很常见，最常用的是酒店预订房间小程序，那么如何实现呢？

该插件分为上部和下部。上侧是标签栏。它将根据当前日期自动定位当前日期，并显示接下来7天的日期。底部是内容显示，随标签栏而变化。

想法：

首先使用新的Data（）时间对象初始化时间来获取当前日期，使用新的Date（Date.UTC（year，month - 1,1））。获取每月第一天的getDay（）是一周中的哪一天。

//计算每月的第一天作为星期几

函数getFirstDayOfWeek（年，月）{

返回新日期（Date.UTC（年，月 - 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=['day'，'one'，'two'，'three'，'four'，'five'，'six'];

使用构造函数生成一段时间的数据。

//使用构造函数创建对象

功能日历（日期，星期）{

This.date=CUR_YEAR + ' - ' + cur_month + ' - ' +日期;

如果（日期==cur_date）{

This.week='今天';

} else if（date==cur_date + 1）{

This.week='明天';

}否则{

This.week='周'+周;

}

}

使用for循环生成json数据：

For（var i=1; i＆lt;=monthLength; i ++）{＆lt;＆gt;

//循环结束后，初始化循环再次

如果（X→6）{

X=0;

}

//使用构造函数创建对象

That.data.calendar [i]=新日历（i，[weeks_ch [x]] [0]）

X ++;

}

这里，因为一周有7天，当x> 6时，它被重置为0.

最后展示一些源代码

Var that=this;

函数getThisMonthDays（年，月）{

返回新日期（年，月，0）.getDate（）;

}

//计算每月的第一天作为星期几

函数getFirstDayOfWeek（年，月）{

返回新日期（Date.UTC（年，月 - 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=['day'，'one'，'two'，'three'，'four'，'five'，'six'];

//使用构造函数创建对象

功能日历（日期，星期）{

This.date=CUR_YEAR + ' - ' + cur_month + ' - ' +日期;

如果（日期==cur_date）{

This.week='今天';

} else if（date==cur_date + 1）{

This.week='明天';

}否则{

This.week='周'+周;

}

}

//当月的天数

Var monthLength=getThisMonthDays（cur_year，cur_month）

//当月的第一天是星期几

Var week=getFirstDayOfWeek（cur_year，cur_month）

Var x=周;

For（var i=1; i＆lt;=monthLength; i ++）{＆lt;＆gt;

//循环结束后，初始化循环再次

如果（X→6）{

X=0;

}

//使用构造函数创建对象

That.data.calendar [i]=新日历（i，[weeks_ch [x]] [0]）

X ++;

}

//将要渲染的日历数据数限制为7天（用户体验）

Var flag=that.data.calendar.splice（cur_date，that.data.calendar.length - cur_date＆lt;=＆gt;

that.setData（{

日历:标志

}）

//设置滚动视图的子容器的宽度

that.setData（{

宽度: 186 * parseInt（that.data.calendar.length - cur_date＆lt;=＆gt;

}）

HiShop小程序工具提供多种类型的商城/商店小程序制作，可视化编辑1秒，在线生成5个步骤。通过拖动和拼接模块布局小程序商城页面，你可以看到你得到的东西，你只需要艺术家来制作一个漂亮的商场。

更多小程序开发案例，全部位于：http://www.hvihi.com/xiaocx/kaifa.html

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。