JSFiddle - React, Tailwind, and code Playground

Overlay for custom date range

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css">
<script src="https://cdn.rawgit.com/niftylettuce/bootstrap-datepicker-mobile/9999ca720ebf89600bda1659c96a291dc447ff39/bootstrap-datepicker-mobile.js"></script>
<!-- (OPTIONAL) USE active CLASS TO SHOW OVERLAY -->
<div id="overlay-1479830781380" class="active overlay hasFooter hasNavbar overlay-date-range">
  <div class="overlayPanelScreen"></div>
  <div class="overlayPanel">
    <div class="overlayNavbar">
      <div class="closeButton" style="display: block;"><i class="fa fa-close"></i></div>
      <div class="overlayTitle">Custom date range</div>
    </div>
    <div class="overlayPanelContent">
      <p>Select a start and end date to filter your directory to only show the entries with dates in between.</p>
      <form class="form-horizontal">
        <div class="form-group">
          <div class="col-sm-12 control-label">
            <label for="start_date">Starting from:</label>
          </div>
          <div class="col-sm-12 input-group">

            <div class="input-group-addon">
              <i class="fa fa-calendar"></i>
            </div>
            
            <!-- this is where the magic happens -->
            <input type="text" class="date-picker form-control" id="start_date" placeholder="01 Jan 2016" />

          </div>
   ...

CSS

.overlay-date-range .overlayPanelScreen {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 19999;
  background: rgba(0, 0, 0, 0.7);
  -webkit-transform: translate3d(0, 0, -400px);
  transform: translate3d(0, 0, -400px);
  opacity: 0;
  pointer-events: none;
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

.overlay-date-range.active .overlayPanelScreen {
  opacity: 1;
  pointer-events: all;
}

.overlay-date-range .overlayPanel {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  background: rgba(0, 0, 0, 0.3);
  z-index: 20000;
  padding: 0;
  -webkit-border-radius: 5px;
  -webkit-transform: translate3d(0, 0, 0) scale(0);
  transform: translate3d(0, 0, 0) scale(0);
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

.overlay-date-range.active .overlayPanel {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.overlay-date-range .overlayNavbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 44px;
  z-index: 1;
  border-bottom: 1px solid #c9c9c9;
  line-height: 44px;
  font-size: 14px;
  text-align: left;
  font-weight: bold;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.95);
  color: #333;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  display: none;
}

.overlay-date-range.hasNavbar .overlayNavbar {
  display: block;
}

.overlay-date-range .overlayPanelContent {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 8px 16px;
  background: #fff;
  font-size: 1em;
  color: #333;
  text-shadow: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.overlay-date-range.hasNavbar .overlayPanelContent {
  padding-top: 52px;
}

.overlay-date-range .overlayTitle {
  padding: 0...

JavaScript

$('.date-picker').datepicker({
		format: "dd M yyyy",
    startView: 2,
    maxViewMode: 2,
    todayBtn: "linked",
    clearBtn: true,
    autoclose: true,
    todayHighlight: true
});