使用JSON mm / dd / yyyy格式转换用户输入日期并将其显示为结果

时间:2016-11-18 05:22:00

标签: javascript html json css3



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>
&#13;
&#13;
&#13;

  • 当用户输入如下日期:2016年12月25日时,它将转换为以下格式: 2016年12月25日星期一。我有功能与javascript显示在文本框中,但目前没有转换。我有JSON但不知道如何使用它。

展开代码段以修复文本框。

2 个答案:

答案 0 :(得分:3)

只需使用input type="date"toUTCString()

&#13;
&#13;
"target": "es6"
&#13;
function check(){
  var dates = document.getElementById('date').value;
  console.log(new Date(dates).toUTCString())
  
  }
&#13;
&#13;
&#13;

使用Json更新答案

&#13;
&#13;
<input type="date" id="date" onchange="check()">check me
&#13;
function eraseText() {
    document.getElementById("textbox").value = " ";
}

function display() {
     var request = document.getElementById("request_input").value;
     var dates = document.getElementById("date_input").value;
       var d=new Date(dates);
  var date_array=  '{"test_day":"'+d.getDay()+'","test_date":"'+d.getDate()+'","test_month":"'+d.getMonth()+'", "test_year":"'+d.getFullYear()+'","test_utc":"'+d.toUTCString()+'"}';
  var obj = JSON.parse(date_array);
  document.getElementById("textbox").value = obj.test_utc +'-'+request;
  console.log(obj)
    
}
&#13;
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;
				}
&#13;
&#13;
&#13;

答案 1 :(得分:0)

我无法在另一个答案中对此进行评论,但使用<input type="date">将无法与Chrome和Firefox之外的其他浏览器一起使用。

您可以使用Date.parse()