JSFiddle - React, Tailwind, and code Playground

by Ankit Patidar

HTML

<form class="form-horizontal" method="post" action="" role="form">
                <div class="form-group">
                  <label for="startDate"><?php echo T_(gettext("Select date")); ?></label>
                  <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    <input class="form-control" placeholder="<?php echo T_(gettext("Select date")); ?>" data-date-format="yyyy-mm-dd" id="selectDate" type="text">
                  </div>
                </div>
                <div class="row">
                  <div class="col-xs-6 noPad-left">
                    <label for="startDate"><?php echo T_(gettext("Start time"));?></label>
                    <div class="input-group">
                      <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                      <input class="form-control" placeholder="<?php echo T_(gettext("Select start time")); ?>" id="startTime" type="text">
                    </div>
                  </div>
                  <div class="col-xs-6 noPad-right">
                    <label for="startDate"><?php echo T_(gettext("End time")); ?></label>
                    <div class="input-group">
                      <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                      <input class="form-control" placeholder="<?php echo T_(gettext("Select end time")); ?>" id="endTime" type="text">
                    </div>
                  </div>                  
                </div>
                <div class="spaceH"></div>
                <div class="spaceH"></div>
                <div class="form-group">
                  <button type="button" class="btn btn-info" id="devicePreviewShow"><span class="glyphicon glyphicon-film"></span><?php echo T_(gettext("Preview")); ?></button>
                  <button type="button" class="btn btn-default"...

JavaScript

$('#selectDate').datepicker({"autoclose":"true"});
$('#startTime').timepicker({minuteStep:5,showInputs:false,disableFocus:true});
$('#endTime').timepicker({minuteStep:5,showInputs:false,disableFocus:true});

  $("#devicePreviewShow").click(function(e){
	if(trim($("#selectDate").val()) == "") {
		$("#dateemptyErr").show();
		$("#timeemptyErr").hide();
		$("#endTimeErr").hide();
	}
	
	else if ($("#startTime").val() == "" || $("#endTime").val() == "") {
		$("#dateemptyErr").hide();
		$("#endTimeErr").hide();
		$("#timeemptyErr").show();
		
	}
	else if(convertAMPMtoMinutes($("#startTime").val()) > convertAMPMtoMinutes($("#endTime").val())){
		$("#dateemptyErr").hide();
		$("#timeemptyErr").hide();
		$("#endTimeErr").show();
	}
	else{
		openFb('preview.php', true);
	}	
  })
});
function convertAMPMtoMinutes($time){
	var time = $time;
	var hours = Number(time.match(/^(\d+)/)[1]);
	var minutes = Number(time.match(/:(\d+)/)[1]);
	var AMPM = time.match(/\s(.*)$/)[1];
	if(AMPM == "PM" && hours<12) hours = hours+12;
	if(AMPM == "AM" && hours==12) hours = hours-12;
	var newTime = (hours*60) + minutes;
	return newTime;
}