datepicker 日期控件，两个文本框共一个日期控件

最新推荐文章于 2023-08-07 08:48:00 发布

z313731418

最新推荐文章于 2023-08-07 08:48:00 发布

阅读量3.3k

点赞数

分类专栏： http 文章标签： datepicker 控件 jquery

本文链接：https://blog.csdn.net/z313731418/article/details/21346119

版权

http 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<link href="js/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.9.1.js"></script><!-- jquery库 -->
<script src="js/jquery-ui.js"></script><!--jquery-ui库-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery.ui.datepicker-zh-Cn.js"></script><!--汉化包-->
<script>
	//日期控件初始化生成
	function openDate(){
		$("#divData").datepicker({
			//minDate:"-5y", maxDate: "+10y", //minDate最小几年，maxDate最大几年
			showWeek: true,	//是否显示第周
			firstDay: 0,  //第一位显示周日还是周日。0代表周日，1代表周一
			//changYear:true, //显示年的下拉框
			changMonth:true, //显示月的下拉框
			showOtherMonths: true, //在当前页面显示其他月份日期
			//selectOtherMonths: true, //在当前页面可以选取上一月或下一月日期
			altField: "#actualDate",//高亮显示文本框中选择的日期
			autoSize:true,	//文本框根据选择日期调整大小
			duration: "fast",//日期控件出现的速度，慢"slow", 正常"normal", 快"fast"
			isRTL: false, //日期控件中文字出现的位置，true时是从左只有，false反之
			numberOfMonths: [ 1, 1 ],  //用于一次显示几个日期控件第一位数是代表行，第二位数是代表列
			prevText: "Earlier",  //上一个月按钮文字提示
		 	showAnim: "fold",  //动漫效果"slideDown", "fadeIn","show","fold"
		 	showButtonPanel: false,  //打开"今天"与"关闭"按钮
		 	//currentText: "今天" //今天按钮的值可变
		 	//closeText: "关闭", //关闭按钮的值可变
		 	//showOn: "both" //文本框后出现一个按钮。用于控制日期控件
		 	//showOtherMonths: true,
		 	//weekHeader: "W"  //修改周， 头部字体，默认是”周“
		 	//yearSuffix: "CE"  //将头部的年修改成想要的值，默认是”年“
		 	onSelect:function (text,inse){
		 		//选中第一个值后屏蔽之前的日期，选中第二个值则进行关闭
				$( "#divData" ).datepicker( "option", "minDate", new Date(text) );
				doToShow(text,1);
				//$("divData").datepicker("option",'minDate',new Date(text));
			}
		});
	}
	var i = 0;
	//给文本框赋值
	function doToShow(text,num){
		var values =text;
		i = i+num;
		if(i==1){
			//第一个文本框的值
			$("#from").val(text);
		}else if(i==2){
			//第二个文本框的值
			$("#to").val(text);
			i = 0;
			$( "#divData" ).datepicker( "destroy" );
		}
		
	}
	//初始化时，打开日期控件
	function doInit(){
		$("#divData").css("display", "block");
		openDate();
	}
	//文本禁止框输入
	function noPermitInput(e){       
	       var evt = window.event || e ;     
	        if(isIE()){     
	            evt.returnValue=false; //ie 禁止键盘输入     
	        }else{     
	            evt.preventDefault(); //fire fox 禁止键盘输入     
	        }        
	}     
	function isIE() {     
	    if (window.navigator.userAgent.toLowerCase().indexOf("msie") >= 1)     
	        return true;     
	    else     
	        return false;     
	}   
</script>
</head>
<body style="" >
	<table width="100%" >
		<tr>
			<td><input type="text" id="from" name="to" οnclick="doInit()" οnkeypress="noPermitInput(event)" />至<input type="text" id="to" name="from" οnkeypress="noPermitInput(event)" /></td>
		</tr>
		<tr>
			<td><div id="divData" style="display: none;"></div></td>
		</tr>
	</table>
</body>
</html>

z313731418

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
datepicker 日期控件，两个文本框共一个日期控件

//jquery库//jquery-ui库//汉化包//日期控件初始化生成function openDate(){$("#divData").datepicker({//minDate:"-5y", maxDate: "+10y", //minDate最小几年，maxDate最大几年showWeek: true, //是否显示第周firstDay: 0, /
复制链接

扫一扫

专栏目录