Beste manier om gebruikers datum en tijd te laten invoeren - Softwareontwikkeling

zaterdag 27 mei 2006 22:42

Acties:

ondergewaardeerde internetguru

Topicstarter

Een van mijn grootste ergernissen aan HTML is altijd het beperkte aantal aan widgets (invoervelden, checkboxes, radio buttons, dropdownlists enz.) geweest. Gelukkig kunnen we met JavaScript daar tegenwoordig aardig omheen werken om zo ingevoerde teksten te valideren en ook sliders en spinners te kunnen maken.

Voor het invoeren van datums en tijden bestaat er niet echt een standaardmanier. Tot nu toe gebruikte ik altijd 5 dropdownlijsten voor dag, maand, jaar, uren en minuten maar omdat er 60 minuten in een uur zitten betekent dat een hele lange dropdownlijst met een scrollbar, wat niet echt optimaal werkt, vooral als je dat mensen laat doen met een brakke muis die alle kanten op springt en niet weten dat ze het ook via het toetsenbord kunnen, niet echt ideaal dus.

Daarom ben ik vandaag bezig geweest met het maken van een gecombineerd datum/tijd invoerveld dat 5 tekstvelden zijn die aan elkaar zijn gekoppeld en de toetsaanslagen afvangt, maar vanwege de enorme hoeveelheid van combinaties van toetsenaanslagen en andere events en browserafhankelijkheden lijkt dat niet echt te gaan slagen vooral niet toen ik een testgebruiker een datum liet invoeren en deze meteen "12 ju..." begont te typen in plaats van "12-6".

Op het internet zoeken naar andere voorbeelden leverde een heleboel enorme frameworks met mooie kalenders op, maar die zitten ook vol met bugs, en hebben vrijwel nooit de mogelijkheid om een tijd in te vullen.

Ik ben nu zover dat de 5 dropdownlists eigenlijk best wel aantrekkelijk lijken, daar kan je onmogelijk iets fouts invullen en het werkt overal.

Omdat ik bijna zeker weet dat veel meer mensen hier wel eens een gebruiker een datum/tijd hebben laten invoeren wil ik wel eens weten hoe jullie dat hebben opgelost, en hoe jullie ervaringen hiermee zijn.

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.

zaterdag 27 mei 2006 22:48

Acties:

André

Analytics dude

Gewoon de pulldowns gebruiken en de middelste option op selected zetten, dan minimaliseer je het scrollen tot hooguit 30 items

Ik heb hier ook wel eens over nagedacht maar anders dan een kalender voor de datum heb ik nog niet kunnen vinden. En die heeft dan ook nog weer zijn nadelen. Daarbij is het ook zo dat iedereen weet hoe pulldowns werken, en niet iedereen weet hoe de DHTML widgets werken.

zaterdag 27 mei 2006 22:55

Acties:

Priet

To boldly do what no one has..

Ik vind deze altijd wel fijn werken

"If you see a light at the end of a wormhole, it's probably a photon torpedo!"

zaterdag 27 mei 2006 22:57

Acties:

Gomez12

Wat ik nog wel eens gebruik is gewoon kalender voor data, met focus op vandaag. En 1 invoerveld voor de tijd waarbij ik alle niet-numerieke tekens reaf stripte, daarna laatste 2 cijfers gebruiken als minuten en wat er dan nog overbleef waren de uren ( met een opmerking erbij dat het ingevoerd moest worden als 24h notatie ) en nog een popup ter controle als iemand een urenwaarde tussen 0 en 7 invoerde ( Weet u zeker dat dit 's nachts moet plaatsvinden )

Heeft tot nu toe altijd volstaan.

zaterdag 27 mei 2006 22:59

Acties:

Alex)

Ik maak soms selects, soms gewoon een tekstveld waar ik om een bepaald soort invoer vraag (jjjjmmdd), dat hangt van het soort gebruiker af, en van het doel.

We are shaping the future

zaterdag 27 mei 2006 23:19

Acties:

orf

Zou het niet mogelijk zijn om onchange een functie aan te roepen, die op basis van een regex verschillende schrijfwijzen de value converteerd naar een standaard formaat?

De regex(en) zouden dan de meest gebruikte schrijfwijzen moeten kunnen pakken:

Maandag 1 januari 2006
Maandag 1 jan 2006
Ma 1 januari 2006
Ma 1 jan 2006
01-01-2006
1-1-2006
01-01-06
1-1-6

En dan weer in combinatie met tijd

[ Voor 3% gewijzigd door orf op 27-05-2006 23:22 ]

zondag 28 mei 2006 00:05

Acties:

Paitor

rages doen :P

Volgens mij moet het mogelijk zijn met JS om de local system time uit te lezen?
Dan kan je die toch als default zetten in de textarea / pulldown boxes.
Daarna kan een user ze desnoods nog aanpassen.

Live Life to the Max | Kom op konijntje doe maar huppele wiebele

zondag 28 mei 2006 00:10

Acties:

Zerora

Ik Henk 'm!

Paitor schreef op zondag 28 mei 2006 @ 00:05:
Volgens mij moet het mogelijk zijn met JS om de local system time uit te lezen?
Dan kan je die toch als default zetten in de textarea / pulldown boxes.
Daarna kan een user ze desnoods nog aanpassen.

En hoe wil jij een geboortedatum gaan opvragen dan?

Script maken die automatisch het gemeenteregister uitleest

Trans-life! :::: "All things change, whether from inside out or the outside in. That is what magic is. And we are magic too."

zondag 28 mei 2006 08:26

Acties:

Hermanvh

webOS fan, hacker, developer

orf schreef op zaterdag 27 mei 2006 @ 23:19:
Zou het niet mogelijk zijn om onchange een functie aan te roepen, die op basis van een regex verschillende schrijfwijzen de value converteerd naar een standaard formaat?

De regex(en) zouden dan de meest gebruikte schrijfwijzen moeten kunnen pakken:

Maandag 1 januari 2006
Maandag 1 jan 2006
Ma 1 januari 2006
Ma 1 jan 2006
01-01-2006
1-1-2006
01-01-06
1-1-6

En dan weer in combinatie met tijd

Dan zit je nog steeds met het probleem van verschillende talen en schrijfwijzen in andere landen. In Duitsland gebruiken ze . als scheidingsteken, in de VS /. Daarnaast kan ook de volgorde afwijken van dag en maand. Om dit met regex op te lossen lijkt me erg omslachtig.

Ik zou gaan voor dropdowns met als standaard selectie huidige datum en tijd ? Of inderdaad de middelste waarde in de lijst.

Mijn voorkeur gaat uit naar maandnamen, omdat mensen zo niet maand en dag kunnen omdraaien.

Ook een kalender i.c.m. een 2-tal dropdowns voor de tijd zou een optie zijn.

webOS all the way!

zondag 28 mei 2006 08:49

Acties:

Joen

Ik heb meer de gedachte: het is niet mijn probleem dat de muis van de eindgebruiker niet goed werkt, koop dan een nieuwe muis of maak je oude schoon.
Die kalender waar Priet naar linkt is ook wel een mooie.

Alleen jammer dat de tijd daar met het AM/PM systeem werkt, dat zal dan omgebouwd moeten worden.

zondag 28 mei 2006 10:40

Acties:

orf

Als je een beetje nadenkt over usability, dan is het juist wel jouw probleem als een gebruiker niet op een makkelijke manier iets in kan voeren.
De genoemde kalender vind ik echt verschrikkelijk; waarschijnlijk zien veel mensen het tijdsvakje onderaan niet eens. Als ze het zien en erin proberen te typen lukt dat niet. Je moet met shift en [-] + shift de tijden aanpassen? De andere manier die het ding suggereert is door te draggen.

Een gebruiker heeft deze wijze van invoeren nog nooit gezien. Kijk daarom liever hoe het werkt in Microsoft Outlook, de Windows klok of Mac klok.

zondag 28 mei 2006 10:46

Acties:

Verwijderd

rare vraag, maar wat is het nut om een gebruiker een tijd tot op de seconde in te laten voeren? Waar wordt dat verder voor gebruikt?

zondag 28 mei 2006 10:53

Acties:

André

Analytics dude

Verwijderd schreef op zondag 28 mei 2006 @ 10:46:
rare vraag, maar wat is het nut om een gebruiker een tijd tot op de seconde in te laten voeren? Waar wordt dat verder voor gebruikt?

Daar zijn genoeg toepassingen voor te bedenken lijkt me? Als je rondetijden in wil voeren bijvoorbeeld?

Even over het usability aspect: wat ik al eerder zei: iedereen kent de pulldowns en zal precies weten waarvoor ze zijn en wat ze doen. Daarom is het verreweg het meest duidelijk en gebruiksvriendelijk.

zondag 28 mei 2006 11:03

Acties:

Verwijderd

André schreef op zondag 28 mei 2006 @ 10:53:
[...]

Daar zijn genoeg toepassingen voor te bedenken lijkt me? Als je rondetijden in wil voeren bijvoorbeeld?

Daar heb je alleen een tijd voor nodig, geen datum.

Ik vind zelf altijd een textveld het makkelijkst, zowel als gebruiker en als ontwikkelaar. Eén tekstveld verwerken kan mooi met een simpele functie die wat verschillende checks uitvoert en een timestamp teruggeeft. Wel even een voorbeeld datum/tijd naast de input box plaatsen zodat iedereen direct de syntax herkent. Die dropdown oplossingen vind ik zeer vervelend als gebruiker. Formulieren vul ik in met het toetsenbord en dan moet je door die dropdown boxen scrollen met je pijltjes, daarbij is er vaak geen enkele clientside controle op een bestaande datum, dus voegt het weinig toe.

zondag 28 mei 2006 13:41

Acties:

Zerora

Ik Henk 'm!

André schreef op zondag 28 mei 2006 @ 10:53:
Even over het usability aspect: wat ik al eerder zei: iedereen kent de pulldowns en zal precies weten waarvoor ze zijn en wat ze doen. Daarom is het verreweg het meest duidelijk en gebruiksvriendelijk.

Je zou dan nog voor extra usability een script kunnen gebruiken die automatisch een dropdownveld verder springt als je een waarde hebt ingevuld/gekozen oid.

Trans-life! :::: "All things change, whether from inside out or the outside in. That is what magic is. And we are magic too."

zondag 28 mei 2006 14:06

Acties:

Verwijderd

interessant, hier ben ik op het moment ook mee bezig: http://www.rikkertkoppes.com/tests/date.htm
dit is nog puur een test en werkt nog lang niet optimaal, maar het is in ieder geval iets om op door te gaan (in Fx)

zondag 28 mei 2006 14:37

Acties:

orf

Ik ben er even mee bezig geweest, nog lang niet volledig, maar het werkt al vrij ok vind ik.
De functie werkt onchange.

http://www.avviso.nl/javascript/datum.html

edit: uitsluitend voor nederlandse schrijfwijzen

[ Voor 15% gewijzigd door orf op 28-05-2006 14:49 ]

zondag 28 mei 2006 14:46

Acties:

Verwijderd

Het is een combinatie van problemen en de oorzaak ligt hem voornamelijk in het gemis van goede support voor I18n. Om alle situaties af te vangen zul je een startpunt moeten hebben, en dat is het verwachte resultaat voor geschreven maanden en dagen maar je gaat zowiezo problemen krijgen met een invoer als 01-01-2006, wat is hier het maandnummer en wat is hier de dag.

Met selectboxes kun je dat in ieder geval vastleggen, zo doen ze het ook bij hotmail die ook te maken heeft met I18n situaties.

zondag 28 mei 2006 15:25

Acties:

Freee!!

Trotse papa van Toon en Len!

Verwijderd schreef op zondag 28 mei 2006 @ 14:46:
maar je gaat zowiezo problemen krijgen met een invoer als 01-01-2006, wat is hier het maandnummer en wat is hier de dag.

Slecht voorbeeld, hier maakt het helemaal niet uit wat maand en dag is. 02-03-06 is veel erger.

The problem with common sense is that sense never ain't common - From the notebooks of Lazarus Long

GoT voor Behoud der Nederlandschen Taal [GvBdNT

zondag 28 mei 2006 16:03

Acties:

Verwijderd

Mr. Liu schreef op zondag 28 mei 2006 @ 15:25:
[...]

Slecht voorbeeld, hier maakt het helemaal niet uit wat maand en dag is. 02-03-06 is veel erger.

Lees "als" .. het gaat om het principe, niet om de inhoud van de waardes

zondag 28 mei 2006 16:57

Acties:

Freee!!

Trotse papa van Toon en Len!

Verwijderd schreef op zondag 28 mei 2006 @ 16:03:
[...]
Lees "als" .. het gaat om het principe, niet om de inhoud van de waardes

Dat is waar, maar geef dan ook een voorbeeld waarbij het wel uitmaakt.

The problem with common sense is that sense never ain't common - From the notebooks of Lazarus Long

GoT voor Behoud der Nederlandschen Taal [GvBdNT

zondag 28 mei 2006 17:09

Acties:

mistercash

Heb dit probleem ook gehad op school bij het vak informatiearchitectuur.
Heb het opgelost met een kalender javascript die de datum gekozen plakt in een tekstbox.
En een andere tekstbox voor tijd. met naast den tekstbox deze tekst: (uu:mm).

Kunt de mensen moeilijk als ze tijd moeten kiezen een klok tonen waar ze de wijzertjes moeten veranderen.
In outlook wordt ook alleen een dropdown gemaakt met uu:00 , uu:15, uu:30, uu;45 en als je een minuut specifiek wil zijn moet je het zelf aanpassen de minuten.

Ben benieuwd naar de ideale oplossing, ga dit topic bookmarken.

zondag 28 mei 2006 19:24

Acties:

Tjeemp

BEER N TEA

ik heb een tijdsformaat ding gemaakt, zodat je kunt kiezen hoe je het wilt weergeven.

dit met 2 invoerveldjes, 1 voor datumformaat 1 voor tijdsformaat. linkje naar php.net en ook het php date() formaat gebruikt... als de gebruiker dan begint te typen ziet hij rechts ervan een vakje komen dat laat zien hoe het er uit zou zien... geen idee of het echt gebruiksvriendelijk is, maar volgens mij doen forumsystemen het ook zo, maar dan zonder voorbeeld...

www.timovanderzanden.nl | Beer 'n' Tea

zondag 28 mei 2006 19:46

Acties:

Koeniepoenie

timovdz schreef op zondag 28 mei 2006 @ 19:24:
ik heb een tijdsformaat ding gemaakt, zodat je kunt kiezen hoe je het wilt weergeven.

dit met 2 invoerveldjes, 1 voor datumformaat 1 voor tijdsformaat. linkje naar php.net en ook het php date() formaat gebruikt... als de gebruiker dan begint te typen ziet hij rechts ervan een vakje komen dat laat zien hoe het er uit zou zien... geen idee of het echt gebruiksvriendelijk is, maar volgens mij doen forumsystemen het ook zo, maar dan zonder voorbeeld...

Heb je hier ook een voorbeeld van dan?

Ik zag eerder altijd in die phpBB fora dat je kon instellen hoe je graag je tijd weergegeven wilde hebben, daar kon je dan ook een format ingeven die volgens mij direct door de date() functie van PHP heen werd gehaald. Er werd daarbij ook gelinkt naar de php.net documentatie van date(), waar ik opzich wel uit kom maar ik kon me niet voorstellen dat iedereen daarmee uit de voeten komt.

Parse error: syntax error, unexpected GOT_USER in https://gathering.tweakers.net on line 1337

zondag 28 mei 2006 19:59

Acties:

marko77

voor data gebruik ik meestal een javascript (evt. in popup) waar de gebruiker een dag kan selecteren, tevens kan hij hier maanden wisselen en evt. jaren. Dit werkt op zich aardig en voorkomt iig foute invoer door de gebruiker.

voor tijd is het idd een stuk lastiger, wellicht iets van een klok die men dan kan aanklikken?

Mijn rig

zondag 28 mei 2006 23:14

Acties:

Priet

To boldly do what no one has..

Joen schreef op zondag 28 mei 2006 @ 08:49:
Die kalender waar Priet naar linkt is ook wel een mooie. Alleen jammer dat de tijd daar met het AM/PM systeem werkt, dat zal dan omgebouwd moeten worden.

Dat is, als het goed is, in te stellen in het configuratiebestand

"If you see a light at the end of a wormhole, it's probably a photon torpedo!"

maandag 29 mei 2006 00:14

Acties:

Tjeemp

BEER N TEA

Koeniepoenie schreef op zondag 28 mei 2006 @ 19:46:
[...]

Heb je hier ook een voorbeeld van dan?

Ik zag eerder altijd in die phpBB fora dat je kon instellen hoe je graag je tijd weergegeven wilde hebben, daar kon je dan ook een format ingeven die volgens mij direct door de date() functie van PHP heen werd gehaald. Er werd daarbij ook gelinkt naar de php.net documentatie van date(), waar ik opzich wel uit kom maar ik kon me niet voorstellen dat iedereen daarmee uit de voeten komt.

voorbeeldje
wel even in IE openen, hijs nog niet helemaal lekker bij FF (niet de JS maar markup)
gewoon even in 1 van de inputboxen bij "date / time format" klikken. dan kun je gewoon de letters van php date() gebruiken + wat verbindingstekens...

www.timovanderzanden.nl | Beer 'n' Tea

maandag 29 mei 2006 04:00

Acties:

Blaise

Ik heb het die ene keer dat ik het tegenkwam opgelost met twee inputs, 1 voor datum en 1 voor tijd, met daarbij de manier van invoeren vermeld, in de vorm van DD/MM/YYYY en HH:MM.

Ik denk dat de meeste mensen dat wel begrijpen en het vult lekker snel in, maar als je doelgroep veelal bestaat uit onervaren mensen kan je misschien beter met selectboxen werken. Dat wordt wel een irritatie als je vaak data/tijden moet invoeren.