deprecated-addons/dav/timepicker/index.htm

134 lines
4.3 KiB
HTML
Raw Permalink Normal View History

<!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>