641 lines
36 KiB
HTML
641 lines
36 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="apple-touch-icon" sizes="76x76" href="../../assets/img/apple-icon.png">
|
|
<link rel="icon" href="../../assets/img/favicon.png" type="image/png">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta name="author" content="Creative Tim">
|
|
<title>
|
|
Datepicker | Material Dashboard 2 FREE Laravel by Creative Tim & UPDIVISION
|
|
</title>
|
|
<link rel="canonical" href="https://www.creative-tim.com/learning-lab/bootstrap/colors/material-dashboard" />
|
|
|
|
<meta name="keywords" content="creative tim, updivision, html dashboard, laravel, material, html css dashboard laravel, material dashboard laravel, laravel material dashboard, material admin, laravel dashboard, laravel admin, web dashboard, bootstrap 5 dashboard laravel, bootstrap 5, css3 dashboard, bootstrap 5 admin laravel, material dashboard bootstrap 5 laravel, frontend, responsive bootstrap 5 dashboard, material dashboard, material laravel bootstrap 5 dashboard" />
|
|
<meta name="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
|
<meta itemprop="name" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
|
<meta itemprop="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
|
<meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
|
<meta name="twitter:card" content="product" />
|
|
<meta name="twitter:site" content="@creativetim" />
|
|
<meta name="twitter:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
|
<meta name="twitter:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
|
<meta name="twitter:creator" content="@creativetim" />
|
|
<meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
|
<meta property="fb:app_id" content="655968634437471" />
|
|
<meta property="og:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:url" content="https://www.creative-tim.com/live/material-dashboard-laravel" />
|
|
<meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
|
<meta property="og:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
|
<meta property="og:site_name" content="Creative Tim" />
|
|
|
|
|
|
<link rel="stylesheet" href="../../assets/css/nucleo-icons.css" type="text/css">
|
|
|
|
<link rel="stylesheet" href="../../assets/css/nextjs-material-dashboard-pro.min.css" type="text/css">
|
|
|
|
<link rel="stylesheet" href="../../assets/css/material-dashboard.min.css" type="text/css">
|
|
<link rel="stylesheet" href="../../assets/css/demo.css" type="text/css">
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
|
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700" rel="stylesheet">
|
|
|
|
<link href="../../assets/css/nucleo-icons.css" rel="stylesheet">
|
|
|
|
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
|
<!-- Anti-flicker snippet (recommended) -->
|
|
<style>
|
|
.async-hide {
|
|
opacity: 0 !important
|
|
}
|
|
</style>
|
|
<script>
|
|
(function(a, s, y, n, c, h, i, d, e) {
|
|
s.className += ' ' + y;
|
|
h.start = 1 * new Date;
|
|
h.end = i = function() {
|
|
s.className = s.className.replace(RegExp(' ?' + y), '')
|
|
};
|
|
(a[n] = a[n] || []).hide = h;
|
|
setTimeout(function() {
|
|
i();
|
|
h.end = null
|
|
}, c);
|
|
h.timeout = c;
|
|
})(window, document.documentElement, 'async-hide', 'dataLayer', 4000, {
|
|
'GTM-K9BGS8K': true
|
|
});
|
|
</script>
|
|
<!-- Analytics-Optimize Snippet -->
|
|
<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-46172202-22', 'auto', {
|
|
allowLinker: true
|
|
});
|
|
ga('set', 'anonymizeIp', true);
|
|
ga('require', 'GTM-K9BGS8K');
|
|
ga('require', 'displayfeatures');
|
|
ga('require', 'linker');
|
|
ga('linker:autoLink', ["2checkout.com", "avangate.com"]);
|
|
</script>
|
|
<!-- end Analytics-Optimize Snippet -->
|
|
<!-- Google Tag Manager -->
|
|
<script>
|
|
(function(w, d, s, l, i) {
|
|
w[l] = w[l] || [];
|
|
w[l].push({
|
|
'gtm.start': new Date().getTime(),
|
|
event: 'gtm.js'
|
|
});
|
|
var f = d.getElementsByTagName(s)[0],
|
|
j = d.createElement(s),
|
|
dl = l != 'dataLayer' ? '&l=' + l : '';
|
|
j.async = true;
|
|
j.src =
|
|
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
|
|
f.parentNode.insertBefore(j, f);
|
|
})(window, document, 'script', 'dataLayer', 'GTM-NKDMSK6');
|
|
</script>
|
|
<!-- End Google Tag Manager -->
|
|
<!-- This is for docs typography and layout -->
|
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
|
|
<link href="../../assets/css/docs.css" rel="stylesheet" />
|
|
</head>
|
|
<body class="docs ">
|
|
<!-- Google Tag Manager (noscript) -->
|
|
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
|
<!-- End Google Tag Manager (noscript) -->
|
|
<header class="ct-docs-navbar">
|
|
<a class="ct-docs-navbar-brand" href="javascript:void(0)" aria-label="Bootstrap">
|
|
</a><a href="https://www.creative-tim.com/" class="ct-docs-navbar-text" target="_blank">
|
|
Creative Tim
|
|
</a>
|
|
<div class="ct-docs-navbar-border"></div>
|
|
<a href="../../documentation/getting-started/installation.html" class="ct-docs-navbar-text">
|
|
Docs
|
|
</a>
|
|
|
|
<ul class="ct-docs-navbar-nav-left">
|
|
<li class="ct-docs-nav-item-dropdown">
|
|
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
|
<span class="ct-docs-navbar-nav-link-inner--text">Live Preview</span>
|
|
</a>
|
|
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownPreview">
|
|
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-laravel.creative-tim.com" target="_blank">
|
|
Material Dashboard 2 Laravel
|
|
</a>
|
|
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-pro-laravel.creative-tim.com" target="_blank">
|
|
Material Dashboard 2 Pro Laravel
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<li class="ct-docs-nav-item-dropdown">
|
|
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
|
<span class="ct-docs-navbar-nav-link-inner--text">Support</span>
|
|
</a>
|
|
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownSupport">
|
|
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/material-dashboard-laravel/issues" target="_blank">
|
|
Material Dashboard 2 Laravel
|
|
</a>
|
|
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/ct-material-dashboard-pro-laravel/issues" target="_blank">
|
|
Material Dashboard 2 Pro Laravel
|
|
</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<ul class="ct-docs-navbar-nav-right">
|
|
<li class="ct-docs-navbar-nav-item">
|
|
<a class="ct-docs-navbar-nav-link" href="https://www.creative-tim.com/product/material-dashboard-laravel" target="_blank">Download Free</a>
|
|
</li>
|
|
</ul>
|
|
<a href="https://www.creative-tim.com/product/material-dashboard-pro-laravel" target="_blank" class="ct-docs-btn-upgrade">
|
|
<span class="ct-docs-btn-inner--icon">
|
|
<i class="fas fa-download mr-2" aria-hidden="true"></i>
|
|
</span>
|
|
<span class="ct-docs-navbar-nav-link-inner--text">Upgrade to PRO</span>
|
|
</a>
|
|
<button class="ct-docs-navbar-toggler" type="button">
|
|
<span class="ct-docs-navbar-toggler-icon"></span>
|
|
</button>
|
|
</header>
|
|
<div class="ct-docs-main-container">
|
|
<div class="ct-docs-main-content-row">
|
|
<div class="ct-docs-sidebar-col">
|
|
<nav class="ct-docs-sidebar-collapse-links">
|
|
<div class="ct-docs-sidebar-product">
|
|
<div class="ct-docs-sidebar-product-image">
|
|
<img src="../../assets/img/bootstrap.png">
|
|
</div>
|
|
<p class="ct-docs-sidebar-product-text">Material Dashboard</p>
|
|
</div>
|
|
<div class="ct-docs-toc-item-active">
|
|
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
|
<div class="d-inline-block">
|
|
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
|
<i class="ni ni-active-40 text-white"></i>
|
|
</div>
|
|
</div>
|
|
Getting started
|
|
</a>
|
|
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
|
<li class="">
|
|
<a href="../../documentation/getting-started/overview.html">
|
|
Overview
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/getting-started/license.html">
|
|
License
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/getting-started/installation.html">
|
|
Installation
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/getting-started/build-tools.html">
|
|
Build Tools
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/getting-started/bootstrap.html">
|
|
What is Bootstrap
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="ct-docs-toc-item-active">
|
|
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
|
<div class="d-inline-block">
|
|
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
|
<i class="ni ni-folder-17 text-white"></i>
|
|
</div>
|
|
</div>
|
|
Laravel
|
|
</a>
|
|
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
|
<li class="">
|
|
<a href="../../documentation/laravel/login.html">
|
|
Login
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/laravel/sign-up.html">
|
|
Sign Up
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/laravel/forgot-password.html">
|
|
Forgot Password
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/laravel/user-profile.html">
|
|
User Profile
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/laravel/user-management.html">
|
|
User Management
|
|
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="ct-docs-toc-item-active">
|
|
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
|
<div class="d-inline-block">
|
|
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
|
<i class="ni ni-folder-17 text-white"></i>
|
|
</div>
|
|
</div>
|
|
Foundation
|
|
</a>
|
|
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
|
<li class=" ">
|
|
<a href="../../documentation/foundation/colors.html">
|
|
Colors
|
|
</a>
|
|
</li>
|
|
<li class=" ">
|
|
<a href="../../documentation/foundation/grid.html">
|
|
Grid
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/foundation/typography.html">
|
|
Typography
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/foundation/icons.html">
|
|
Icons
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/foundation/utilities.html">
|
|
Utilities
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="ct-docs-toc-item-active">
|
|
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
|
<div class="d-inline-block">
|
|
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
|
<i class="ni ni-app text-white"></i>
|
|
</div>
|
|
</div>
|
|
Components
|
|
</a>
|
|
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
|
<li class="">
|
|
<a href="../../documentation/components/alerts.html">
|
|
Alerts
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/components/badge.html">
|
|
Badge
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/components/buttons.html">
|
|
Buttons
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/components/social-buttons.html">
|
|
Social Buttons
|
|
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/components/cards.html">
|
|
Cards
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/components/carousel.html">
|
|
Carousel
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/components/collapse.html">
|
|
Collapse
|
|
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/components/dropdowns.html">
|
|
Dropdowns
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/components/forms.html">
|
|
Forms
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/components/input-group.html">
|
|
Input Group
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/components/list-group.html">
|
|
List Group
|
|
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/components/modal.html">
|
|
Modal
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/components/navs.html">
|
|
Navs
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/components/navbar.html">
|
|
Navbar
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/components/pagination.html">
|
|
Pagination
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/components/popovers.html">
|
|
Popovers
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/components/progress.html">
|
|
Progress
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/components/spinners.html">
|
|
Spinners
|
|
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/components/tables.html">
|
|
Tables
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/components/tooltips.html">
|
|
Tooltips
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="ct-docs-toc-item-active">
|
|
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
|
<div class="d-inline-block">
|
|
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
|
<i class="ni ni-settings text-white"></i>
|
|
</div>
|
|
</div>
|
|
Plugins
|
|
</a>
|
|
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
|
<li class="">
|
|
<a href="../../documentation/plugins/countUpJs.html">
|
|
CountUp JS
|
|
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/plugins/charts.html">
|
|
Charts
|
|
</a>
|
|
</li>
|
|
<li class="ct-docs-nav-sidenav-active">
|
|
<a href="../../documentation/plugins/datepicker.html">
|
|
Datepicker
|
|
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/plugins/fullcalendar.html">
|
|
Fullcalendar
|
|
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/plugins/sliders.html">
|
|
Sliders
|
|
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/plugins/choices.html">
|
|
Choices
|
|
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/plugins/dropzone.html">
|
|
Dropzone
|
|
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/plugins/datatables.html">
|
|
Datatables
|
|
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/plugins/kanban.html">
|
|
Kanban
|
|
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/plugins/photo-swipe.html">
|
|
Photo Swipe
|
|
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/plugins/quill.html">
|
|
Quill
|
|
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/plugins/sweet-alerts.html">
|
|
Sweet Alerts
|
|
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../documentation/plugins/wizard.html">
|
|
Wizard
|
|
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div class="ct-docs-toc-col">
|
|
<ul class="section-nav">
|
|
<li class="toc-entry toc-h2"><a href="#usage">Usage</a></li>
|
|
<li class="toc-entry toc-h2"><a href="#initialization">Initialization</a></li>
|
|
<li class="toc-entry toc-h2"><a href="#range-datepicker">Range datepicker</a></li>
|
|
</ul>
|
|
</div>
|
|
<main class="ct-docs-content-col" role="main">
|
|
<div class="ct-docs-page-title">
|
|
<h1 class="ct-docs-page-h1-title" id="content">
|
|
Bootstrap Datepicker
|
|
</h1>
|
|
<span class="ct-docs-page-title-pro-line"> - </span>
|
|
<div class="ct-docs-page-title-pro-bage">Pro Component</div>
|
|
<div class="avatar-group mt-3">
|
|
</div>
|
|
</div>
|
|
<p class="ct-docs-page-title-lead">The Bootstrap flatpickr is a lightweight and powerful datetime picker.</p>
|
|
<hr class="ct-docs-hr">
|
|
<h2 id="usage">Usage</h2>
|
|
<p>In order to use this plugin on your page you will need to include the following script:</p>
|
|
<div class="position-relative">
|
|
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/assets/js/plugins/flatpickr.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre>
|
|
</figure>
|
|
</div>
|
|
<h2 id="initialization">Initialization</h2>
|
|
<p>Add the <code class=" highlighter-rouge language-plaintext">.datepicker</code> class on the text input that you want to become a datepicker.</p>
|
|
<h2 id="range-datepicker">Range datepicker</h2>
|
|
<div class="input-group input-group-static">
|
|
<input class="form-control datepicker flatpickr-input" placeholder="Please select date" type="text" onfocus="focused(this)" onfocusout="defocused(this)" readonly="readonly">
|
|
</div>
|
|
<div class="position-relative">
|
|
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-static<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control datepicker<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Please select date<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">onfocus</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>focused(this)<span class="token punctuation">"</span></span> <span class="token attr-name">onfocusout</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>defocused(this)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
|
</figure>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<div class="ct-docs-main-footer-row">
|
|
<div class="ct-docs-main-footer-blank-col">
|
|
</div>
|
|
<div class="ct-docs-main-footer-col">
|
|
<footer class="ct-docs-footer">
|
|
<div class="ct-docs-footer-inner-row">
|
|
<div class="ct-docs-footer-col">
|
|
<div class="ct-docs-footer-copyright">
|
|
© <script>
|
|
document.write(new Date().getFullYear())
|
|
</script> <a href="https://creative-tim.com" class="ct-docs-footer-copyright-author" target="_blank">Creative Tim</a> & <a href="https://www.updivision.com" class="ct-docs-footer-copyright-author" target="_blank">UPDIVISION</a>
|
|
</div>
|
|
</div>
|
|
<div class="ct-docs-footer-col">
|
|
<ul class="ct-docs-footer-nav-footer">
|
|
<li>
|
|
<a href="https://creative-tim.com" class="ct-docs-footer-nav-link" target="_blank">Creative Tim</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="https://www.updivision.com" class="ct-docs-footer-nav-link" target="_blank">UPDIVISION</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://www.creative-tim.com/contact-us" class="ct-docs-footer-nav-link" target="_blank">Contact Us</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://creative-tim.com/blog" class="ct-docs-footer-nav-link" target="_blank">Blog</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="../../assets/js/jquery.min.js" type="text/javascript"></script>
|
|
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
|
<script src="../../assets/js/core/bootstrap.bundle.min.js" type="text/javascript"></script>
|
|
<script src="" type="text/javascript"></script>
|
|
<script src="" type="text/javascript"></script>
|
|
<script src="" type="text/javascript"></script>
|
|
<script src="../../assets/js/flatpickr.min.js" type="text/javascript"></script>
|
|
<script src="../../assets/js/prism.js" type="text/javascript"></script>
|
|
<script src="../../assets/js/docs.min.js" type="text/javascript"></script>
|
|
<script src="../../assets/js/holder.min.js" type="text/javascript"></script>
|
|
<script src="../../assets/js/moment.min.js" type="text/javascript"></script>
|
|
<script src="../../assets/js/material-dashboard.min.js" type="text/javascript"></script>
|
|
<script type="text/javascript">
|
|
if (document.querySelector('.datepicker')) {
|
|
flatpickr('.datepicker', {
|
|
mode: "range"
|
|
}); // flatpickr
|
|
}
|
|
</script><div class="flatpickr-calendar rangeMode animate" tabindex="-1"><div class="flatpickr-months"><span class="flatpickr-prev-month"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17 17"><g></g><path d="M5.207 8.471l7.146 7.147-0.707 0.707-7.853-7.854 7.854-7.853 0.707 0.707-7.147 7.146z"></path></svg></span><div class="flatpickr-month"><div class="flatpickr-current-month"><select class="flatpickr-monthDropdown-months" aria-label="Month" tabindex="-1"><option class="flatpickr-monthDropdown-month" value="0" tabindex="-1">January</option><option class="flatpickr-monthDropdown-month" value="1" tabindex="-1">February</option><option class="flatpickr-monthDropdown-month" value="2" tabindex="-1">March</option><option class="flatpickr-monthDropdown-month" value="3" tabindex="-1">April</option><option class="flatpickr-monthDropdown-month" value="4" tabindex="-1">May</option><option class="flatpickr-monthDropdown-month" value="5" tabindex="-1">June</option><option class="flatpickr-monthDropdown-month" value="6" tabindex="-1">July</option><option class="flatpickr-monthDropdown-month" value="7" tabindex="-1">August</option><option class="flatpickr-monthDropdown-month" value="8" tabindex="-1">September</option><option class="flatpickr-monthDropdown-month" value="9" tabindex="-1">October</option><option class="flatpickr-monthDropdown-month" value="10" tabindex="-1">November</option><option class="flatpickr-monthDropdown-month" value="11" tabindex="-1">December</option></select><div class="numInputWrapper"><input class="numInput cur-year" type="number" tabindex="-1" aria-label="Year"><span class="arrowUp"></span><span class="arrowDown"></span></div></div></div><span class="flatpickr-next-month"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17 17"><g></g><path d="M13.207 8.472l-7.854 7.854-0.707-0.707 7.146-7.146-7.146-7.148 0.707-0.707 7.854 7.854z"></path></svg></span></div><div class="flatpickr-innerContainer"><div class="flatpickr-rContainer"><div class="flatpickr-weekdays"><div class="flatpickr-weekdaycontainer">
|
|
<span class="flatpickr-weekday">
|
|
Sun</span><span class="flatpickr-weekday">Mon</span><span class="flatpickr-weekday">Tue</span><span class="flatpickr-weekday">Wed</span><span class="flatpickr-weekday">Thu</span><span class="flatpickr-weekday">Fri</span><span class="flatpickr-weekday">Sat
|
|
</span>
|
|
</div></div><div class="flatpickr-days" tabindex="-1"><div class="dayContainer"><span class="flatpickr-day prevMonthDay" aria-label="October 31, 2021" tabindex="-1">31</span><span class="flatpickr-day " aria-label="November 1, 2021" tabindex="-1">1</span><span class="flatpickr-day " aria-label="November 2, 2021" tabindex="-1">2</span><span class="flatpickr-day " aria-label="November 3, 2021" tabindex="-1">3</span><span class="flatpickr-day " aria-label="November 4, 2021" tabindex="-1">4</span><span class="flatpickr-day " aria-label="November 5, 2021" tabindex="-1">5</span><span class="flatpickr-day " aria-label="November 6, 2021" tabindex="-1">6</span><span class="flatpickr-day " aria-label="November 7, 2021" tabindex="-1">7</span><span class="flatpickr-day " aria-label="November 8, 2021" tabindex="-1">8</span><span class="flatpickr-day " aria-label="November 9, 2021" tabindex="-1">9</span><span class="flatpickr-day " aria-label="November 10, 2021" tabindex="-1">10</span><span class="flatpickr-day " aria-label="November 11, 2021" tabindex="-1">11</span><span class="flatpickr-day " aria-label="November 12, 2021" tabindex="-1">12</span><span class="flatpickr-day " aria-label="November 13, 2021" tabindex="-1">13</span><span class="flatpickr-day " aria-label="November 14, 2021" tabindex="-1">14</span><span class="flatpickr-day " aria-label="November 15, 2021" tabindex="-1">15</span><span class="flatpickr-day " aria-label="November 16, 2021" tabindex="-1">16</span><span class="flatpickr-day " aria-label="November 17, 2021" tabindex="-1">17</span><span class="flatpickr-day " aria-label="November 18, 2021" tabindex="-1">18</span><span class="flatpickr-day " aria-label="November 19, 2021" tabindex="-1">19</span><span class="flatpickr-day " aria-label="November 20, 2021" tabindex="-1">20</span><span class="flatpickr-day " aria-label="November 21, 2021" tabindex="-1">21</span><span class="flatpickr-day today" aria-label="November 22, 2021" aria-current="date" tabindex="-1">22</span><span class="flatpickr-day " aria-label="November 23, 2021" tabindex="-1">23</span><span class="flatpickr-day " aria-label="November 24, 2021" tabindex="-1">24</span><span class="flatpickr-day " aria-label="November 25, 2021" tabindex="-1">25</span><span class="flatpickr-day " aria-label="November 26, 2021" tabindex="-1">26</span><span class="flatpickr-day " aria-label="November 27, 2021" tabindex="-1">27</span><span class="flatpickr-day " aria-label="November 28, 2021" tabindex="-1">28</span><span class="flatpickr-day " aria-label="November 29, 2021" tabindex="-1">29</span><span class="flatpickr-day " aria-label="November 30, 2021" tabindex="-1">30</span><span class="flatpickr-day nextMonthDay" aria-label="December 1, 2021" tabindex="-1">1</span><span class="flatpickr-day nextMonthDay" aria-label="December 2, 2021" tabindex="-1">2</span><span class="flatpickr-day nextMonthDay" aria-label="December 3, 2021" tabindex="-1">3</span><span class="flatpickr-day nextMonthDay" aria-label="December 4, 2021" tabindex="-1">4</span><span class="flatpickr-day nextMonthDay" aria-label="December 5, 2021" tabindex="-1">5</span><span class="flatpickr-day nextMonthDay" aria-label="December 6, 2021" tabindex="-1">6</span><span class="flatpickr-day nextMonthDay" aria-label="December 7, 2021" tabindex="-1">7</span><span class="flatpickr-day nextMonthDay" aria-label="December 8, 2021" tabindex="-1">8</span><span class="flatpickr-day nextMonthDay" aria-label="December 9, 2021" tabindex="-1">9</span><span class="flatpickr-day nextMonthDay" aria-label="December 10, 2021" tabindex="-1">10</span><span class="flatpickr-day nextMonthDay" aria-label="December 11, 2021" tabindex="-1">11</span></div></div></div></div></div>
|
|
<script src="https://demos.creative-tim.com/test/material-dashboard-pro/assets/js/material-dashboard.min.js?v=1.0.0" type="text/javascript"></script>
|
|
<script>
|
|
Holder.addTheme('gray', {
|
|
bg: '#777',
|
|
fg: 'rgba(255,255,255,.75)',
|
|
font: 'Helvetica',
|
|
fontweight: 'normal'
|
|
})
|
|
</script>
|
|
<script>
|
|
// Facebook Pixel Code Don't Delete
|
|
! function(f, b, e, v, n, t, s) {
|
|
if (f.fbq) return;
|
|
n = f.fbq = function() {
|
|
n.callMethod ?
|
|
n.callMethod.apply(n, arguments) : n.queue.push(arguments)
|
|
};
|
|
if (!f._fbq) f._fbq = n;
|
|
n.push = n;
|
|
n.loaded = !0;
|
|
n.version = '2.0';
|
|
n.queue = [];
|
|
t = b.createElement(e);
|
|
t.async = !0;
|
|
t.src = v;
|
|
s = b.getElementsByTagName(e)[0];
|
|
s.parentNode.insertBefore(t, s)
|
|
}(window,
|
|
document, 'script', '//connect.facebook.net/en_US/fbevents.js');
|
|
|
|
try {
|
|
fbq('init', '111649226022273');
|
|
fbq('track', "PageView");
|
|
|
|
} catch (err) {
|
|
console.log('Facebook Track Error:', err);
|
|
}
|
|
</script>
|
|
<script src="../../assets/js/docs.js"></script>
|
|
|
|
</body>
|
|
</html>
|