jQuery日历组件

最新推荐文章于 2024-07-21 02:56:03 发布

daizhaoyunit3

最新推荐文章于 2024-07-21 02:56:03 发布

阅读量318

点赞数

分类专栏： jQuery 文章标签： jquery ui 日历组件 ViewUI

本文链接：https://blog.csdn.net/daizhaoyunit3/article/details/84208813

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jsp界面

<!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>
<link href="date/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="date/jquery1-5-2.js"></script>
<script type="text/javascript" src="date/jquery-ui-1.8.7.custom-core.min.js"></script>
<script type="text/javascript" src="date/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="date/jquery.ui.widget.js"></script>
<script type="text/javascript">
$(function() {
	 $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
	 $('.datepicker').each(function(i){
         $(this).datepicker({
           inline: true,
           dateFormat: 'yy-mm-dd',
           showButtonPanel: false
          });
         $(this).attr("readOnly","true");
       });
});

//日期校验
function checkDate(beginStartDate,beginEndDate) {
           if(null==beginStartDate || beginStartDate.length==0) {
	            return true;
           }
           if(null==beginEndDate || beginEndDate.length==0){
	           return true;
           }
           return beginStartDate<=beginEndDate;
      }
	   
 function checkformDate() {
                  //获取页面的时间
           var beginStartDate = document.getElementById("start").value;
           var beginEndDate= document.getElementById("end").value;
           if(!checkDate(beginStartDate,beginEndDate)) {
	         alert("时间条件：结束日期必须大于开始日期!");
	         return false;
           }
           return true;	
       }
	</script>
</head>

<body>

	<input type="text" id="start" class="datepicker" readonly="true" /> 至
	<input type="text" id="end" class="datepicker" readonly="true" /><br />
	<input type="button" οnclick="checkformDate()" value="校验" />

		
</body>
</html>