2009-06-16 295 views
7

使用javascript,我們如何自動將當前的DATE和TIME插入到表單輸入字段中。在表單輸入欄中自動插入日期和時間?

我正在構建一個「問題」表單,以跟蹤用戶提交的關於某個服務的投訴。我正在收集儘可能多的信息。我想保存在這裏的工作人員不必每次打開表單時手動輸入日期和時間。

我有這樣的代碼片段:

<input id="date" name="date" value="javascript:document.write(Date()+'.')"/> 

,但它不工作。

非常感謝您的任何幫助。

+1

任何* HTML元素將永遠執行JS語句*號屬性:HTML不是一種腳本語言。 onclick等人只是提供了一個DOM表示的值。 – annakata 2009-06-16 14:49:08

+0

在此問題中使用服務器端代碼(PHP,ASP.NET)更安全。黑客(初學者)可以通過FireBug,開發者工具(IE8 +)來改變你的輸入值。 – MajidTaheri 2012-06-13 06:02:43

回答

17

Javascript將不會在值屬性中執行。你可以做這樣的事情,雖然:

<input id="date" name="date"> 

<script type="text/javascript"> 
    document.getElementById('date').value = Date(); 
</script> 

你可能要格式化的日期作爲你喜歡,因爲日期的默認輸出()看起來像:Tue Jun 16 2009 10:47:10 GMT-0400 (Eastern Daylight Time)。有關格式化日期的信息,請參閱this SO question

+2

僅當輸入不是HTML5日期輸入字段時纔有效。 – 2016-09-27 10:42:59

2

獲取日期格式的最快方法是使用datejs

這個lib很容易使用,並且給你非常漂亮的格式。


至於你的代碼片段,不要使用document.write,如果你可以幫助它。嘗試

document.getElementById("date").value = new Date().toUTCString(); 
4

見的例子,http://jsbin.com/ahehe

使用JavaScript日期格式化工具描述here

<input id="date" name="date" /> 

<script> 
    document.getElementById('date').value = (new Date()).format("m/dd/yy"); 
</script> 
+0

對不起,「約翰尼最近來了」,但我已經從星期天的七種方式嘗試這個腳本,並不能讓它填充該領域。我建立了一個新文件,其中包含上面的代碼,並帶有適當的html標記,並且不會生成帶有日期的文本框。有什麼建議麼? – user1794918 2014-12-06 12:29:40

0
<input id="date" name="date" /> 
<script type="text/javascript"> 
document.getElementById("date").value = new Date(); 
</script> 
0

聽起來好像你要存儲表單提交後輸入字段包含的值,這意味着你正在使用腳本語言。我會用它代替JavaScript,因爲大多數腳本語言都有更好的時間/日期格式選項。在PHP中,你可以做這樣的事情:

<input id="date" name="date" value="<?php echo date("M j, Y - g:i"); ?>"/> 

這將填補該領域與 「2009年06月16日 - 8:58」

0

另一種選擇是:

<script language="JavaScript" type="text/javascript"> 
document.getElementById("my_date:box").value = (Stamp.getDate()+"/"+(Stamp.getMonth() + 1)+"/"+(Stamp.getYear())); 
</script> 
1

如果你是使用HTML5日期

使用此代碼

HTML

<input type="date" name="bday" id="start_date"/> 

Java腳本

document.getElementById('start_date').value = Date(); 
1
$("#startDate").val($.datepicker.formatDate("dd/mm/yy", new Date())); 
$("#endDate").val($.datepicker.formatDate("dd/mm/yy", new Date())); 

在腳本的末尾添加上面的代碼。這是必需的,因爲datepicker插件沒有規定在初始化時在控件中設置日期。

6
<input type="date" id="myDate" /> 

<script type="text/javascript"> 
function SetDate() 
{ 
var date = new Date(); 

var day = date.getDate(); 
var month = date.getMonth() + 1; 
var year = date.getFullYear(); 

if (month < 10) month = "0" + month; 
if (day < 10) day = "0" + day; 

var today = year + "-" + month + "-" + day; 


document.getElementById('myDate').value = today; 
} 
</script> 

<body onload="SetDate();"> 

這裏找到:http://jsbin.com/oqekar/1/edit?html,js,output

0
var date = new Date(); 

document.getElementById("date").value = date.getFullYear() + "-" + (date.getMonth()<10?'0':'') + (date.getMonth() + 1) + "-" + (date.getDate()<10?'0':'') + date.getDate(); 

document.getElementById("hour").value = (date.getHours()<10?'0':'') + date.getHours() + ":" + (date.getMinutes()<10?'0':'') + date.getMinutes();