JSFiddle - React, Tailwind, and code Playground

by Nidhin Joseph

HTML

<script src="https://nj-coder.com/nj-libs/nj-timepicker/dist/scripts.min.js"></script>
<link rel="stylesheet" href="https://nj-coder.com/nj-libs/nj-timepicker/dist/style.min.css">
<div class="wrapper">
  <label for="format_12">12 Hour</label>
  <div class="container" id="format_12">
    --:-- --
  </div>
</div>
<div class="wrapper">
  <label for="format_24">24 Hour</label>
  <div class="container" id="format_24">
    --:--
  </div>
</div>

CSS

body,
  html {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  body {
    font-family: 'Roboto', sans-serif;
    background: #9D50BB;
    background: -webkit-linear-gradient(to right, #6E48AA, #9D50BB) !important;
    background: linear-gradient(to right, #6E48AA, #9D50BB) !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wrapper {
    text-align: center;
    color: #ffffff;
  }

  .wrapper:first-child {
    margin-right: 2em;
  }

  .wrapper label {
    margin-bottom: 1em;
    display: inline-block;
  }

  .container {
    padding: 1em;
    text-align: center;
    border: 1px solid #fff;
    border-radius: 6px;
  }

JavaScript

(function() {
  let format_12 = document.querySelector('#format_12');
  var format_12_picker = new NJTimePicker({
    targetID: 'format_12',
    texts: {
      header: '12-Hour Picker'
    }
  });
  format_12_picker.on('save', function(data) {
    if (data.fullResult)
      format_12.textContent = data.fullResult;
  });

  let format_24 = document.querySelector('#format_24');
  var format_24_picker = new NJTimePicker({
    targetEl: format_24,
    texts: {
      header: '24-Hour Picker'
    },
    format: '24'
  });
  format_24_picker.on('save', function(data) {
    if (data.fullResult)
      format_24.textContent = data.fullResult;
  });
})();