简易的jQuery日历插件

最新推荐文章于 2024-03-17 00:10:12 发布

Satisfy_555

最新推荐文章于 2024-03-17 00:10:12 发布

阅读量1.4k

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/satisfy_555/article/details/81974514

版权

JQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

=====================

说明：闲着无聊蛮去搜索了下，下面这个网址是无意间搜到的，反正我是下载了一个日历插件是可以用的

http://www.jq22.com/jquery-plugins%E6%97%A5%E6%9C%9F%E5%92%8C%E6%97%B6%E9%97%B4-2-jq

===================

首先下载样式啥的链接：https://pan.baidu.com/s/1eLpURtpJz1mHDenjWBC0gw 密码：67an

然后引入到项目中：

====================================

下面直接看代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>简易单面板日历</title>
		<link rel="stylesheet" href="${request.getContextPath()}static/css/laydate.css" />
		<script src="${request.getContextPath()}static/js/jquery-1.12.4.min.js"></script>
		<script src="${request.getContextPath()}static/js/laydate.js"></script>
		
		<script type="text/javascript">
			function date(){
				alert(document.getElementById("laydateInput").value);
			}
		</script>
		
	</head>
	<body>
		<div class="laydate-box">
			<input type="text" name="datedate" id="laydateInput" placeholder="xxxx年xx月xx日" />
			<img src="${request.getContextPath()}static/images/calendar.png" alt="" class="icon data-icon"/>
			<div class="select-date">
				<div class="select-date-header">
					<ul class="heade-ul">
						<li class="header-item header-item-one">
							<select name="" id="yearList"></select>
						</li>
						<li class="header-item header-item-two" onselectstart="return false">
							<select name="" id="monthList"></select>
						</li>
						<li class="header-item header-item-three" onselectstart="return false" >
							<span class="reback">回到今天</span>
						</li>
					</ul>
				</div>
				<div class="select-date-body">
					<ul class="week-list">
						<li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li>
					</ul>
					<ul class="day-tabel"></ul>
				</div>
			</div>
		</div>
		<br>
		<div>
			<input type="submit" value="提交" onclick="date()">
		</div>
	</body>
</html>

效果：

选择日期点击提交：

Satisfy_555

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简易的jQuery日历插件

=====================说明：闲着无聊蛮去搜索了下，下面这个网址是无意间搜到的，反正我是下载了一个日历插件是可以用的http://www.jq22.com/jquery-plugins%E6%97%A5%E6%9C%9F%E5%92%8C%E6%97%B6%E9%97%B4-2-jq===================首先下载样式啥的链接：https://pan...
复制链接

扫一扫