JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.css">
<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.js"></script>
<br/>
<br/>
<div class="container">

  <nav class="navbar navbar-default">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"> </a>
    </div>
    <div class="navbar-left">
      <div class="dropdown navbar-nav">
        <button class="navbar-btn btn btn-link dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="true"><i class="fa fa-globe"></i> Session <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li value="clear"><a href="#stay"> --No Filter-- </a></li>
          <li class="active"><a href="#stay"> Some Filter </a></li>
          <li><a href="#stay"> Another Filter </a></li>
          <li><a href="#stay"> More Filters</a></li>
        </ul>
      </div>
      <form class="navbar-form navbar-left swapdown">
        <button class="btn btn-link btn-swap" type="button" data-toggle="dropdown" aria-expanded="true"><i class="fa fa-clock-o"></i> Date Range </button>
        <div class="swap-input form-group" style="display:none">
          <input class="form-control col-xs-2" type="text" value="Select Range" name="filter">
        </div>
      </form>

    </div>
    <div class="nav navbar-nav navbar-left"><div class="btn-group"><button class="btn navbar-btn btn-link" data-toggle="tooltip" data-placement="bottom" title="Zoom Out"><i...

JavaScript

$('.swapdown .btn').click(function() {
  $('.btn-swap').hide();
  $('.swap-input').show();
});
$('input[name="filter"]').daterangepicker();
$('input[name="filter"]').on('apply.daterangepicker', function(ev, picker) {
  $('.btn-swap').show();
  $('.swap-input').hide();
});