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.

1 Answer 1


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? Jan 12, 2018 at 10:38
  • It is called balsamiq mockups, not free, but you can get a one month trial. Jan 12, 2018 at 10:46
  • If that works for you, please up vote or accept the answer Jan 12, 2018 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 Jan 12, 2018 at 10:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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