jQuery UI中的日历插件，有了它，你就不需要再找其他的了

最新推荐文章于 2021-10-18 15:16:36 发布

php_897721669

最新推荐文章于 2021-10-18 15:16:36 发布

阅读量1.3w

点赞数

文章标签： jquery 日历 ui javascript stylesheet function

本文链接：https://blog.csdn.net/php_897721669/article/details/7404527

版权

JQuery UI中集成了许多常用的效果，今天自学的其中的日历效果，感觉还不错，以后很多时候都可以用的到。在下边代码中还写了时间段的编写，很有用，大家可以试试。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>添加日历效果</title>
<!--引入jquery类库-->
<script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script>
<!--引入Css样式类库文件-->

<link rel="stylesheet" href="jquery-ui-1.8.18.custom.css" />
<script language="javascript" type="text/javascript">

$(function (){
	
		$("#datepicker").datepicker({
			dateFormat:'yy-mm-dd',	//更改时间显示模式
			showAnim:"slide",		//显示日历的效果slide、fadeIn、show等
			changeMonth:true,		//是否显示月份的下拉菜单，默认为false
			changeYear:true,		//是否显示年份的下拉菜单，默认为false
			showWeek:true,			//是否显示星期,默认为false
			showButtonPanel:true,	//是否显示取消按钮，并含有today按钮，默认为false
			closeText:'close',		//设置关闭按钮的值
			yearRange:'2010:2012',	//显示可供选择的年份
			defaultDate:+7			//表示默认日期是在当前日期加上7天
			});
			
//---------------------利用datepicker创建时间段----------------
		$("#dateStart").datepicker({	//绑定开始日期
			changeMonth:true,	//显示下拉列表月份
			changeYear:true,	//显示下拉列表年份
			showWeek:true,		//显示星期	
			firstDay:"1",			//设置开始为1号
			onSelect:function(dateText,inst){
				//设置结束日期的最小日期
				$("dateEnd").datepicker('option','minDate',new Date(dateText.replace('-',',')));
				
				}
			});
			
		$("#dateEnd").datepicker({	//设置结束绑定日期
			changeMonth:true,	//显示下拉列表月份
			changeYear:true,	//显示下拉列表年份
			showWeek:true,		//显示星期	
			firstDay:"1",			//设置开始为1号
			onSelect:function(dateText,inst){
				//设置开始日期的最大日期
				$('#dateStart').datepicker('option','maxDate',new Date(dateText.replace('-',',')));
				}
			});
	
	});



</script>
</head>

<body>
	<!--
    	jQuery UI 使用 前提
        	第一步：引入别人的类库
            		js类库
                    css样式类库文件
            第二步：模拟实现
      -->
<div>
	填入日期：<input type="text" id="datepicker" />
</div>

<div>
	填入开始日期：<input type="text" id="dateStart" />
    填入结束日期：<input type="text" id="dateEnd" />

</div>

</body>
</html>

效果图：