AS1024
/
itflow
mirror of https://github.com/itflow-org/itflow
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
itflow/vendor/datepicker/docs/Usage/index.html

853 lines
35 KiB
HTML
Raw Blame History

<!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>
Reference in New Issue View Git Blame Copy Permalink