Some of PatternFly’s stakeholders need a date picker to fulfill the use case of selecting a single date. Since bootstrap does not have it’s own date picker, the eternicode version created by Andrew Rowls was identified to be brought into PatternFly.
The component is feature rich, with a lot of options and capabilities. From a design perspective, the usability test was used to narrow down which features should be recommended as default by PatternFly, specifically testing: auto close, the “Today” button, text input, and the icon.
Our main goal was focused on what the default behavior should be for selected a single date
Should the auto close feature be used?
Should the Today shortcut be displayed
Our design team had reservations about the default icon being used, so we asked the user to select which they would like from a set of 4 icons
Our design team noticed that the input validation when using text input was not thorough, and wanted to perform some text input tests as well.
Autoclose should be used as a default setting
8 people preferred the use of autoclose
1 person did not know if they preferred auto close or not
Change the icon to Font Awesome’s fa-calendar
Default use of “Today” button was inconclusive
When a Today button was not present, users were asked to navigate to a future date, and then go back to today’s date
7 people rated the ease of use as a 4.43 of 5.0
When asked if they would like a feature to make the task simpler, 6 of 7 said it was simple enough
When the Today button was present, 7 of 9 said that they wanted a today button/liked the functionality
Default use of text input is discouraged
Input validation is inconsistent
Participants were annoyed that incorrect input defaulted to today’s date
There were additional issues with text input, noted in the full usability report
Based on this testing, only 3 participants said they would use text input. Specific responses are below:
If picking dates far in the future
If picking multiple dates (note that PatternFly is not recommending this pattern to pick a range)
As a programmer she does not like using a mouse
A trello card has been added to track creation of this new Date Picker design pattern. We will discuss the results with some designers and developers and come up with final decisions on whether default behavior will include the “Today” button and text input.
Let us know what you think about our recommendations for default behavior based on our usability results by commenting below!