134 lines
4.3 KiB
HTML
134 lines
4.3 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
|
|
<head>
|
|
<title>jQuery timePicker</title>
|
|
<style type="text/css" media="all">@import "timePicker.css";</style>
|
|
<style type="text/css">
|
|
div {
|
|
margin-top:3em;
|
|
}
|
|
input {
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
body {
|
|
background: #eee;
|
|
}
|
|
pre {
|
|
background:#fff;
|
|
border:1px solid #ddd;
|
|
padding:4px;
|
|
}
|
|
.error {
|
|
border:1px solid red;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
|
|
<script type="text/javascript" src="jquery.timePicker.js"></script>
|
|
<script type="text/javascript">
|
|
jQuery(function() {
|
|
// Default.
|
|
$("#time1").timePicker();
|
|
// 02.00 AM - 03.30 PM, 15 minutes steps.
|
|
$("#time2").timePicker({
|
|
startTime: "02.00", // Using string. Can take string or Date object.
|
|
endTime: new Date(0, 0, 0, 15, 30, 0), // Using Date object.
|
|
show24Hours: false,
|
|
separator:'.',
|
|
step: 15});
|
|
|
|
// An example how the two helper functions can be used to achieve
|
|
// advanced functionality.
|
|
// - Linking: When changing the first input the second input is updated and the
|
|
// duration is kept.
|
|
// - Validation: If the second input has a time earlier than the firs input,
|
|
// an error class is added.
|
|
|
|
// Use default settings
|
|
$("#time3, #time4").timePicker();
|
|
|
|
// Store time used by duration.
|
|
var oldTime = $.timePicker("#time3").getTime();
|
|
|
|
// Keep the duration between the two inputs.
|
|
$("#time3").change(function() {
|
|
if ($("#time4").val()) { // Only update when second input has a value.
|
|
// Calculate duration.
|
|
var duration = ($.timePicker("#time4").getTime() - oldTime);
|
|
var time = $.timePicker("#time3").getTime();
|
|
// Calculate and update the time in the second input.
|
|
$.timePicker("#time4").setTime(new Date(new Date(time.getTime() + duration)));
|
|
oldTime = time;
|
|
}
|
|
});
|
|
// Validate.
|
|
$("#time4").change(function() {
|
|
if($.timePicker("#time3").getTime() > $.timePicker(this).getTime()) {
|
|
$(this).addClass("error");
|
|
}
|
|
else {
|
|
$(this).removeClass("error");
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>jQuery timePicker</h1>
|
|
<p>A time picker for jQuery inspired by Google Calendar</p>
|
|
<p>Get the latest code on Github (the files used on this page might not be the latest): <a href="http://github.com/perifer/timePicker">http://github.com/perifer/timePicker</a>
|
|
|
|
<div><input type="text" id="time1" size="10" /></div>
|
|
<pre><code>// Default.
|
|
$("#time1").timePicker();</code></pre>
|
|
|
|
<div><input type="text" id="time2" size="10" value="12.00 PM"/></div>
|
|
<pre><code>// 02.00 AM - 03.30 PM, 15 minutes steps.
|
|
$("#time2").timePicker({
|
|
startTime: "02.00", // Using string. Can take string or Date object.
|
|
endTime: new Date(0, 0, 0, 15, 30, 0), // Using Date object here.
|
|
show24Hours: false,
|
|
separator: '.',
|
|
step: 15});</code></pre>
|
|
|
|
<div><input type="text" id="time3" size="10" value="08:00" /> <input type="text" id="time4" size="10" value="09:00" /></div>
|
|
<pre><code>// An example how the two helper functions can be used to achieve
|
|
// advanced functionality.
|
|
// - Linking: When changing the first input the second input is updated and the
|
|
// duration is kept.
|
|
// - Validation: If the second input has a time earlier than the firs input,
|
|
// an error class is added.
|
|
|
|
// Use default settings
|
|
$("#time3, #time4").timePicker();
|
|
|
|
// Store time used by duration.
|
|
var oldTime = $.timePicker("#time3").getTime();
|
|
|
|
// Keep the duration between the two inputs.
|
|
$("#time3").change(function() {
|
|
if ($("#time4").val()) { // Only update when second input has a value.
|
|
// Calculate duration.
|
|
var duration = ($.timePicker("#time4").getTime() - oldTime);
|
|
var time = $.timePicker("#time3").getTime();
|
|
// Calculate and update the time in the second input.
|
|
$.timePicker("#time4").setTime(new Date(new Date(time.getTime() + duration)));
|
|
oldTime = time;
|
|
}
|
|
});
|
|
// Validate.
|
|
$("#time4").change(function() {
|
|
if($.timePicker("#time3").getTime() > $.timePicker(this).getTime()) {
|
|
$(this).addClass("error");
|
|
}
|
|
else {
|
|
$(this).removeClass("error");
|
|
}
|
|
});</code></pre>
|
|
|
|
</body>
|
|
</html>
|