Auto insert date and time in form input field?

Question

Using javascript, how can we auto insert the current DATE and TIME into a form input field.

I'm building a "Problems" form to keep track of user submitted complaints about a certain service. I'm collecting as much info as possible. I want to save the staff here from having to manually enter the date and time each time they open the form.

I have this snippet of code:

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

but it's not working.

many thanks for any help.

No attribute of *any* HTML element will ever execute a JS statement: HTML is not a scripting language. onclick et al just provide values to a DOM representation. — annakata, Jun 16 '09 at 14:49
use server side code(PHP,ASP.NET) for more secure in this issue. the hackers(beginner) could be change your `input` values by FireBug,Developer Tools(IE8+) ,... . — MajidTaheri, Jun 13 '12 at 06:02

score 19 · Accepted Answer · edited May 23 '17 at 12:25

19

Javascript won't execute within a value attribute. You could do something like this, though:

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

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

You'd probably want to format the date as you prefer, because the default output of Date() looks something like: Tue Jun 16 2009 10:47:10 GMT-0400 (Eastern Daylight Time). See this SO question for info about formatting a date.

edited May 23 '17 at 12:25

Community

1
1

answered Jun 16 '09 at 14:46

Daniel Vandersluis

91,582
23
169
153

2

Only works if the input is not a HTML5 date input field. – Oliver Moran Sep 27 '16 at 10:42

Usman · Answer 2 · 2015-09-22T07:06:28.577

<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();">

found here: http://jsbin.com/oqekar/1/edit?html,js,output

cgp · Answer 3 · 2009-06-16T14:51:30.000

5

See the example, http://jsbin.com/ahehe

Use the JavaScript date formatting utility described here.

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

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

edited Jun 16 '09 at 14:51

answered Jun 16 '09 at 14:46

cgp

41,026
12
101
131

Sorry to be a "Johnny come lately" but I have tried this script above seven ways from Sunday and can't get it to populate the field. I built a new file all that is in it is the code above with proper html tagging and it does not produce a text box with a date in it. Any suggestions? – user1794918 Dec 06 '14 at 12:29

score 3 · Answer 4 · answered Jun 16 '09 at 14:44

The fastest way to get date formatting thats any good is to use datejs.

The lib is really easy to use and does give you very pretty formatting.

as far as your code snippet, dont use document.write if you can help it. try

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

score 2 · Answer 5 · answered Jan 21 '15 at 04:56

$("#startDate").val($.datepicker.formatDate("dd/mm/yy", new Date()));
$("#endDate").val($.datepicker.formatDate("dd/mm/yy", new Date()));

Add the above code at the end of the script. This is required because the datepicker plugin has no provision to set the date in the control while initializing.

score 1 · Answer 6 · answered Jun 16 '09 at 14:59

1

It sounds like you are going to be storing the value that input field contains after the form is submitted, which means you are using a scripting language. I would use it instead of JavaScript as most scripting languages have better time/date formatting options. In PHP you could do something like this:

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

Which would fill the field with "Jun 16, 2009 - 8:58"

answered Jun 16 '09 at 14:59

Scott

2,557
5
26
32

This would depend on the server's timezone, not really user's local time – Grace Huang Jul 21 '14 at 23:15

score 1 · Answer 7 · answered Jul 26 '14 at 07:07

1

If you are using HTML5 date

use this code

HTML

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

Java Script

document.getElementById('start_date').value = Date();

answered Jul 26 '14 at 07:07

kiran lanke

92
1
3
12

score 0 · Answer 8 · answered Jun 16 '09 at 14:47

0

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

answered Jun 16 '09 at 14:47

jiggy

3,828
1
25
40

score 0 · Answer 9 · edited Feb 06 '12 at 05:15

0

Another option is:

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

edited Feb 06 '12 at 05:15

Sled

18,541
27
119
168

answered Mar 25 '10 at 01:16

aguz

71
1
1

score 0 · Answer 10 · answered Jun 30 '16 at 08:51

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();

score 0 · Answer 11 · answered Jun 07 '23 at 06:51

function onDatepicker(){
    let dateValue = document.getElementById('datepicker').value;
    if(dateValue.length == 2){
        document.getElementById('datepicker').value = dateValue+'/';
    }else if(dateValue.length > 2){
        let value1= dateValue.split('/');
        if(value1[1].length == 2 && value1.length == 2){
            document.getElementById('datepicker').value = value1[0]+'/'+value1[1]+'/';
        }
        if(value1.length > 2){
            if(value1[2].length == 1 || value1[2].length < 5){
                    document.getElementById('datepicker').value = value1[0]+'/'+value1[1]+'/'+value1[2];
                }else{
                    document.getElementById('datepicker').value = value1[0]+'/'+value1[1]+'/'+value1[2][0]+value1[2][1]+value1[2][2]+value1[2][3];
                }
            }
    }
}

Your answer is incomplete. You need to explain your code, so visitors of the question will be informed about what your idea is and why it is solving the problem. — Lajos Arpad, Jun 07 '23 at 08:59
As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jun 07 '23 at 10:14

Auto insert date and time in form input field?

11 Answers11

Linked