ThaMunsta/itflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed up client files can now download and delete files, added web link to client logins added payments, quotes and recurring to client print and lots of little ui cleanups here and there

Browse Source
This commit is contained in:
root
2019-05-11 20:06:01 -04:00
parent f5377409b0
commit 5c55358841
750 changed files with 225007 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

853
vendor/datepicker/docs/Usage/index.html vendored Normal file
View File

@@ -0,0 +1,853 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#144287">
<meta name="theme-color" content="#ffffff">
<title>Usage - Tempus Dominus - Bootstrap 4</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha256-Md8eaeo67OiouuXAi8t/Xpd8t2+IaJezATVTWbZqSOw=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" />
<link href="../theme/css/base.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github.min.css" rel="stylesheet">
<link href="../theme/css/tempusdominus-bootstrap-4.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha256-98vAGjEDGN79TjHkYWVD4s87rvWkdWLHPs5MC3FvFX4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha256-xaF9RpdtRxzwYMWg4ldJoyPWqyDPCRD0Cv7YEEe6Ie8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.21/moment-timezone-with-data-2012-2022.min.js"></script>
<script>var base_url = '..';</script>
<script src="../theme/js/base.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="../theme/js/tempusdominus-bootstrap-4.js"></script>
</head>
<body>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand" href="https://tempusdominus.github.io/bootstrap-4/"><img src="https://tempusdominus.github.io/bootstrap-4/favicon-32x32.png" alt="home" /></a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li class="nav-item">
<a class="nav-link " href="..">Tempus Dominus Bootstrap 4</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="./">Usage</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../Installing/">Installing</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../Functions/">Functions</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../Options/">Options</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../Events/">Events</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../Changelog/">Change Log</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../ContributorsGuide/">Dev Guide</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../Extras/">Extras</a>
</li>
<li class="nav-item">
<a class="nav-link " href="../FAQ/">FAQs</a>
</li>
</ul>
</div>
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
<li class="nav-item">
<a class="nav-link p-2" href="https://github.com/tempusdominus/bootstrap-4" target="_blank" rel="noopener" aria-label="GitHub">
<span class="fa fa-github"></span>
</a>
</li>
</ul>
</header>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"><script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7DC5QN&placement=eonasdangithubio" id="_carbonads_js"></script>
<nav class="bd-links" id="docsNavbarContent">
<div class="bd-toc-item active">
<ul class="nav bd-sidenav">
<li class="active bd-sidenav-active"><a href="#bootstrap4-v5-docs">Bootstrap4 v5 Docs</a></li>
<li><a href="#minimum-setup">Minimum Setup</a></li>
<li><a href="#using-locales">Using Locales</a></li>
<li><a href="#time-only">Time Only</a></li>
<li><a href="#date-only">Date Only</a></li>
<li><a href="#no-icon-input-field-only">No Icon (input field only):</a></li>
<li><a href="#enableddisabled-dates">Enabled/Disabled Dates</a></li>
<li><a href="#linked-pickers">Linked Pickers</a></li>
<li><a href="#custom-icons">Custom Icons</a></li>
<li><a href="#view-mode">View Mode</a></li>
<li><a href="#min-view-mode">Min View Mode</a></li>
<li><a href="#disabled-days-of-the-week">Disabled Days of the Week</a></li>
<li><a href="#inline">Inline</a></li>
<li><a href="#multidate">Multidate</a></li>
<li><a href="#setting-options">Setting Options</a></li>
</ul>
</div>
</nav></div>
<div class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title">Usage</h1>
<h1 id="bootstrap4-v5-docs">Bootstrap4 v5 Docs</h1>
<div class="alert alert-info">
<strong>Note</strong>
All functions are accessed via the <code>$('#datetimepicker').datetimepicker(FUNCTION)</code>
</div>
<h3 id="minimum-setup">Minimum Setup</h3>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
<h4 id="code">Code</h4>
<pre><code>&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-6&quot;&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;div class=&quot;input-group date&quot; id=&quot;datetimepicker1&quot; data-target-input=&quot;nearest&quot;&gt;
&lt;input type=&quot;text&quot; class=&quot;form-control datetimepicker-input&quot; data-target=&quot;#datetimepicker1&quot;/&gt;
&lt;div class=&quot;input-group-append&quot; data-target=&quot;#datetimepicker1&quot; data-toggle=&quot;datetimepicker&quot;&gt;
&lt;div class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;fa fa-calendar&quot;&gt;&lt;/i&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(function () {
$('#datetimepicker1').datetimepicker();
});
&lt;/script&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<hr />
<h3 id="using-locales">Using Locales</h3>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker2" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker2"/>
<div class="input-group-append" data-target="#datetimepicker2" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker2').datetimepicker({
locale: 'ru'
});
});
</script>
</div>
</div>
<h4 id="code_1">Code</h4>
<pre><code>&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-6&quot;&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;div class=&quot;input-group date&quot; id=&quot;datetimepicker2&quot; data-target-input=&quot;nearest&quot;&gt;
&lt;input type=&quot;text&quot; class=&quot;form-control datetimepicker-input&quot; data-target=&quot;#datetimepicker2&quot;/&gt;
&lt;div class=&quot;input-group-append&quot; data-target=&quot;#datetimepicker2&quot; data-toggle=&quot;datetimepicker&quot;&gt;
&lt;div class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;fa fa-calendar&quot;&gt;&lt;/i&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(function () {
$('#datetimepicker2').datetimepicker({
locale: 'ru'
});
});
&lt;/script&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<hr />
<h3 id="time-only">Time Only</h3>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker3" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker3"/>
<div class="input-group-append" data-target="#datetimepicker3" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-clock-o"></i></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});
</script>
</div>
</div>
<h4 id="code_2">Code</h4>
<pre><code>&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-6&quot;&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;div class=&quot;input-group date&quot; id=&quot;datetimepicker3&quot; data-target-input=&quot;nearest&quot;&gt;
&lt;input type=&quot;text&quot; class=&quot;form-control datetimepicker-input&quot; data-target=&quot;#datetimepicker3&quot;/&gt;
&lt;div class=&quot;input-group-append&quot; data-target=&quot;#datetimepicker3&quot; data-toggle=&quot;datetimepicker&quot;&gt;
&lt;div class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;fa fa-clock-o&quot;&gt;&lt;/i&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});
&lt;/script&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<hr />
<h3 id="date-only">Date Only</h3>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker4" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker4"/>
<div class="input-group-append" data-target="#datetimepicker4" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({
format: 'L'
});
});
</script>
</div>
</div>
<h4 id="code_3">Code</h4>
<pre><code>&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-6&quot;&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;div class=&quot;input-group date&quot; id=&quot;datetimepicker4&quot; data-target-input=&quot;nearest&quot;&gt;
&lt;input type=&quot;text&quot; class=&quot;form-control datetimepicker-input&quot; data-target=&quot;#datetimepicker4&quot;/&gt;
&lt;div class=&quot;input-group-append&quot; data-target=&quot;#datetimepicker4&quot; data-toggle=&quot;datetimepicker&quot;&gt;
&lt;div class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;fa fa-calendar&quot;&gt;&lt;/i&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(function () {
$('#datetimepicker4').datetimepicker({
format: 'L'
});
});
&lt;/script&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<hr />
<h3 id="no-icon-input-field-only">No Icon (input field only):</h3>
<div class="container">
<div class="row">
<div class="col-sm-6">
<input type="text" class="form-control datetimepicker-input" id="datetimepicker5" data-toggle="datetimepicker" data-target="#datetimepicker5"/>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker5').datetimepicker();
});
</script>
</div>
</div>
<h4 id="code_4">Code</h4>
<pre><code>
&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-6&quot;&gt;
&lt;input type=&quot;text&quot; class=&quot;form-control datetimepicker-input&quot; id=&quot;datetimepicker5&quot; data-toggle=&quot;datetimepicker&quot; data-target=&quot;#datetimepicker5&quot;/&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(function () {
$('#datetimepicker5').datetimepicker();
});
&lt;/script&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<hr />
<h3 id="enableddisabled-dates">Enabled/Disabled Dates</h3>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker6" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker6"/>
<div class="input-group-append" data-target="#datetimepicker6" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker6').datetimepicker({
defaultDate: "11/1/2013",
disabledDates: [
moment("12/25/2013"),
new Date(2013, 11 - 1, 21),
"11/22/2013 00:53"
]
});
});
</script>
</div>
</div>
<h4 id="code_5">Code</h4>
<pre><code>&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-6&quot;&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;div class=&quot;input-group date&quot; id=&quot;datetimepicker6&quot; data-target-input=&quot;nearest&quot;&gt;
&lt;input type=&quot;text&quot; class=&quot;form-control datetimepicker-input&quot; data-target=&quot;#datetimepicker6&quot;/&gt;
&lt;div class=&quot;input-group-append&quot; data-target=&quot;#datetimepicker6&quot; data-toggle=&quot;datetimepicker&quot;&gt;
&lt;div class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;fa fa-calendar&quot;&gt;&lt;/i&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(function () {
$('#datetimepicker6').datetimepicker({
defaultDate: &quot;11/1/2013&quot;,
disabledDates: [
moment(&quot;12/25/2013&quot;),
new Date(2013, 11 - 1, 21),
&quot;11/22/2013 00:53&quot;
]
});
});
&lt;/script&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<hr />
<h3 id="linked-pickers">Linked Pickers</h3>
<div class="container">
<div class='col-md-5'>
<div class="form-group">
<div class="input-group date" id="datetimepicker7" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker7"/>
<div class="input-group-append" data-target="#datetimepicker7" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div class="input-group date" id="datetimepicker8" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker8"/>
<div class="input-group-append" data-target="#datetimepicker8" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker7').datetimepicker();
$('#datetimepicker8').datetimepicker({
useCurrent: false
});
$("#datetimepicker7").on("change.datetimepicker", function (e) {
$('#datetimepicker8').datetimepicker('minDate', e.date);
});
$("#datetimepicker8").on("change.datetimepicker", function (e) {
$('#datetimepicker7').datetimepicker('maxDate', e.date);
});
});
</script>
<h4 id="code_6">Code</h4>
<pre><code>&lt;div class=&quot;container&quot;&gt;
&lt;div class='col-md-5'&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;div class=&quot;input-group date&quot; id=&quot;datetimepicker7&quot; data-target-input=&quot;nearest&quot;&gt;
&lt;input type=&quot;text&quot; class=&quot;form-control datetimepicker-input&quot; data-target=&quot;#datetimepicker7&quot;/&gt;
&lt;div class=&quot;input-group-append&quot; data-target=&quot;#datetimepicker7&quot; data-toggle=&quot;datetimepicker&quot;&gt;
&lt;div class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;fa fa-calendar&quot;&gt;&lt;/i&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class='col-md-5'&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;div class=&quot;input-group date&quot; id=&quot;datetimepicker8&quot; data-target-input=&quot;nearest&quot;&gt;
&lt;input type=&quot;text&quot; class=&quot;form-control datetimepicker-input&quot; data-target=&quot;#datetimepicker8&quot;/&gt;
&lt;div class=&quot;input-group-append&quot; data-target=&quot;#datetimepicker8&quot; data-toggle=&quot;datetimepicker&quot;&gt;
&lt;div class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;fa fa-calendar&quot;&gt;&lt;/i&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(function () {
$('#datetimepicker7').datetimepicker();
$('#datetimepicker8').datetimepicker({
useCurrent: false
});
$(&quot;#datetimepicker7&quot;).on(&quot;change.datetimepicker&quot;, function (e) {
$('#datetimepicker8').datetimepicker('minDate', e.date);
});
$(&quot;#datetimepicker8&quot;).on(&quot;change.datetimepicker&quot;, function (e) {
$('#datetimepicker7').datetimepicker('maxDate', e.date);
});
});
&lt;/script&gt;
</code></pre>
<hr />
<h3 id="custom-icons">Custom Icons</h3>
<div class="container">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker9" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker9"/>
<div class="input-group-append" data-target="#datetimepicker9" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker9').datetimepicker({
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down"
}
});
});
</script>
</div>
<h4 id="code_7">Code</h4>
<pre><code>&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;col-sm-6&quot;&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;div class=&quot;input-group date&quot; id=&quot;datetimepicker9&quot; data-target-input=&quot;nearest&quot;&gt;
&lt;input type=&quot;text&quot; class=&quot;form-control datetimepicker-input&quot; data-target=&quot;#datetimepicker9&quot;/&gt;
&lt;div class=&quot;input-group-append&quot; data-target=&quot;#datetimepicker9&quot; data-toggle=&quot;datetimepicker&quot;&gt;
&lt;div class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;fa fa-calendar&quot;&gt;&lt;/i&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(function () {
$('#datetimepicker9').datetimepicker({
icons: {
time: &quot;fa fa-clock-o&quot;,
date: &quot;fa fa-calendar&quot;,
up: &quot;fa fa-arrow-up&quot;,
down: &quot;fa fa-arrow-down&quot;
}
});
});
&lt;/script&gt;
&lt;/div&gt;
</code></pre>
<hr />
<h3 id="view-mode">View Mode</h3>
<div class="container">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker10" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker10"/>
<div class="input-group-append" data-target="#datetimepicker10" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker10').datetimepicker({
viewMode: 'years'
});
});
</script>
</div>
<h4 id="code_8">Code</h4>
<pre><code>&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;col-sm-6&quot;&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;div class=&quot;input-group date&quot; id=&quot;datetimepicker10&quot; data-target-input=&quot;nearest&quot;&gt;
&lt;input type=&quot;text&quot; class=&quot;form-control datetimepicker-input&quot; data-target=&quot;#datetimepicker10&quot;/&gt;
&lt;div class=&quot;input-group-append&quot; data-target=&quot;#datetimepicker10&quot; data-toggle=&quot;datetimepicker&quot;&gt;
&lt;div class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;fa fa-calendar&quot;&gt;&lt;/i&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(function () {
$('#datetimepicker10').datetimepicker({
viewMode: 'years'
});
});
&lt;/script&gt;
&lt;/div&gt;
</code></pre>
<hr />
<h3 id="min-view-mode">Min View Mode</h3>
<div class="container">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker11" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker11"/>
<div class="input-group-append" data-target="#datetimepicker11" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker11').datetimepicker({
viewMode: 'years',
format: 'MM/YYYY'
});
});
</script>
</div>
<h4 id="code_9">Code</h4>
<pre><code>&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;col-sm-6&quot;&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;div class=&quot;input-group date&quot; id=&quot;datetimepicker11&quot; data-target-input=&quot;nearest&quot;&gt;
&lt;input type=&quot;text&quot; class=&quot;form-control datetimepicker-input&quot; data-target=&quot;#datetimepicker11&quot;/&gt;
&lt;div class=&quot;input-group-append&quot; data-target=&quot;#datetimepicker11&quot; data-toggle=&quot;datetimepicker&quot;&gt;
&lt;div class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;fa fa-calendar&quot;&gt;&lt;/i&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(function () {
$('#datetimepicker11').datetimepicker({
viewMode: 'years',
format: 'MM/YYYY'
});
});
&lt;/script&gt;
&lt;/div&gt;
</code></pre>
<hr />
<h3 id="disabled-days-of-the-week">Disabled Days of the Week</h3>
<div class="container">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker12" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker12"/>
<div class="input-group-append" data-target="#datetimepicker12" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker12').datetimepicker({
daysOfWeekDisabled: [0, 6]
});
});
</script>
</div>
<h4 id="code_10">Code</h4>
<pre><code>&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;col-sm-6&quot;&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;div class=&quot;input-group date&quot; id=&quot;datetimepicker12&quot; data-target-input=&quot;nearest&quot;&gt;
&lt;input type=&quot;text&quot; class=&quot;form-control datetimepicker-input&quot; data-target=&quot;#datetimepicker12&quot;/&gt;
&lt;div class=&quot;input-group-append&quot; data-target=&quot;#datetimepicker12&quot; data-toggle=&quot;datetimepicker&quot;&gt;
&lt;div class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;fa fa-calendar&quot;&gt;&lt;/i&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(function () {
$('#datetimepicker12').datetimepicker({
daysOfWeekDisabled: [0, 6]
});
});
&lt;/script&gt;
&lt;/div&gt;
</code></pre>
<hr />
<h3 id="inline">Inline</h3>
<div style="overflow:hidden;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<div id="datetimepicker13"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker13').datetimepicker({
inline: true,
sideBySide: true,
buttons:{
showToday:true
}
});
});
</script>
</div>
<h4 id="code_11">Code</h4>
<pre><code>&lt;div style=&quot;overflow:hidden;&quot;&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-8&quot;&gt;
&lt;div id=&quot;datetimepicker13&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(function () {
$('#datetimepicker13').datetimepicker({
inline: true,
sideBySide: true
});
});
&lt;/script&gt;
&lt;/div&gt;
</code></pre>
<hr />
<h3 id="multidate">Multidate</h3>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker14" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker14"/>
<div class="input-group-append" data-target="#datetimepicker14" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker14').datetimepicker({
allowMultidate: true,
multidateSeparator: ',',
format: 'L' //this is here just to make the demo prettier.
});
});
</script>
</div>
</div>
<h4 id="code_12">Code</h4>
<pre><code>&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-6&quot;&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;div class=&quot;input-group date&quot; id=&quot;datetimepicker14&quot; data-target-input=&quot;nearest&quot;&gt;
&lt;input type=&quot;text&quot; class=&quot;form-control datetimepicker-input&quot; data-target=&quot;#datetimepicker14&quot;/&gt;
&lt;div class=&quot;input-group-append&quot; data-target=&quot;#datetimepicker14&quot; data-toggle=&quot;datetimepicker&quot;&gt;
&lt;div class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;fa fa-calendar&quot;&gt;&lt;/i&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(function () {
$('#datetimepicker14').datetimepicker({
allowMultidate: true,
multidateSeparator: ','
});
});
&lt;/script&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<hr />
<h3 id="setting-options">Setting Options</h3>
<div class="container">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker15" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker15"/>
<div class="input-group-append" data-target="#datetimepicker15" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-default" id="setOption">Set Option</button>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker15').datetimepicker();
$('#setOption').click(function () {
$('#datetimepicker15').datetimepicker('daysOfWeekDisabled', [0, 6]);
});
});
</script>
</div>
</div>
</div>
</div>
<script>
if (top !== self) { top.location.replace(self.location.href); }
if (location.hostname !== "localhost" && location.hostname !== "127.0.0.1") {
(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', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-47462200-1', 'eonasdan.github.io');
ga('send', 'pageview');
}
</script>
</body>
</html>