En af de ting der ofte er problematisk i web applikationer er indtastning af datoer. Nogle applikationer tvinger brugeren til at gå gennem en kalender (der ofte skal snakke med serveren for at skifte måned), for at være sikker på at datoen bliver indtastet i et gyldigt format. Det er langsomt, og det tvinger ofte brugeren til at bruge musen, selvom mange hellere vil taste datoen direkte. Andre applikationer giver kun mulighed for direkte indtastning, og tvinger dermed brugeren til overholde et specifikt format, som endda nogle gange slet ikke er nævnt.

Men hvorfor skal det være så besværligt? Her præsenteres et almindeligt input felt beregnet til dato-indtastning. Bag feltet ligger lidt logik der sørger for at en stribe forskellige formater håndteres helt automatisk. Idéen er ikke min egen, men stammer fra Simon Willisons artikel A better way of entering dates. Her tilrettet til brug i danske applikationer og udvidet lidt. Prøv selv!

Indtast en dato (valgfrit format):

Bemærk, af praktiske årsager fortolkes indtastningen først når feltet forlades. Her er et par eksempler på gyldige indtastninger:

• i dag/i morgen/i går, evt. sammentrukket og/eller forkortet
• 6
• 6. jan
• 6. jan 2005
• jan 6
• næste fredag
• sidste onsdag
• 06/01/2005
• 06/01/05
• 06/01
• 6/1
• 2005-01-06
• 05-01-06
• 01-06
• 1-6
• pil op/pil ned retter til næste/foregående dag

Skulle flere formater ønskes kan de let tilføjes. Ovenstående eksempel er genereret med følgende kode:

<script type="text/javascript" src="/javascript/ArrayX.js"></script>
<script type="text/javascript" src="/javascript/StringX.js"></script>
<script type="text/javascript" src="/javascript/DateBox.js"></script>

Indtast en dato (valgfrit format):
<input type="text" id="datebox" value="" />

<script type="text/javascript">
  DateBox.register(document.getElementById('datebox'));
</script>

Der er desuden krydret med følgende CSS:

.DateBoxControlErrorMsg
{
  color: Red;
}

.DateBoxControlMsg:before, .DateBoxControlErrorMsg:before
{
  content: " (";
}

.DateBoxControlMsg:after, .DateBoxControlErrorMsg:after
{
  content: ")";
}

De to sidste regler har ingen effekt i Internet Explorer op til version 6.

Download: ArrayX.js, StringX.js, DateBox.js.