jQuery UI Datepicker

JavaScript
1

Hey guys,

I was trying to install this TIMEPICKER addon (http://trentrichardson.com/examples/timepicker/) for the jQuery UI Datepicker widget. (

I did everything it says on the website… but it wont work. Any ideas why I am seeing the border of the timepicker and the “done” button, but no other controls?

http://gauravmali.com/datepicker/demos/datepicker/icon-trigger.html




<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>jQuery UI Datepicker - Icon trigger</title>
	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script>
    <script type="text/javascript" src="../../jquery-ui-timepicker-addon-0.5.min.js"></script>
	<link type="text/css" href="../demos.css" rel="stylesheet" />
	<script type="text/javascript">
	$(function() {
		$("#datepicker").datepicker({
			showOn: 'button',
			buttonImage: 'images/calendar.gif',
			buttonImageOnly: true
		});
		$('#timepicker').timepicker();
	});
	</script>

</head>
<body>

<div class="demo">

<p>Date: <input type="text" id="datepicker"></p>

<p>Time: <input type="text" id="timepicker"></p>

</div><!-- End demo -->
</body>
</html>

I hope its not something embarrassing like missing jquery file… although that is Highly possible… :S

Please help! and thanks a lot!

~ gmali90

2

You must have something wrong with your javascript imports.

Your javascript and html are correct, you must be importing a wrong javascript file or you’re missing one…

anyway, start with this code (it should work) and then fix it as you please:


<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8" /> 
	<title>jQuery UI Datepicker - Icon trigger</title> 
    <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js"></script>
	<script type="text/javascript" src="../../jquery-ui-timepicker-addon-0.5.min.js"></script>

	<script type="text/javascript"> 
	$(function() {
		$("#datepicker").datepicker({
			showOn: 'button',
			buttonImage: 'images/calendar.gif',
			buttonImageOnly: true
		});
		$('#timepicker').timepicker();
	});
	</script> 
    
</head> 
<body> 
 
<div class="demo"> 
<p>Date: <input type="text" id="datepicker"></p> 
<p>Time: <input type="text" id="timepicker"></p> 
</div>
</body> 
</html>
3

Oh hey! Thanks…

but there is still something missing… the scrolls don’t look right… :S

4

jquery.ui.all.css is also a bad css file, or maybe you don’t have the correct images…
Anyway, this code should solve the problem:


<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8" /> 
	<title>jQuery UI Datepicker - Icon trigger</title> 
    <link type="text/css" href="http://trentrichardson.com/examples/timepicker/css/ui-lightness/jquery-ui-1.8.custom.css" rel="stylesheet" /> 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js"></script>
	<script type="text/javascript" src="../../jquery-ui-timepicker-addon-0.5.min.js"></script>

	<script type="text/javascript"> 
	$(function() {
		$("#datepicker").datepicker({
			showOn: 'button',
			buttonImage: 'images/calendar.gif',
			buttonImageOnly: true
		});
		$('#timepicker').timepicker();
	});
	</script> 
    
</head> 
<body> 
 
<div class="demo"> 
<p>Date: <input type="text" id="datepicker"></p> 
<p>Time: <input type="text" id="timepicker"></p> 
</div>
</body> 
</html>
5

woohoo! You are awesome!!!

I don’t know how the CSS files got corrupted… weird. Thanks a lot for your help! :slight_smile: