JSFiddle - React, Tailwind, and code Playground

by shk2469

HTML

<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
<div class="bodyContainer">
	<div class="dateInputCollection1">
		<div>
			<div class="caption"> Date Value 1: </div>
			<input type="text" id="dateValue1" class="dateValue" value="2017-08-11" />
		</div>
		<div>
			<div class="caption"> Date Value 2: </div>
			<input type="text" id="dateValue2" class="dateValue" value="08-11-2017"/>
		</div>
		<div>
		<button id="btnProcess1" onclick="process1();">Process 1 </button>
		</div>
		
	</div>
	<div class="textPanel1" id="panel1"></div>
</div>

SCSS

.bodyContainer {
	border: 2px inset black;
	padding: 3px; 
	background-color: #a8f6f0;
	font-family: calibri;
	div.caption { font-weight: bold; display: inline-block; }
	.printText { font-family: calibri; display: block; border: 1px solid black; padding: 2px; margin: 2px;}
	input.dateValue { color: blue; width: 100px; text-align: right; padding: 2px; padding-right:4px; display: inline-block; margin-left: 5px; }
	button { font-family: calibri; float: right;}
	.textPanel1 { margin-top: 30px;}
}

JavaScript

var xdateValue1 = jQuery("#dateValue1").val(); // "yyyy-mm-dd"
var xdateValue2 = jQuery("#dateValue2").val(); // mm-dd-yyyy


var newDate1 = getCorrectDate(xdateValue1, "yyyy-mm-dd");
//var newDate1 = getCorrectDate(xdateValue2, "mm-dd-yyyy");

//print("hello");print("hello, it's you");//print("how are you");

addDays(newDate1, 30);
print(add1(1,2));


function proceses1() {

}

function getCorrectDate(dateValue1, pattern) {
	var numbers = dateValue1.match(/\d+/g); 
	
	var correctDate = new Date();
	switch (pattern.toLowerCase())
	{
		case "yyyy-mm-dd" :  correctDate = new Date(numbers[0], numbers[1]-1, numbers[2] ); break;
		case "mm-dd-yyyy" : correctDate = new Date(numbers[2], numbers[0], numbers[1], ); break;
	}	
	return correctDate;
}

function addDays(dateValue1, days) {
	var dblDate = dateValue1.setDate(dateValue1.getDate() + days);
	var newDate = new Date(dblDate);
//	document.write("<br />");
	//document.write(newDate);
	print(newDate);
}

function print(object1)
{//
	//var panel1 = document.getElementById("panel1");
	//panel1.innerText = "hello, it's me";
	//console.log(panel1);
	var span1 = jQuery("<span class='printText'></span>");
	span1.text(object1);
	$("#panel1").append(span1);
}

var DateDecorationType = {
    // moving to C:\Project\Development\TaxApplication\Web\VCSTax\Source Code\dev\VCSTax\app\common\DateUtilityService.js
    Slash: 0, Dash: 10
}; 

function add1(values) {
	var argLength = arguments.length; console.log(argLength);
	return arguments[0] + ( argLength > 1 ? arguments[1] : 0 );
}