input datum automatisch in juiste formaat zetten

[serpico]

Ik heb een <input id='GebDat' onkeypress='formatDate()'> waar een datum moet worden ingevoerd, nu wil het zo maken dat hij automatisch streepjes toevoegd tijdens het invoeren en het ook metteen in het juiste formaat zet.

Bijvoorbeeld wanneer er word ingevoerd:
01011997 » 01-01-1997
010197 » 01-01-1997
01-01-1997 » 01-01-1997
01-01-97 » 01-01-1997

en op het moment dat er al een streepje staat, mag er geen streepje worden toevoegd, ook niet door de gebruiker zelf.

weet iemand hoe ik dit kan maken?

Bij voorbaat dank!

 

[That Guy]

Pfff, daar vraag je toch zomaar wat. Het is in principe niet heel lastig, alleen het wordt redelijk wat code. Zoiets:

<input id='GebDat' onkeypress='formatDate(this)'>
<!-- door het 'this' hoef je niet te klooien met doc.GEBY enzo -->

[JS]function formatDate(elem)
{
// loop door alle characters heen in elem.value

// als je iets foutiefs tegenkomt
// verander dit

// als je meer dan 2 cijfers achter elkaar ziet
// als het niet het jaartal is
// voeg streepje toe

// als ...
// ...

// einde loop
}[/JS]

 

[serpico]

2cijfers

jah maar hoe kan ik zien of er 2 cijfers staan, en ook na de maanden?
en hoe zorg ik dat die het streepje niet dubbel toevoegd?

zou iemand een voorbeeld script voor me kunnen maken?

Bij voorbaat dank.

 

[That Guy]

[JS]function isNum(chr)
{
switch(chr)
{
case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7: case 8: case 9: return true;
}
return false;
}


var chr, i, len = elem.value.length;

for(i=0; i<len; i++)
{
chr = elem.value.substr(i, 1); // huidige character

if(i == 3 && isNum(chr) === true)
{
// 3e character is een getal. Dit moet eigenlijk een streepje zijn, dus:
elem.value = elem.value.substr(0, i) + '-' + elem.value.substr(i+1, len - i); // oid?
}

if(/* iets */)
{
// doe meer
}
}[/JS]Overgens is het mischien practischer om met regular expressions te werken hier; hoewel de expressie niet echt... mooi wordt.

Wat ook kan, en makkelijker is, is zoiets: op het moment dat de gebruiker 2 getallen heeft ingevoerd (dag), komt er gelijk een streepje te staan. Als de gebruiker dan weer 2 cijfers invoert, komt er weer automatisch een streepje te staan. Enzovoorts.

Ohja, en nog iets: dit is wel een heleboel geklooi voor iets dat denk ik een stuk makkelijker kan. Bijvoorbeeld een datepicker (HTML5 heeft zelfs een input-type-date...)



:thumb: