JSFiddle - React, Tailwind, and code Playground

by pbatey

HTML

<link rel="stylesheet" href="https://fomantic-ui.com/dist/semantic.min.css">
<script src="https://fomantic-ui.com/dist/semantic.min.js"></script>
<h3>Calendar</h3>
<div class="ui calendar" id="example1">
    <div class="ui input left icon">
      <i class="calendar icon"></i>
      <input type="text" placeholder="Date">
    </div>
  </div>

CSS

body {
  padding:2em;
}

JavaScript

$('.ui.calendar').calendar({
type: 'datetime',
 onChange: function (date, text) {
     console.log('date', date)
     var newValue = text;
     alert(newValue);
    },
});