index.html

<!DOCTYPE html>
<html>

<head>
	<meta charset='utf-8'>
	<title>Timepicker for jQuery &ndash; 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 src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></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="documentation-assets/bootstrap-datepicker.js"></script>
	<link rel="stylesheet" type="text/css" href="documentation-assets/bootstrap-datepicker.css" />
	<script type="text/javascript" src="documentation-assets/site.js"></script>
	<link rel="stylesheet" type="text/css" href="documentation-assets/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': 'oh hai'
						},
						'Foobar2'
					]
				});
			});
			</script>
			<pre class="code" data-language="javascript">
$('#noneOptionExample').timepicker({
	'noneOption': [
		{
			'label': 'Foobar',
			'className': 'shibby',
			'value': 'oh hai'
		},
		'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" name="foo" />
					<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="spanExampleTarget" style="background:#f00; padding:0 10px; margin-right:100px;"></span>
					<span id="spanExampleDisplay" style=""></span>
					<button id="openSpanExample">Pick Time</button>
				</p>
			</div>
			<script>
			$(function() {
				$('#spanExampleTarget').timepicker()
				$('#spanExampleTarget').on('changeTime', function(e){
					console.log($('#spanExampleTarget').timepicker('getTime'));
				});
				$('#openSpanExample').on('click', function() {
					$('#spanExampleTarget').timepicker('show');
				});
			});
			</script>
			<pre class="code" data-language="javascript">$('#spanExampleTarget').timepicker()
$('#spanExampleTarget').on('changeTime', function(e){
	console.log($('#spanExampleTarget').timepicker('getTime'));
});
$('#openSpanExample').on('click', function() {
	$('#spanExampleTarget').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="https://jonthornton.github.io/Datepair.js/dist/datepair.js"></script>
			<script src="https://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">
&lt;p id="datepairExample"&gt;
	&lt;input type="text" class="date start" /&gt;
	&lt;input type="text" class="time start" /&gt; to
	&lt;input type="text" class="time end" /&gt;
	&lt;input type="text" class="date end" /&gt;
&lt;/p&gt;

&lt;script type="text/javascript" src="datepair.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery.datepair.js"&gt;&lt;/script&gt;
&lt;script&gt;
	// 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();
&lt;/script&gt;</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>&copy; 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>