Fill an input field with the current date and time with javascript
Use javascript to fill an input field with the current date/time to save time for your self. A handy function with complete code and html to copy paste.
Save time for your self, and let javascript give you the current time.
We have a customer that enters lots of articles through a form, and one of the fields are a date/time when the auction is to start. To speed up their work I created a handy function that fills the input field with the current date/time.
Lets set the id of the input field to “startWhen”, by writing this: <input type=”text” id=”startWhen” />
This way we can access that field with this function: document.getElementById(“startWhen”)
Let’s assign the result from that function as the variable “theInput”.
The variable has a number of different attributes and the most important for us right now is .value, which holds the text that is displayed in the field.
Ok, let’s look at the “action… the javascript function: “setStartTimeNow()”.
Basicly we get a “date-object” like this: var d = new Date();
That object have lots of functions for getting the different variables like year, month, hour etc.
Important for us (that made me rub my head a little…) is that the function getMonth() returns a number between 0 and 11, where 0 is january and 11 is december.
So I add 1 to the the month, so we get the “normal” way to write month…
Because I live in Sweden I write the date/time like this: 2006-06-04 23:19.
Feel free to change around with the formatting if you need to.
There is some more “magic” to get the format good looking.
Numbers less than 10 are returned without a leading zero, but I like to have a leading zero for the format.
So this short way to write a if makes sure that numbers lover than 10 get’s a zero infront of the number: (currMonth < 10 ? “0″ : “”)
I now create a link that activates the javascript function: <a href=”#” onclick=”setStartTimeNow()”>Set current time</a>
It’s called by using the “onclick” event.
Good luck and remember that javascript can be a really good way to help your visitors.
Below are the javascript and html, so you don’t have to write anything at all by your self
The javascript function:
<script language="JavaScript">
function setStartTimeNow()
{
var d = new Date();
var currYear = d.getFullYear();
var currMonth = d.getMonth() + 1;
var currDate = d.getDate();
var currHour = d.getHours();
var currMin = d.getMinutes();
time = currYear + "-" +
(currMonth < 10 ? "0" : "") + currMonth + "-" +
(currDate < 10 ? "0" : "") + currDate + " " +
(currHour < 10 ? "0" : "") + currHour + ":" +
(currMin < 10 ? "0" : "") + currMin;
theInput = document.getElementById("startWhen");
theInput.value = time;
}
</script>
The html form:
<form> Start time: <input type="text" id="startWhen" /> <a href="#" onclick="setStartTimeNow()">Set current time</a> </form>

August 27th, 2009 at 3:59 am
uhmm..
Is there a basic way to learn JavaSript?
As in Basic… In a sense that anyone were able to understand
easily.
August 27th, 2009 at 4:04 am
uhmm.. another here..
from the code shown above, That’s a reserved word of JavaScript. Here’s my question: ” When starting to create a java, the code shown above should always be at the beginning?
or there’s other way to start Creating java.. just asking…
thanks for the concern.
August 27th, 2009 at 4:13 am
Not easy, but I would recommend you to start reading here: http://www.w3schools.com/JS/default.asp
August 27th, 2009 at 4:15 am
The script tag is always needed if you write javascript “inline” in the html. If you create an external js-file you don’t need that though, except for linking it in from the html page. And another thing, java is not the same thing as javascript!! Very important! They have nothing in common, except from the first 4 letters.