Text box with date format

Forum Moderators: open

Message Too Old, No Replies

Text box with date format

anilkumarkatta

11:17 am on Jun 19, 2009 (gmt 0)

Hi All

I have a requirement where i have a date input text bix
initail value should be dd/mm/yyyy where dd,mm,yyyy are editable which should be in grey color & /'s should be in bold colored.

Could you guys help me..?

Thanks & Regards,
Anil Katta

swa66

6:05 pm on Jun 19, 2009 (gmt 0)

To show off some CSS ;)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>date input test</title>
    <style type="text/css">
      input {
        width: 2em;
        text-align: center;
        border: 0;
        vertical-alin: top;
        font-size: 10pt;
        line-height: 12pt;
        font-weight: normal;
        color: gray;
      }
      input[name="y"] {
        width: 4em;
      }
      fieldset {
        padding: 0 5px 5px;
        font-weight: bold; 
        font-size: 16pt;
        line-height: 16pt;
      }
      legend {
        font-size: 12pt;
        font-weight: normal;
      }
    </style>
  </head>
  <body>
    <form action="#" method="get">
      <fieldset>
        <legend>Date:</legend>
        <input type="text" name="d" value="DD" maxlength="2" /> /
        <input type="text" name="m" value="MM" maxlength="2" /> /
        <input type="text" name="y" value="YYYY" maxlength="4" />
      </fieldset>
    </form>
  </body>
</html>

Add in some javascript to remove the initial value when the input field gets clicked.

Tested in FF, safari and opera (all latest versions), did not bother with IE.

IE6 won't support the "input[name="y"]" selector, IE7.js can fix that or you might add some superfluous code to work around it as well.

anilkumarkatta

4:59 am on Jun 22, 2009 (gmt 0)

lots of thanks buddy