Jquery实现可左右滑动日历

最新推荐文章于 2023-01-16 16:23:07 发布

JAVA学无止境

最新推荐文章于 2023-01-16 16:23:07 发布

阅读量990

点赞数

分类专栏：日常记录文章标签： js css html javascript jquery

本文链接：https://blog.csdn.net/tian154731/article/details/114031875

版权

日常记录专栏收录该内容

8 篇文章 0 订阅

订阅专栏

通过Jquery实现自定义可左右滑动日历

如何使用：

1. html写法

<body>
		<div style="width: 100%; height: 72px; background: #e4e4e4;">
			<div style="width: 100%; height: 24px; line-height: 24px;">
				<p style="color: #323232; width: 14.2%; float: left; text-align: center; font-size: 14px;">周日</p>
				<p style="color: #323232; width: 14.2%; float: left; text-align: center; font-size: 14px;">周一</p>
				<p style="color: #323232; width: 14.2%; float: left; text-align: center; font-size: 14px;">周二</p>
				<p style="color: #323232; width: 14.2%; float: left; text-align: center; font-size: 14px;">周三</p>
				<p style="color: #323232; width: 14.2%; float: left; text-align: center; font-size: 14px;">周四</p>
				<p style="color: #323232; width: 14.2%; float: left; text-align: center; font-size: 14px;">周五</p>
				<p style="color: #323232; width: 14.2%; float: left; text-align: center; font-size: 14px;">周六</p>
			</div>
			<div id="view" style="width: 100%; position: absolute; top: 36px;">

			</div>
			<div id="dateText" style="width: 100%; height: 24px; line-height: 24px; text-align: center; color: #323232;font-size: 14px; margin-top: 24px;">

			</div>
		</div>
	</body>

2. 需要在html头部引入calendarUtil.js和calendarUtil.css

3. 初始化日历

createCalender(function(_date) {
		//_date就是滑动结束或者手动点击选择获取到的日期
        //在这里写你的处理逻辑
	});

js和css文件已上传百度云盘

https://pan.baidu.com/s/1BA0RHIhVX_iquEKSxxkueg

提取码：ddv7

JAVA学无止境

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Jquery实现可左右滑动日历

通过Jquery实现自定义可左右滑动日历如何使用：1. html写法<body> <div style="width: 100%; height: 72px; background: #e4e4e4;"> <div style="width: 100%; height: 24px; line-height: 24px;"> <p style="color: #323232; width: 14.2%; float: left; t
复制链接

扫一扫