2012-06-03 18:19:28 +00:00
<!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 >
2012-08-14 16:28:43 +00:00
< script type = "text/javascript" src = "//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" > < / script >
2012-06-03 18:19:28 +00:00
< 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 >
< script type = "text/javascript" >
// Analytics.
var _gaq=_gaq||[];_gaq.push(["_setAccount","UA-123444-3"]),_gaq.push(["_trackPageview"]),function(){var a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=("https:"==document.location.protocol?"https://ssl":"http://www")+".google-analytics.com/ga.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)}()
< / 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 >
