您的位置：首页 > Web前端 > JQuery
datepicker 日期控件，两个文本框共一个日期控件

2014-03-16 23:39 246 查看
<!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" onclick="doInit()" onkeypress="noPermitInput(event)" />至<input type="text" id="to" name="from" onkeypress="noPermitInput(event)" /></td>
</tr>
<tr>
<td><div id="divData" style="display: none;"></div></td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： datepicker 控件 jquery
相关文章推荐
新的分享
章节导航