Syntax for using onSelect with jQuery's datepicker
Simple enough, I hope. I'm trying to get a div to fadeIn when I click on a date in jQuery's datepicker:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="../datepi开发者_如何学运维cker/jquery.ui.core.js"></script>
<script type="text/javascript" src="../datepicker/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../datepicker/jquery.ui.datepicker.js"></script>
<script>
$(document).ready(function() {
$('#datepicker').datepicker();
$('#datepicker').datepicker({
onSelect: function(dateText, inst) {
$('#foo').fadeIn();
});
});
});
</script>
</head>
<body style="font-size:62.5%;">
<p>Choose a date: <input id="datepicker" type="text"></p>
<div id="foo">FOO</div>
</body>
</html>
1. Your code has an extra parentheses and a semi-colon, see the comment on the code below:
$(document).ready(function() {
$('#datepicker').datepicker();
$('#datepicker').datepicker({
onSelect: function(dateText, inst) {
$('#foo').fadeIn();
}); // <-- HERE, it should be just }
});
});
This is the correct code:
$(document).ready(function() {
$('#datepicker').datepicker({
onSelect: function(dateText, inst) {
$('#foo').fadeIn();
}
});
});
2. There is no need to attach the datepicker() twice to the same element, you just assign it once, with the appropriate parameters, hence why I removed the extra $('#datepicker').datepicker().
3. You should hide the element in order for it to remain hidden until you fade it in. Use this CSS:
#foo{
display: none;
}
Check a demo here »
You have errors on your javascript and another problem is that you can't fadeIn() an element which is visible: you have to hide it before.
Try this:
$(document).ready(function() {
$('#foo').hide();
$('#datepicker').datepicker({
onSelect: function(dateText, inst) {
$('#foo').fadeIn();
}
});
});
fiddle: http://jsfiddle.net/vH4HV/1/
加载中,请稍侯......
精彩评论