求一段jquery时间选择特效代码，单击开始时间选择完毕以后自动跳到第二个时间框选择时间！
展开全部
jquery有提供datepicker~里面有一个date_range，在jquery提供的例子里面，我们只需要加上选择完毕，跳转到另外一个时间框进行选择就好了~是吧~那么~我们就
--------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.5.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
var dates = $( "#from, #to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
//numberOfMonths: 3,
numberOfDays:1,
onSelect: function( selectedDate ) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
},
onClose : function (dateText , inst){
if($("#to").val() == "" ){
$("#to").focus();
}
if($("#from").val() == "" ){
$("#from").focus();
}
}
});
});
</script>
</head>
<body>
<div class="demo">
<label for="from">From</label>
<input type="text" id="from" name="from"/>
<label for="to">to</label>
<input type="text" id="to" name="to"/>
</div><!-- End demo -->
</body>
</html>
-------------------------------------
添加上onclose事件~当其中一个选择完毕以后~就判断，如果另外一个的值为空，就focus();这样也出发了datepicker~
如果不是清楚~请追问，我可以把改好的打包给你~
更多datepicker的信息~
http://jqueryui.com/demos/datepicker/#date-range
--------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.5.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
var dates = $( "#from, #to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
//numberOfMonths: 3,
numberOfDays:1,
onSelect: function( selectedDate ) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
},
onClose : function (dateText , inst){
if($("#to").val() == "" ){
$("#to").focus();
}
if($("#from").val() == "" ){
$("#from").focus();
}
}
});
});
</script>
</head>
<body>
<div class="demo">
<label for="from">From</label>
<input type="text" id="from" name="from"/>
<label for="to">to</label>
<input type="text" id="to" name="to"/>
</div><!-- End demo -->
</body>
</html>
-------------------------------------
添加上onclose事件~当其中一个选择完毕以后~就判断，如果另外一个的值为空，就focus();这样也出发了datepicker~
如果不是清楚~请追问，我可以把改好的打包给你~
更多datepicker的信息~
http://jqueryui.com/demos/datepicker/#date-range
追问
我要您的QQ！~~~~我的是121022133~！~~~谢谢！
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用jquery的triggle方法实现！
可以在设置第一个时间选择框完成后，回调函数，通过triggle方法触发第二个选择框的click方法
可以在设置第一个时间选择框完成后，回调函数，通过triggle方法触发第二个选择框的click方法
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
"-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src=" "></script>
<style type="text/css">
body{
font-size: 20px;
}
li
div
</style>
<script type="text/javascript">
$(document).ready(function(){
$("div").hover(
function(){
$(this).prev('li').animate(,1000);
},
function(){
$(this).prev('li').animate(,1000);
});
});
</script>
</head>
<body>
<ul>
<li></li><div>111</div>
<li></li><div>222</div>
<li></li><div>333</div>
<li></li><div>444</div>
<li></li><div>555</div>
</ul>
</body>
</html>
另外,站长团上有产品团购,便宜有保证
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src=" "></script>
<style type="text/css">
body{
font-size: 20px;
}
li
div
</style>
<script type="text/javascript">
$(document).ready(function(){
$("div").hover(
function(){
$(this).prev('li').animate(,1000);
},
function(){
$(this).prev('li').animate(,1000);
});
});
</script>
</head>
<body>
<ul>
<li></li><div>111</div>
<li></li><div>222</div>
<li></li><div>333</div>
<li></li><div>444</div>
<li></li><div>555</div>
</ul>
</body>
</html>
另外,站长团上有产品团购,便宜有保证
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
