I am developing a web application for a soccer Association. One requirement is the possibility to enter and modify registration periods, that is the time ranges (2 per year) where the association can exchange players.

Typically there is a current registration period, one future one and some past periods. How can I better display 4 date pickers (two start and end date fields) for each category (future, current, past periods)?

At the moment inside the same form I have a list of those date pickers (4 on each row) with labels to group them according to their status (past, current, future), but in the complex the layout is pretty full and "heavy". Any hint on how I could improve it?

Below the current UI: enter image description here

  • 3
    Do you have a mockup of what you currently have that you could share? – BDD Feb 4 '15 at 16:00
  • @BDD PLease have a look at the image I uploaded. The fields are editable (datepicker fields) if the registration period is not open/passed yet. – Francesco Feb 5 '15 at 9:00
  • Do users have to fill in all of the sections (past, present, future) or are some of them optional? That is a lot of fields to fill out – tohster Apr 7 '15 at 14:04

You could use a date range picker in order to have a combined view of start and end date. Also by re arranging the fields you can make the layout more compact and easier to scan

enter image description here

| improve this answer | |
  • What library did you use for the datepicker? Looks very good. – user4035 Apr 7 '15 at 11:11
  • It's the date range picker from Google Analytics, you can find various implementations with jQuery – Stevy Apr 7 '15 at 11:23
  • I like the data range picker, very nice! Thanks for the answer. – Francesco Apr 15 '15 at 8:50

Use a (ideally scalable) horizontal timeline with draggable start/end days. Differentiate past/current/future periods with colours, and make extra distinction for current period if it has more value than the other ones.

| improve this answer | |
  • @Janik thanks for the hint. Do you think draggable days are easier to pick than a usual datepicker calendar? I like the idea of allowing to show a calendar view for the available dates. Would you have a web link or a mockup to show your approach?Thanks – Francesco Feb 5 '15 at 9:03

There is no reason to display all past seasons. Will be better when the label on the button will contain "save" instead of "ok". Don't forget about feedback for the user.

soccer date table

| improve this answer | |
  • for business requirements all the past and next seasons must be displayed, I also personally do not like it very much. – Francesco Apr 15 '15 at 8:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.