Skip to content

Instantly share code, notes, and snippets.

@jhuttner

jhuttner/datetimepicker_issue56.html

Created December 15, 2010 15:46
Show Gist options
  • Save jhuttner/742117 to your computer and use it in GitHub Desktop.
Save jhuttner/742117 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
datetimepicker_issue56.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Adding a Timepicker to jQuery UI Datepicker</title>
<meta name="Description" content="jQuery Timepicker Addon. Add a timepicker to your jQuery UI Datepicker. With options to show only time, format time, and much more." />
<meta name="Keywords" content="jQuery, UI, datepicker, timepicker, datetime, time, format" />
<link rel="stylesheet" media="all" type="text/css" href="http://trentrichardson.com/examples/timepicker/css/ui-lightness/jquery-ui-1.8.6.custom.css" />
<style type="text/css">
body,img,p,h1,h2,h3,h4,h5,h6,form,table,td,ul,li,dl,dt,dd,pre,blockquote,fieldset,label{
margin:0;
padding:0;
border:0;
}
body{ border-top: solid 4px #C60; font: 90% Arial, Helvetica, sans-serif; padding: 20px; }
h1,h2{ margin: 10px 0; }
p{ margin: 10px 0; }
pre{ padding: 20px; background-color: #ffffcc; border: solid 1px #fff; }
.wrapper{ background-color: #ffffff; width: 800px; border: solid 1px #eeeeee; padding: 20px; margin: 0 auto; }
.example-container{ background-color: #f4f4f4; border-bottom: solid 2px #777777; margin: 0 0 40px 0; padding: 20px; }
.example-container p{ font-weight: bold; }
.example-container dt{ font-weight: bold; height: 20px; }
.example-container dd{ margin: -20px 0 10px 100px; border-bottom: solid 1px #fff; }
.example-container input{ width: 150px; }
.clear{ clear: both; }
#ui-datepicker-div{ font-size: 80%; }
/* css for timepicker */
.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
.ui-timepicker-div dl{ text-align: left; }
.ui-timepicker-div dl dt{ height: 25px; }
.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
</style>
<script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript" src="https://github.com/trentrichardson/jQuery-Timepicker-Addon/raw/dev/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
$(function(){
$("#one").datetimepicker({
onSelect: function(dateText, inst) {
$("#two").datetimepicker('option', 'minDate', dateText);
}
});
$("#two").datetimepicker({
onSelect: function(dateText, inst) {
$("#one").datetimepicker('option', 'maxDate', dateText);
}
});
$(".reset-end").bind('click', function(e) {
e.preventDefault();
$("#one").datetimepicker('option', 'maxDate', null);
});
$(".reset-start").bind('click', function(e) {
e.preventDefault();
$("#two").datetimepicker('option', 'minDate', null);
});
});
</script>
</head>
<body>
<h1>Issues:</h1>
<ol>
<li>
Click any date in the first date picker. The input of the second should not get filled in, but it does.
</li>
<li>
Load the page. Click either unset link; it fills in the corresponding input, but it shouldn't.
</li>
</ol>
<p>============================================================</p>
<p>First date picker: <input type="text" id="one" />
<p><a href="#" class="reset-end">Unset maxDate of first datetimepicker</a></p>
<br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>
<p>Second date picker: <input type="text" id="two" />
<p><a href="#" class="reset-start">Unset minDate of second datetimepicker</a></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment