Andreas Lambadarios Andreas Lambadarios - 21 days ago 11
HTML Question

Convert a User Entered Date with JSON mm/dd/yyyy Format and Display It as a Result



function eraseText() {
document.getElementById("textbox").value = " ";
}

/*
var dateString = "\/Date(1334514600000)\/".substr(6);
var currentTime = new Date(parseInt(dateString ));
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var date = day + "/" + month + "/" + year;
*/

var request;
var date;
function getUserRequest() {
return document.getElementById("request_input").value;
}
function getUserDate() {
return document.getElementById("date_input").value;
}
function display() {
request = getUserRequest();
date = getUserDate();
document.getElementById("textbox").value = date + " - " + request;
}

body {

background-color:#f5f5dc;
padding-left:100px;
padding-right:100px;
padding-bottom:100px;

}

form {
outline-offset:12px;
outline-color:red;
outline-width:3px;
outline-style: solid;
background-color:#008080;
}

h2 {
color:#00cc00;
text-align:left;
}

p {
color:blue;
text-align:left;
}
textarea {
margin-left:430px
}


#clearbutton {
text-align:left;
}

#submit {
text-align:left;
}

<!DOCTYPE html>
<html>

<head>

<html lang="en">
<title>Project 4</title>

<link rel="stylesheet" type="text/css" href="project4css.css">
<script src="project4js.js"></script>

</head>
<meta charset="utf-8">

<form id='form' name="form1" method = 'post'>

<h2>Change and Update Packages</h2>


<textarea id="textbox" rows="10" cols="50">

</textarea>


<p>Enter Your Request:</p>
<input type="text" id="request_input" name="request">

<p>Request Date:</p>
<input type="text" id="date_input" name="date">

<br>
<br>
<br>

<input id ="submit" type = "button" onclick="display()" value='Add Request'/>

<br>
<br>

<input id="clear_button" type="button" name="clearbutton" value="Clear Request" onclick="javascript:eraseText();">

</form>



</body>

</html>






  • When a user enters a date like so: 12/25/2016 it will be converted into this type of format: Mon Dec 25 2016. I have the functionality working with javascript being displayed in the textbox but no conversion is happening at the moment. I have the JSON there but don't know how to utilize it.



Expand the snippet to fix the textbox.

Answer

Simply use with input type="date" and toUTCString() .

function check(){
  var dates = document.getElementById('date').value;
  console.log(new Date(dates).toUTCString())
  
  }
<input type="date" id="date" onchange="check()">check me

Update with answer

function eraseText() {
    document.getElementById("textbox").value = " ";
}

function display() {
     var request = document.getElementById("request_input").value;
     var dates = document.getElementById("date_input").value;
      var date = new Date(dates).toUTCString();
     document.getElementById("textbox").value = date + " - " + request;
} 
body 	{
				
		background-color:#f5f5dc;
		padding-left:100px; 
		padding-right:100px;
		padding-bottom:100px;

		}

form 	{
		outline-offset:12px;
    	outline-color:red;
		outline-width:3px;
		outline-style: solid;
		background-color:#008080;
		}

h2 	{
	color:#00cc00;
	text-align:left;
	}

p 	{
	color:blue;
	text-align:left;
	}
textarea 	{
			margin-left:430px
			}


#clearbutton 	{
				text-align:left;
				}

#submit 		{
				text-align:left;
				}
<form id='form' name="form1" method = 'post'>
    <h2>Change and Update Packages</h2>
  <textarea id="textbox" rows="10" cols="50"></textarea>
  <p>Enter Your Request:</p>
    <input type="text" id="request_input" name="request">
<p>Request Date:</p>
    <input type="date" id="date_input" name="date">
<br>
<br>
<br>
<input id ="submit" type = "button" onclick="display()" value='Add Request'/>
<br>
 <br>
  <input id="clear_button" type="button" name="clearbutton" value="Clear Request" onclick="javascript:eraseText();"> 
</form>