Avatar billede nemlig Professor
18. februar 2012 - 15:19 Der er 6 kommentarer og
1 løsning

Formatering af dato under indtastning

Hejsa.
Jeg har nogle inputfelter, hvor der skal indtastes dato i dette format: dd-mm-åååå.

Findes der en smart løsning, hvor man nøjes med kun at indtaste tallene, således der automatisk sættes bindestreg, når de 2 første tal er angivet og igen bindestreg når de næste 2 er indtastet. Løsningen kunne også være, at bindestregerne først sættes, når det 8. tal er angivet.
Envidere vil det være smart, hvis der hoppes videre til næste felt, når sidste tal er trykket.

Jeg har en lignende funktion til formattering af tal, hvor jeg kalder funktionen sådan her:

onblur=\"formater(this);\">
Men er det muligt, at formateringen allerede sker, når feltet er aktivit og sidste tegn er trykket?
Avatar billede olebole Juniormester
18. februar 2012 - 15:46 #1
<ole>

Sorry, men det er en skidt idé. Alle brugerundersøgelser viser, at det stortset irriterer/forvirrer alle brugere, når der rettes i det skrevne, realtime  =)

/mvh
</bole>
Avatar billede nemlig Professor
18. februar 2012 - 15:54 #2
Ok - jeg forstår.
Kunne man så lave det sådan, at ved onblur(), at der tjekkes for, om der er skrevet bindestreger, og hvis ikke, så sættes de?
Det gør det lidt nemmere for den "avancerede bruger", som dermed kan spare 2 x tastetryk.

Jeg tjekker iøvrigt for korrekt validering med PHP, når der sumbittes.
Avatar billede olebole Juniormester
18. februar 2012 - 17:12 #3
Jo, det kan såmænd godt lade sig gøre, men formaterede datoer indtastes i følge al erfaring i de særeste formater. Derfor bruger jeg somregel denne løsning, som er velafprøvet - også ved deciderede brugertest med både video, eye tracking og efterfølgende samtale:

<?php
function datePick($years, $expectedYear=0) {
    $thisYear = date('Y');
    $firstYear = $thisYear-$years;
    $expectedYear = $expectedYear>0 ? $thisYear-$expectedYear : false;
    $aHTML = array();
   
    echo $expectedYear.'<hr>';
   
    $aHTML[] = '<select name="day">';
    for ($i=1; $i<32; $i++) {
        $aHTML[] = '<option value="'.$i.'">'.$i.'</option>';
    }
    $aHTML[] = '</select>';
   
    $aHTML[] = '<select name="month">';
    for ($i=1; $i<13; $i++) {
        $aHTML[] = '<option value="'.$i.'">'.$i.'</option>';
    }
    $aHTML[] = '</select>';
   
    $aHTML[] = '<select name="year">';
    for ($i=$thisYear; $i>=$firstYear; $i--) {
        $selected = ($expectedYear && $expectedYear===$i) ? ' selected' : '';
        $aHTML[] = '<option value="'.$i.'"'.$selected.'>'.$i.'</option>';
    }
    $aHTML[] = '</select>';
   
    return implode('', $aHTML);
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>

<p><?php echo datePick(80, 30) ?></p>

</body>
</html>

Funktionen tage to argumenter. Det første angiver, hvorlangt tilbage i tiden pickeren skal begynde. Andet argument er valgfrit og angiver, hvilket år pickeren skal forudvælge. Er der f.eks. tale om et site, hvor brugere i 30-års alderen forventes at oprette sig, kan det passende være i nærheden af 30. Så slipper brugeren for at rode en masse år igennem.

Løsningen er naturligvis ikke skudsikker, da der er mulighed for 28, 29, 30 og 31 dage i en måned, men en bruger kan jo også indtaste 45-14-1955 i et tekstfelt  =)

Prøv den, og se om du ønsker at bruge den. Ellers finder vi ud af noget andet.
Avatar billede olebole Juniormester
18. februar 2012 - 17:14 #4
Ups ... slet lige linjen:

echo $expectedYear.'<hr>';

Det var bare en test  *o)
Avatar billede nemlig Professor
18. februar 2012 - 22:29 #5
Super - det kan jeg godt se.

Og så tjekker jeg datoen ved sumbit med php's checkdate().

Takker for input.

Er du begyndt at samle point, så smid venligst et svar.
Avatar billede olebole Juniormester
18. februar 2012 - 22:37 #6
Ellers tak. Du lægger bare selv et svar og accepterer det  *o)
Avatar billede nemlig Professor
22. maj 2012 - 10:28 #7
Svar.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester