JSFiddle - React, Tailwind, and code Playground

by paul724

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
		<title>My Test</title>
		<!-- FlatPickr-->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.css">
  		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/themes/dark.css">
<!-- END FlatPickr-->		
		<script src="js/jquery.js"></script>
	
</head>

<body>
	<form name="dataform" action="<?php echo $_SERVER['PHP_SELF']?>" onSubmit="return validate()" method="post">
						<input type="hidden" name="form_data" id="form_data" value="yes">
						<input type="hidden" name="all_id" id="all_id" value="<?php echo $all_id?>">
				<table width="95%">
					
					<tr>
							<td width="50%" align="right">
							Date record created: 
							</td>
							<td width="50%">
								<input type="text" name="date_record_created" id="date_record_created" placeholder="Please select Date" value='<?php echo $date_record_created?>'>
							</td>
					</tr>
				<tr>
					<td width="50%" style="vertical-align:top"><p>Description</p>	<p>	
							<textarea name="maintext" id="maintext" cols="80" rows="15"><?php echo $maintext ?></textarea>
							</p>
					</td>
				</tr>
				<tr>
					<td>
						<input type="submit" value="Save"  style="border:2px solid green; border-radius: 5px;">
						<input type="button" value="Close" onClick="javascript:cancel_window();" style="border:2px solid blue; border-radius: 5px;">
					</td>
				</tr>
			</table>	
		</form>
			<!--FlatPickr -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.js"></script>
		<script>		

					
          if ($("#date_record_created").length > 0) 
          {
              $("#date_record_created").flatpickr({
              enableTime: false,
 ...

JavaScript

/*
In production environment with a new record this code defaults to todays date:
$("#date_record_created").flatpickr({
		enableTime: false,
		dateFormat: "d-M-Y",//"d-m-Y"//"F, d Y"
		defaultDate: new Date(),//defaultDate: "today",
		});

This code defaults to 01-01-1970
if ($("#date_record_created").length > 0) 
	{
  		$("#date_record_created").flatpickr({
    	enableTime: false,
    	dateFormat: "d-M-Y"//"d-m-Y"//"F, d Y" 
    	});
    }  
	else 
	{
		$("#date_record_created").flatpickr({
		enableTime: false,
		dateFormat: "d-M-Y",//"d-m-Y"//"F, d Y"
		defaultDate: new Date(),//defaultDate: "today",
		});
	};

*/