UI - half days

I am stuck on a UI decision and wonder if I could get some feedback.

Original solution was to select a date range with the option to toggle the start and end dates to half days. Which I solved with a simple full and half filled circle icon.

Now there is a new selection type of single day, with the option of full day or time range. For this I am going with a familiar checkbox, which means I will abandon the half day toggle icons used for range selections.

I have mocked up four versions, along with a poll to see what feels or reads best.

Thank you

  • version 1
  • version 2
  • version 3
  • version 4

0 voters

I had to read the explanation multiple times because none of the provided options made it instantly clear what I was choosing.
So my vote is "none of the above"

I'm with Wim here
for me the option Single with option all day or 1/2day and the two dates in a list would make more sense
btw. for me the original version shows half and empty, not half and full :frowning:
2 cents from Holger

thanks for the replies... I have defiantly been struggling and open to suggestions. The single is in units of hours and the range is in units of 1/2 days.

I thought it was just me. I didn't understand the options either, but I figured perhaps that was just a sign that I was falling behind the times...

Hi Rivet
like other posters I am struggling with the use case. Could you describe it in words like:

1 full day from (calendar)
1 half day from predefined day (choice: am and pm half days)


Hi Torsten, the user needs to pick their holidays as a range and the smallest unit for a holiday is half day. So I am trying to figure out the UI for that. I have been looking for examples but can't find anything out there. Not sure best approach.

here is a draft of the bigger picture.

Thanks for providing more info. Initially I really didn’t understand the purpose.

This is my favorite kind of puzzle as I am starting to specialize in ux ui and i am usually like a dog with a bone However i can’t indulge atm so here’s my first ideas

Make the selector the calendar view one, 1 click makes a / appears, a second click Gives a \ and a third click resets the cycle.
Superpose 3 text boxes. Number and slashes. Make it a button.

Conditional format the number to be coloured according to your chart.

If one wants to select a range at once, put a 2 buttons (start; end) which once pressed immediately after a date button has been released will set the range delimiters.

It is easy to setup but if you prefer to sub it, we’ll be happy to help just pm me.


Hi Cecile,

Thanks for the reply and suggestion. I can see the initial request was a bit of a mess. I am going to chalk a small portion of that, up to three late nights working to get my boys out of the Philippines (all good).

Best I step back for a few days and approach with fresh eyes and connect with you then.

Thanks again.


somewhat happy about the answers here - I did also not manage it to get it clear into my mind (-: