JSFiddle - React, Tailwind, and code Playground

by BDG

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://raw.github.com/trentrichardson/jQuery-Timepicker-Addon/master/jquery-ui-timepicker-addon.css">
<script src="https://raw.github.com/trentrichardson/jQuery-Timepicker-Addon/master/jquery-ui-timepicker-addon.js"></script>
<div>
    <p>Date + slider</p>
    <input  id="d" value="2012-05-24"/>
    <button id="d_unlock">13:30</button>
    <span id="d_slider_hider">
        <div    id="d_slider"></div>
    </span>
    <hr/>
    
</div>

CSS

body > div {
    padding: 50px;
}

#e_slider, #d_slider {width: 150px;}

#d_time {
    -webkit-appearance: button;
    -webkit-box-align: center;
    background-color: #DDD;
    border-bottom-color: #DDD;
    border-bottom-style: outset;
    border-bottom-width: 2px;
    border-left-color: #DDD;
    border-left-style: outset;
    border-left-width: 2px;
    border-right-color: #DDD;
    border-right-style: outset;
    border-right-width: 2px;
    border-top-color: #DDD;
    border-top-style: outset;
    border-top-width: 2px;
    box-sizing: border-box;
    color: black;
    cursor: default;
    display: inline-block;
    height: 22px;
    letter-spacing: normal;
    line-height: normal;
    margin-bottom: 2px;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 2px;
    padding-bottom: 1px;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 1px;
    text-align: center;
    text-indent: 0px;
    text-shadow: none;
    text-transform: none;
    width: 52px;
    word-spacing: 0px;
    margin-right: 50px;
}

d_slider {
  display: inline;
}

JavaScript

$("#d").datepicker();
$('#d_slider_hider').hide();
$('#d_unlock').click(function(){
    $('#d_unlock').remove();
    $('#d_slider_hider').show();
    $("#d_slider").slider({
      step:  30,
      max:   1439,
      min:   0,
      value: 810,
      slide: function( event, ui ) {
          var hour = "";
          var minute = "";
          var number = ui.value;
          hour = Math.floor(number/60);
          minute = number-hour*60;
          
          if (hour < 10) { 
              hour = "0" + hour;
          }
          if (minute < 10) { 
              minute = "0" + minute;
          }
          $( "#d_slider a.ui-slider-handle" ).text(hour + ":" + minute);
      }
    });
    $( "#d_slider a.ui-slider-handle" ).text("13:30");
    $( "#d_slider a.ui-slider-handle" ).css("width",       "3em");
    $( "#d_slider a.ui-slider-handle" ).css("height",      "1.3em");
    $( "#d_slider a.ui-slider-handle" ).css("opacity",     "0.8");;
    $( "#d_slider a.ui-slider-handle" ).css("margin-left", "-1.5em");
    $( "#d_slider a.ui-slider-handle" ).css("cursor",      "pointer");
});