js实现h5日期选择类似携程，日期上可以添加价格，是否休息，折扣等数据等等..

本文链接：https://blog.youkuaiyun.com/sllailcp/article/details/77862524

本文介绍了一个自定义的日历插件实现过程，包括日期范围的确定、日期填充及显示逻辑，支持全屏和点击显示两种模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于公司是做差旅的，需求要在每天的日期上加上价格，以及折扣等信息，博主在网上找了一圈，没有好用的插件，只能动手写一个。

首先要根据后台给的数据确定日期范围，写一个方法来获取两个日期中间所有的日期getAll(begin, end)，

然后还要判断起始日期和结束日式是否为本月的第一天或者最后一天，然后定义一个方法来补全前后的日期，getNbsp(week)

不在日历范围内的日期用淡灰色显示，反则用清晰字体。并设置不同的类名

最后根据接口得到的信息来填充日历，有什么就添加什么pushTag(yearMonthDay)。方法如下

let tag='';
	for (let i = 0; i < json.dateJson.length; i++) {
		if (yearMonthDay === json.dateJson[i].date) {
			for (let key in json.dateJson[i]) {
				key === 'price' ? tag += '<i class='+key+'>￥'+json.dateJson[i][key]+'</i>' :tag += '<i class='+key+'>'+json.dateJson[i][key]+'</i>';
			}
			break;
		}
	}
	return tag;

根据不同的tag，设置不同给的显示。样式，完成！！

支持，全屏显示，以及点击显示两种。只需要引用不同的模块即可。

selectdate// 是所有日期全部显示。滑动查看
selectdatearow'// 点击一次展示一个月

完整项目可以下载(vue项目)：https://github.com/slailcp/selectDate.git（另外项目里面封装了一份原声js写法）

有不足的地方，希望大家多多指出。谢谢

这里是拿到2017-8-10到2018-1-15，效果图如下