JSFiddle - React, Tailwind, and code Playground

by jimkennelly

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>

   <form>
   
   
   <label for="datetime">Select Date & Time:</label>
    <input type="text" id="DateTimeOfIncident" placeholder="Pick a date and time">
    
    <input type="submit">
    
    </form>

JavaScript

$('#DateTimeOfIncident').datetimepicker({
                format: 'Y-m-d H:i', // Format for date and time
                step: 1, // Time step in minutes
                maxDate: addDays(Date(),5),
							  minDate: addDays(Date(),-0),
								maxTime:new Date(),
                
                
});

 $('form').submit(function(event) {
     //note: we don't use the standard form submit because we need to save and validate and show validaton in this code
     //alert("submitting form - checking form for review");
 		
     // Prevent default form submission
     event.preventDefault();
     alert('form ssbmitted ' + $("#DateTimeOfIncident").val());
 });
 
 function addDays(date, days) {
  var result = new Date(date);
  result.setDate(result.getDate() + days);
  return result;
}