Date Picker - UI Element

Date pickers allow users to choose a date or a range of dates from a popup calendar. They are part of our day-to-day lives, whether we are booking our next trip or registering our age on a social media platform.
‍

‍

There are three main types of date pickers.

• Docked Date Picker

These types of date pickers allow users to select specific dates as well as years. The first thing we see when we open a docked date picker is a default date input field. When we tap it, we will see a dropdown calendar with which we can interact. We can choose to navigate these date pickers through our keyboards or cursors.

• Modal Date Picker

There are multiple ways of navigating a modal date picker. Firstly, we have to swipe horizontally if we want to navigate through months. To navigate across years we would have to scroll vertically and to select the year picker we need to tap the year. 

• Modal Date Input

These date pickers allow users to manually enter dates using the numbers on the keyboard. 
‍

‍

Date pickers are used on many websites and apps because we often need to take time into consideration as users. However, the types of date pickers we choose depend on the context we find ourselves in.

• Docked Date Picker. Due to their diversity, docked date pickers are both suitable for dates in the near and distant future.
• Modal Date Picker. These date pickers are not suitable for dates in the distant past or future. They should be applied to cases such as booking a flight or a room at an accommodation.‍
• Modal Date Input. The modal date input can be be the default view for dates that do not need a calendar view.

‍

• Get familiar with date pickers. Before you choose what date pickers to add to your website or app, you should be accustomed to the roles and types that are available.
• Compatibility. When we create a date picker for our page, we have to make sure that it is compatible with as many browsers so that our users can easily access them.
• Error Handling. There are many cases in which preventing errors is extremely useful. For example, in the case of selecting flight dates, the departure date should always come sooner than the return flight. It is important to signal users when they have made a mistake.
• Intuitiveness. It is essential that date pickers help users complete the date as easily as possible. This is why implementing different technologies such as placeholder text that suggests the format they should use is helpful.
• Removing Illogical Dates. There is no reason for users to have the option of selecting 1900 as their birth year. Date pickers should exclude illogical dates.

‍

Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find date pickers and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!

So, get your uinkits package and start designing now!