I'm working on an application that allows you to filter your files by month and year. This is what I have so far.
As you can see, the "Apply" button is disabled if fields are empty:
But once the user fills them out, the "Apply" button gets enabled, and a "Clear" button appears so they can clear the form:
year text field clear or do I need to label it yyyy?Month were a label outside the dropdown, what would be its default? "Select month"?The biggest thing is that "Clear" shouldn't appear out of nowhere and stretch the other elements. At first, I'll wonder whether I can easily clear these fields or not. And once I enter some data, in the best case, I'll be disoriented as my targets shift. In the worst case, I'll misclick "Apply" when I meant to click "Year". Instead, it should always be present, but disabled when not available.
The word "Year" is clear without it needing to be "yyyy". But if you're concerned about people entering well-formed years, I personally prefer a number field, i.e. a spinner with arrows in usual browser implementations. Some people prefer a dropdown, but that's only practical if you have a few finite years (although plenty of websites ignore this fact and make you scroll through 100 years to choose your birthday...). Another advantage is that you can populate them by analyzing the data; in the case of a dropdown, that also serves as a visual cue to the person of that analysis and what's available.
If you want labels outside the fields, just "Month" and "Year" are fine. Also, if you do so, you could begin the fields on (current month) (current year), or "Any", or a specific value logical for your data.
Here is a pen you could fiddle with that has these ideas.
I know that I may sound dumb for saying this, and I know that you didn't exactly ask, but another part of date filters that always bothers me is when the month index is omitted from the input.
Everytime I fill out a credit card form that just lists the name of the month I have map the month number on my card to the month name. It's a minor inconvenience, and saves only seconds, but when a form input has something like "07 July", I breathe a small sigh of relief because I know I don't have to look like an idiot while counting months on my fingers.
I suppose this mainly applies to month select inputs as you have in your question. If these were text inputs, we would probably have to just type the 2 digit month index. However, with that, I'd probably double check myself anyway and do the inverse of the mapping I said above.
