I found a Time picker here: Time Picker. It is the second one on the list with the grey square and 4 arrows. I need to know how to add this time picker to a WordPress page. When I downloaded all the JS files and the CSS files it included an HTML page. But, if I use the HTML code (below) the arrows are missing so selecting the time doesn't work like the original page. The download provides me with the js and css files needed I just don't know how to use them.
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Time Entry</title>
<link href="jquery.timeentry.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.plugin.js"></script>
<script src="jquery.timeentry.js"></script>
<script>
$(function () {
$('#defaultEntry').timeEntry();
});
</script>
</head>
<body>
<h1>jQuery Time Entry Basics</h1>
<p>This page demonstrates the very basics of the
<a href="http://keith-wood.name/timeEntry.html">jQuery Time Entry plugin</a>.
It contains the minimum requirements for using the plugin and
can be used as the basis for your own experimentation.</p>
<p>For more detail see the <a href="http://keith-wood.name/timeEntryRef.html">documentation reference</a> page.</p>
<p>Enter your time: <input type="text" id="defaultEntry" size="10"></p>
</body>
</html>
These are the first two steps needed in the USAGE: section of the source page.
Include the jQuery library (1.7+) in the head section of your page.
Download and include the jQuery Time Entry CSS and JavaScript in the head section of your page.
I tried to add this code to my wordpress page on the text tab but I don't get the results I need:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Time Entry</title>
<link href="/wp-content/jquery.timeentry.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="/wp-content/jquery.plugin.js"></script>
<script type="text/javascript" src="/wp-content/jquery.timeentry.js"></script>
<script type="text/javascript">
<!--
$('#spinnerOrange').timeEntry({spinnerImage: 'wp-content/spinnerOrange.png'});
//--></script>
</head>
<body>
<h1>jQuery Time Entry Basics</h1>
<p>This page demonstrates the very basics of the
<a href="http://keith-wood.name/timeEntry.html">jQuery Time Entry plugin</a>.
It contains the minimum requirements for using the plugin and
can be used as the basis for your own experimentation.</p>
<p>For more detail see the <a href="http://keith-wood.name/timeEntryRef.html">documentation reference</a> page.</p>
<p>Enter your time: <input type="text" id="spinnerOrange" size="10"></p>
</body>
</html>
I am not sure if I referenced the script right or the stylesheet. Any help would be greatly appreciated.
Thanks, Matt