JSFiddle - React, Tailwind, and code Playground

by dipeshbeckham

HTML

<script src="http://trentrichardson.com/examples/timepicker/jquery-ui-sliderAccess.js"></script>
<script src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
<link rel="stylesheet" href="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.css">
<div class="da-form-row">
					<label>Start Date Time <span class="required">*</span></label>
					<div class="da-form-item small">
						<span class="formNote">please select start date time</span>
						<input type="text" id="time_start_date" name="start_date"/>
					</div>
				</div>
				<div class="da-form-row">
					<label>End Date Time <span class="required">*</span></label>
					<div class="da-form-item small">
						<span class="formNote">please select end date time</span>
						<input type="text" id="time_end_date" name="start_date"/>
					</div>
				</div>

JavaScript

$('#time_start_date').datetimepicker(
    {
		timeFormat : 'hh:mm',
		dateFormat : 'yy-mm-dd',
		onSelect : function(dateString , instance )
		{
			var dates = dateString.replace(/\-/gi, "/");
			var selectedDate = new Date(dates);

			$('#time_end_date').removeClass('hasDatepicker').datetimepicker(
			{
				minDate		: selectedDate,
				hourMin		: selectedDate.getHours(),
				timeFormat 	: 'hh:mm',
				dateFormat 	: 'yy-mm-dd'
			});
		}
	});