关闭

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

标签: jquery日历uijavascriptstylesheetfunction
9899人阅读 评论(2) 收藏 举报

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>


效果图:


0
5

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:95001次
    • 积分:1366
    • 等级:
    • 排名:千里之外
    • 原创:45篇
    • 转载:11篇
    • 译文:0篇
    • 评论:13条
    最新评论