I need to design a form for filter a list.

There are around 10 filter columns like time, group, stage, etc.

The problem is the time filter. They have very complex requirements for time filter. Let me to explain the issue.

There are data between year 1995 to 2018... Let takes 1995 to 2025... It is about 30 years. Users should be able to search within this range.

  1. Users should be able to search by date range like 2000 - 2010.
  2. Users should be able to search by month like 2000 - 2010 but only March. That means 2000 March, 2001 March, ......, 2010 March.
  3. Users should be able to search by queries like 2012 February, March, July and 2013 Whole year and 2014 whole year.

I have no idea how can I give a both user friendly and back-end developer friendly UI for this part.


Looks like you need something that allows you to select individual or ranges of values, both for years and months. You can do that with a component that allows clicking on an individual value. For ranges, you can optimize by using a mouse drag gesture.

enter image description here

  • Thanks. Seems like good. Did you use any tool to create this image? – I am the Most Stupid Person Jan 12 '18 at 10:38
  • It is called balsamiq mockups, not free, but you can get a one month trial. – Ovidiu Berdila Jan 12 '18 at 10:46
  • If that works for you, please up vote or accept the answer – Ovidiu Berdila Jan 12 '18 at 10:48
  • Thanks, I upvorted. I will accept your answer if I not recive better answer within 48 hours... I am not saiying that your answer is not good. Just looking is there any better answer... Thanks – I am the Most Stupid Person Jan 12 '18 at 10:50

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.