Member Avatar for ekseks

Hi Guys,

I am currently making a site again for a follow-up but now it needs date! I am currently testing it on a simple html, I found this simple code on the internet but as you can see for my title I need to like sort of "autoformat while typing to mm/dd/yyyy" so can you give me some tweaks, by the way this code down here requires you not to type anymore in the textbox I need to have an autoformat typing

<html>
<head>
<script type="text/javascript">
function zp(n){
return n<10?("0"+n):n;
}
function insertDate(t,format){
var now=new Date();
var DD=zp(now.getDate());
var MM=zp(now.getMonth()+1);
var YYYY=now.getFullYear();
var YY=zp(now.getFullYear()%100);
format=format.replace(/DD/,DD);
format=format.replace(/MM/,MM);
format=format.replace(/YYYY/,YYYY);
format=format.replace(/YY/,YY);
t.value=format;
}
</script>
</head>
<body>
<form>
<input onfocus="insertDate(this,'MM/DD/YYYY')"><br>
<input onfocus="insertDate(this,'MM/DD/YY')"><br>
<input onfocus="insertDate(this,'DD/MM')"><br>
<input onfocus="insertDate(this,'YYYY-MM-DD')"><br>
</form>
</body>
</html>
  • 5 Contributors
  • 8 Replies
  • 3K Views
  • 5 Years Discussion Span
  • Latest Post Latest Post by JonyGreen
Member Avatar for fxm

Please give some examples of what the user is prompted to type and what you expect to happen (when it is valid and when it is not).

Member Avatar for rajarajan2017

I executed your code and the formats you specified is displaying properly. Then what is ur query?
You want to identify whatever user types should be converted to your format?

Edited by rajarajan2017 because: n/a
Member Avatar for ekseks 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<p>
  <label>
    <input name="textfield" type="text" id="textfield" value="06032010" />
  </label>
</p>
<p>this is mmddyyyy, well you as a user will be typing this way, I want to automatically format this date &quot;number&quot; into</p>
<p>
  <label>
    <input name="textfield2" type="text" id="textfield2" value="06/03/2010" />
  </label>
&lt;--- this</p>
<p>as I type it out... automatic means to include the (/) and it will not accept letters or other ASCII characters thus is it also impossible to code the that months could be only up to 12 days up to 31</p>
</body>
</html>

:)

Member Avatar for fxm

If the user enters this 1212010 where do the slashes go?
If the user enters this 212010 what is the date?
If the user always must enter 8 digits, what is the problem?

Member Avatar for ekseks

If the user enters this 1212010 where do the slashes go?

it should be automatically format to mm/dd/yyyy then slashes will go 12/<-here01/<-and here then the year 2010 thus showing the date 12/01/2010

If the user enters this 212010 what is the date?

I need a format that follows mm/dd/yyyy

If the user always must enter 8 digits, what is the problem?

Again, it cannot be because the format mm/dd/yyyy has 10 characters, of course including the two slashes

Member Avatar for ekseks

Oh btw, I'm in a form so yes there are a lot of textarea where my date will be placed and I was thinking of when Submit button is clicked the field where he/she got a wrong input will be highlighted or some sort is it also possible?

Member Avatar for faulkj

I'm not sure this is exactly what you're looking for but check out this library:

http://plugins.jquery.com/project/fIsForFormat

It is the most useful thing I’ve found when it comes to Date formatting in JavaScript. Not only does it make formatting a piece of cake, but it has many other cool features as well!

I have no idea why it is listed as a jQuery plugin. I went through the code and couldn’t find any references to anything that looked like jQuery (or any other libraries for that matter.) I’ve used it standalone and it works just fine.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.