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
– annakata, Commented Jun 16, 2009 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
– MajidTaheri, Commented Jun 13, 2012 at 6:02

Community · Accepted Answer · 2017-05-23 12:25:50Z

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, 2017 at 12:25

CommunityBot

11 silver badge

answered Jun 16, 2009 at 14:46

Daniel Vandersluis

94.7k23 gold badges174 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oliver Moran Over a year ago

Only works if the input is not a HTML5 date input field.

Usman · Accepted Answer · 2015-09-22 07:06:28Z

9

<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

edited Sep 22, 2015 at 7:06

answered Mar 30, 2015 at 4:13

Usman

1,14611 silver badges13 bronze badges

Comments

cgp · Accepted Answer · 2009-06-16 14:51:30Z

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, 2009 at 14:51

answered Jun 16, 2009 at 14:46

cgp

41.4k12 gold badges107 silver badges131 bronze badges

1 Comment

user1794918 Over a year ago

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?

mkoryak · Accepted Answer · 2009-06-16 14:44:34Z

3

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

answered Jun 16, 2009 at 14:44

mkoryak

58.1k64 gold badges204 silver badges262 bronze badges

Comments

Hormis Lona · Accepted Answer · 2015-01-21 04:56:09Z

2

$("#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.

answered Jan 21, 2015 at 4:56

Hormis Lona

5232 gold badges8 silver badges19 bronze badges

Comments

Scott · Accepted Answer · 2009-06-16 14:59:34Z

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, 2009 at 14:59

Scott

2,6575 gold badges27 silver badges33 bronze badges

1 Comment

Grace Huang Over a year ago

This would depend on the server's timezone, not really user's local time

kiran lanke · Accepted Answer · 2014-07-26 07:07:46Z

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, 2014 at 7:07

kiran lanke

921 gold badge3 silver badges12 bronze badges

Comments

jiggy · Accepted Answer · 2009-06-16 14:47:37Z

0

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

answered Jun 16, 2009 at 14:47

jiggy

3,8261 gold badge27 silver badges41 bronze badges

Comments

Sled · Accepted Answer · 2012-02-06 05:15:49Z

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 6, 2012 at 5:15

Sled

19.1k28 gold badges125 silver badges174 bronze badges

answered Mar 25, 2010 at 1:16

aguz

711 silver badge1 bronze badge

Comments

Tony · Accepted Answer · 2016-06-30 08:51:16Z

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

answered Jun 30, 2016 at 8:51

Tony

1,1479 silver badges19 bronze badges

Comments

Darshan Dalwadi · Accepted Answer · 2023-06-07 06:51:32Z

0

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];
                }
            }
    }
}

answered Jun 7, 2023 at 6:51

Darshan Dalwadi

1

2 Comments

Lajos Arpad Over a year ago

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.

Community Over a year ago

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.

Collectives™ on Stack Overflow

Auto insert date and time in form input field?

11 Answers 11

1 Comment

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

1 Comment

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related