392 lines
14 KiB
HTML
392 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8'>
|
|
|
|
<title>Timepicker for jQuery – Demos and Documentation</title>
|
|
<meta name="description" content="A lightweight, customizable jQuery timepicker plugin inspired by Google Calendar. Add a user-friendly javascript timepicker dropdown to your app in minutes." />
|
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
|
|
|
<script type="text/javascript" src="jquery.timepicker.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="jquery.timepicker.css" />
|
|
|
|
<script type="text/javascript" src="lib/bootstrap-datepicker.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="lib/bootstrap-datepicker.css" />
|
|
|
|
<script type="text/javascript" src="lib/site.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="lib/site.css" />
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
|
|
<h1><a href="https://github.com/jonthornton/jquery-timepicker">jquery.timepicker</a></h1>
|
|
<p class="body-text">
|
|
A lightweight, customizable javascript timepicker plugin for jQuery inspired by Google Calendar.
|
|
</p>
|
|
|
|
<ul id="header-links">
|
|
<li><a href="https://github.com/jonthornton/jquery-timepicker#timepicker-plugin-for-jquery">Documentation</a></li>
|
|
<li><a href="https://github.com/jonthornton/jquery-timepicker">Source code on GitHub</a></li>
|
|
<li><a href="https://github.com/jonthornton/jquery-timepicker/zipball/master">Download (zip)</a></li>
|
|
<li><a href="https://github.com/jonthornton/jquery-timepicker/issues?state=open">Help</a></li>
|
|
</ul>
|
|
</header>
|
|
|
|
<section>
|
|
<p class="body-text">Use this plugin to unobtrusively add a timepicker dropdown to your forms. It's lightweight (2.7kb minified and gzipped) and easy to customize.</p>
|
|
</section>
|
|
|
|
<section id="examples">
|
|
<article>
|
|
<div class="demo">
|
|
<h2>Basic Example</h2>
|
|
<p><input id="basicExample" type="text" class="time" /></p>
|
|
</div>
|
|
|
|
<script>
|
|
$(function() {
|
|
$('#basicExample').timepicker();
|
|
});
|
|
</script>
|
|
|
|
<pre class="code" data-language="javascript">$('#basicExample').timepicker();</pre>
|
|
</article>
|
|
|
|
|
|
<article>
|
|
<div class="demo">
|
|
<h2>Scroll Default Example</h2>
|
|
<p>Set the scroll position to local time if no value selected.</p>
|
|
<p><input id="scrollDefaultExample" type="text" class="time" /></p>
|
|
</div>
|
|
|
|
<script>
|
|
$(function() {
|
|
$('#scrollDefaultExample').timepicker({ 'scrollDefault': 'now' });
|
|
});
|
|
</script>
|
|
|
|
<pre class="code" data-language="javascript">$('#scrollDefaultExample').timepicker({ 'scrollDefault': 'now' });</pre>
|
|
</article>
|
|
|
|
<article>
|
|
<div class="demo">
|
|
<h2>Set Time Example</h2>
|
|
<p>Dynamically set the time using a Javascript Date object.</p>
|
|
<p>
|
|
<input id="setTimeExample" type="text" class="time" />
|
|
<button id="setTimeButton">Set current time</button>
|
|
</p>
|
|
</div>
|
|
|
|
<script>
|
|
$(function() {
|
|
$('#setTimeExample').timepicker();
|
|
$('#setTimeButton').on('click', function (){
|
|
$('#setTimeExample').timepicker('setTime', new Date());
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<pre class="code" data-language="javascript">$('#setTimeExample').timepicker();
|
|
$('#setTimeButton').on('click', function (){
|
|
$('#setTimeExample').timepicker('setTime', new Date());
|
|
});</pre>
|
|
</article>
|
|
|
|
<article>
|
|
<div class="demo">
|
|
<h2>Duration Example</h2>
|
|
<p>Set a starting time and see duration from that starting time. You can optionally set an maxTime as well.</p>
|
|
<p><input id="durationExample" type="text" class="time" /></p>
|
|
</div>
|
|
|
|
<script>
|
|
$(function() {
|
|
$('#durationExample').timepicker({
|
|
'minTime': '2:00pm',
|
|
'maxTime': '11:30pm',
|
|
'showDuration': true
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<pre class="code" data-language="javascript">$('#durationExample').timepicker({
|
|
'minTime': '2:00pm',
|
|
'maxTime': '11:30pm',
|
|
'showDuration': true
|
|
});</pre>
|
|
</article>
|
|
|
|
<article>
|
|
<div class="demo">
|
|
<h2>Event Example</h2>
|
|
<p>Trigger an event after selecting a value. Fires before the input onchange event.</p>
|
|
<p>
|
|
<input id="onselectExample" type="text" class="time" />
|
|
<span id="onselectTarget" style="margin-left: 30px;"></span>
|
|
</p>
|
|
</div>
|
|
|
|
<script>
|
|
$(function() {
|
|
$('#onselectExample').timepicker();
|
|
$('#onselectExample').on('changeTime', function() {
|
|
$('#onselectTarget').text($(this).val());
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<pre class="code" data-language="javascript">$('#onselectExample').timepicker();
|
|
$('#onselectExample').on('changeTime', function() {
|
|
$('#onselectTarget').text($(this).val());
|
|
});</pre>
|
|
</article>
|
|
|
|
<article>
|
|
<div class="demo">
|
|
<h2>DisableTimeRanges Example</h2>
|
|
<p>Prevent selection of certain time values.</p>
|
|
<p><input id="disableTimeRangesExample" type="text" class="time" /></p>
|
|
</div>
|
|
|
|
<script>
|
|
$(function() {
|
|
$('#disableTimeRangesExample').timepicker({ 'disableTimeRanges': [['1am', '2am'], ['3am', '4:01am']] });
|
|
});
|
|
</script>
|
|
|
|
<pre class="code" data-language="javascript">$('#disableTimeRangesExample').timepicker({
|
|
'disableTimeRanges': [
|
|
['1am', '2am'],
|
|
['3am', '4:01am']
|
|
]
|
|
});</pre>
|
|
</article>
|
|
|
|
<article>
|
|
<div class="demo">
|
|
<h2>noneOption Example</h2>
|
|
<p>Custom options can be added to the dropdown menu.</p>
|
|
<p><input id="noneOptionExample" type="text" class="time" /></p>
|
|
</div>
|
|
|
|
<script>
|
|
$(function() {
|
|
$('#noneOptionExample').timepicker({
|
|
'noneOption': [
|
|
{
|
|
'label': 'Foobar',
|
|
'className': 'shibby',
|
|
'value': '42'
|
|
},
|
|
'Foobar2'
|
|
]
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<pre class="code" data-language="javascript">
|
|
$('#noneOptionExample').timepicker({
|
|
'noneOption': [
|
|
{
|
|
'label': 'Foobar',
|
|
'className': 'shibby',
|
|
'value': '42'
|
|
},
|
|
'Foobar2'
|
|
]
|
|
});
|
|
</pre>
|
|
</article>
|
|
|
|
<article>
|
|
<div class="demo">
|
|
<h2>timeFormat Example</h2>
|
|
<p>timepicker.jquery uses the time portion of <a href="http://php.net/manual/en/function.date.php">PHP's date formatting commands</a>.</p>
|
|
<p><input id="timeformatExample1" type="text" class="time" /> <input id="timeformatExample2" type="text" class="time" /></p>
|
|
</div>
|
|
|
|
<script>
|
|
$(function() {
|
|
$('#timeformatExample1').timepicker({ 'timeFormat': 'H:i:s' });
|
|
$('#timeformatExample2').timepicker({ 'timeFormat': 'h:i A' });
|
|
});
|
|
</script>
|
|
|
|
<pre class="code" data-language="javascript">$('#timeformatExample1').timepicker({ 'timeFormat': 'H:i:s' });
|
|
$('#timeformatExample2').timepicker({ 'timeFormat': 'h:i A' });</pre>
|
|
</article>
|
|
|
|
<article>
|
|
<div class="demo">
|
|
<h2>Step Example</h2>
|
|
<p>Generate drop-down options with varying levels of precision.</p>
|
|
<p><input id="stepExample1" type="text" class="time" /> <input id="stepExample2" type="text" class="time" /></p>
|
|
</div>
|
|
|
|
<script>
|
|
$(function() {
|
|
$('#stepExample1').timepicker({ 'step': 15 });
|
|
$('#stepExample2').timepicker({
|
|
'step': function(i) {
|
|
return (i%2) ? 15 : 45;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<pre class="code" data-language="javascript">$('#stepExample1').timepicker({ 'step': 15 });
|
|
$('#stepExample2').timepicker({
|
|
'step': function(i) {
|
|
return (i%2) ? 15 : 45;
|
|
}
|
|
});</pre>
|
|
</article>
|
|
|
|
<article>
|
|
<div class="demo">
|
|
<h2>forceRoundTime Example</h2>
|
|
<p>jquery-timepicker allows entering times via the keyboard. Setting forceRoundTime to true will
|
|
round the entered time to the nearest option on the dropdown list.</p>
|
|
<p><input id="roundTimeExample" type="text" class="time" /> </p>
|
|
</div>
|
|
|
|
<script>
|
|
$(function() {
|
|
$('#roundTimeExample').timepicker({ 'forceRoundTime': true });
|
|
});
|
|
</script>
|
|
|
|
<pre class="code" data-language="javascript">$('#roundTimeExample').timepicker({ 'forceRoundTime': true });</pre>
|
|
</article>
|
|
|
|
<article>
|
|
<div class="demo">
|
|
<h2>Select Example</h2>
|
|
<p>jquery-timepicker can render itself as a select element too.</p>
|
|
<p><input id="selectExample" class="time" /> <button id="selectButton">Toggle</button></p>
|
|
</div>
|
|
|
|
<script>
|
|
$(function() {
|
|
$('#selectExample').timepicker();
|
|
$('#selectButton').click(function(e) {
|
|
$('#selectExample').timepicker('option', { useSelect: true });
|
|
$(this).hide();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<pre class="code" data-language="javascript">$('#selectExample').timepicker();
|
|
$('#selectButton').click(function(e) {
|
|
$('#selectExample').timepicker('option', { useSelect: true });
|
|
$(this).hide();
|
|
});</pre>
|
|
</article>
|
|
|
|
<article>
|
|
<div class="demo">
|
|
<h2>Non-input Example</h2>
|
|
<p>jquery-timepicker can be bound to any visibile DOM element, such as spans or divs.</p>
|
|
<p><span id="spanExample" style="background:#f00; padding:0 10px; margin-right:100px;"></span> <button id="openSpanExample">Pick Time</button> </p>
|
|
</div>
|
|
|
|
<script>
|
|
$(function() {
|
|
$('#spanExample').timepicker();
|
|
$('#openSpanExample').on('click', function(){
|
|
$('#spanExample').timepicker('show');
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<pre class="code" data-language="javascript">$('#spanExample').timepicker();
|
|
$('#openSpanExample').on('click', function(){
|
|
$('#spanExample').timepicker('show');
|
|
});</pre>
|
|
</article>
|
|
|
|
<article>
|
|
<div class="demo">
|
|
<h2>Datepair Plugin Example</h2>
|
|
|
|
<p>jquery-timepicker is designed to work with the <a href="http://jonthornton.github.com/Datepair.js">jquery-datepair plugin</a>.
|
|
|
|
<p id="datepairExample">
|
|
<input type="text" class="date start" />
|
|
<input type="text" class="time start" /> to
|
|
<input type="text" class="time end" />
|
|
<input type="text" class="date end" />
|
|
</p>
|
|
</div>
|
|
|
|
<script src="http://jonthornton.github.io/Datepair.js/dist/datepair.js"></script>
|
|
<script src="http://jonthornton.github.io/Datepair.js/dist/jquery.datepair.js"></script>
|
|
<script>
|
|
$('#datepairExample .time').timepicker({
|
|
'showDuration': true,
|
|
'timeFormat': 'g:ia'
|
|
});
|
|
|
|
$('#datepairExample .date').datepicker({
|
|
'format': 'm/d/yyyy',
|
|
'autoclose': true
|
|
});
|
|
|
|
$('#datepairExample').datepair();
|
|
</script>
|
|
|
|
<pre class="code" data-language="javascript">
|
|
<p id="datepairExample">
|
|
<input type="text" class="date start" />
|
|
<input type="text" class="time start" /> to
|
|
<input type="text" class="time end" />
|
|
<input type="text" class="date end" />
|
|
</p>
|
|
|
|
<script type="text/javascript" src="datepair.js"></script>
|
|
<script type="text/javascript" src="jquery.datepair.js"></script>
|
|
<script>
|
|
// initialize input widgets first
|
|
$('#datepairExample .time').timepicker({
|
|
'showDuration': true,
|
|
'timeFormat': 'g:ia'
|
|
});
|
|
|
|
$('#datepairExample .date').datepicker({
|
|
'format': 'yyyy-m-d',
|
|
'autoclose': true
|
|
});
|
|
|
|
// initialize datepair
|
|
$('#datepairExample').datepair();
|
|
</script></pre>
|
|
|
|
</article>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Need Help?</h2>
|
|
<p>Check <a href="https://github.com/jonthornton/jquery-timepicker#timepicker-plugin-for-jquery">the documentation</a> or <a href="https://github.com/jonthornton/jquery-timepicker/issues?state=open">submit an issue</a> on GitHub.</p>
|
|
</section>
|
|
|
|
<footer>
|
|
<p>© 2014 <a href="http://jonthornton.com">Jon Thornton</a></p>
|
|
</footer>
|
|
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-15605525-4', 'auto');
|
|
ga('send', 'pageview');
|
|
|
|
</script>
|
|
</div></body>
|
|
</html>
|