init
This commit is contained in:
391
include/jQuery/jquery-timepicker/index.html
Normal file
391
include/jQuery/jquery-timepicker/index.html
Normal file
@@ -0,0 +1,391 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user