JSFiddle - React, Tailwind, and code Playground

by Meettya

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/cupertino/jquery-ui.css">
<script src="https://raw.github.com/Meettya/DatePalette/master/public/vendor/head.min.js"></script>
<script src="https://raw.github.com/Meettya/DatePalette/master/public/vendor/underscore-min.js"></script>
<script src="https://raw.github.com/Meettya/DatePalette/master/public/vendor/metamorph.js"></script>
<div id="example_third" class="ui-widget example-window">
      <div class="ui-widget-header"><span>Non-modal popup example with one input</span></div>
      <div class="ui-widget-content">
        <label>Simple data:
          <input id="date_palette_three" type="text" name="date_palette_three" readonly="" class="hasDatePalette">
        </label>
      </div>
    </div>

<div id="example_first" class="ui-widget example-window">
      <div class="ui-widget-header"><span>Modal popup example with one input</span></div>
      <div class="ui-widget-content">
        <label>Birthday:
          <input id="date_palette_one" type="text" name="date_palette_one" readonly>
        </label>
      </div>
    </div>
    <div id="example_second" class="ui-widget example-window">
      <div class="ui-widget-header"><span>Inline picker example with two span <br> and div data-value as storage</span></div>
      <div class="ui-widget-content">
        <label>Credit card valid thru date: <span id="date_palette_two_result"><span id="date_palette_two_month" class="card_caption"></span><span class="card_caption">/</span><span id="date_palette_two_year" class="card_caption"></span></span></label>
        <div id="date_palette_two_wrapper"></div>
      </div>
    </div>

CSS

.datepicker.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  display: none;
  min-width: 160px;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  border-right-width: 2px;
  border-bottom-width: 2px;
  color: #333;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 18px;
}
.datepicker {
  top: 0;
  left: 0;
  padding: 4px;
  margin-top: 1px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.datepicker:before {
  content: '';
  display: inline-block;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-bottom-color: rgba(0,0,0,0.2);
  position: absolute;
  top: -7px;
  left: 6px;
}
.datepicker:after {
  content: '';
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
  top: -6px;
  left: 7px;
}


.reveal-modal-bg { 
        position: fixed; 
        height: 100%;
        width: 100%;
        background: #000;
        background: rgba(0,0,0,.8);
        z-index: 100;
        display: none;
        top: 0;
        left: 0; 
        }
    
    .reveal-modal {
        visibility: hidden;
        top: 100px; 
        left: 50%;
        margin-left: -300px;
        width: 520px;
        background: #eee url("https://raw.github.com/Meettya/DatePalette/master/public/css/modal-gloss.png") no-repeat -200px -80px;
        position: absolute;
        z-index: 101;
        padding: 30px 40px 34px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
 ...

JavaScript

head.ready("widget", function() {
    var DatePalette;
    DatePalette = require('datepalette');
    DatePalette.init("#date_palette_one", function() {
      $("#date_palette_one").val(this.getResult());
      return null;
    }, {
      'global.debug': true
    });
    DatePalette.init("#date_palette_two_wrapper", function() {
      $("#date_palette_two_month").text(this.getResult('MM'));
      $("#date_palette_two_year").text(this.getResult('YYYY'));
      $("#date_palette_two_result").data('value', this.getResult());
      return null;
    }, null, 'inline');
    DatePalette.init('#date_palette_three', function() {
      $("#date_palette_three").val(this.getResult());
      return null;
    }, null, 'non_modal');
    
    return null;
  });
  

head.js( "https://raw.github.com/Meettya/DatePalette/master/public/vendor/moment.min.js",  "https://raw.github.com/Meettya/DatePalette/master/public/vendor/lang-all.min.js", "https://raw.github.com/Meettya/DatePalette/master/public/vendor/jquery.foundation.reveal.js", {"widget" : "https://raw.github.com/Meettya/DatePalette/master/public/js/widget.datepalette.js"} );