UI Elements

UI Elements

Controls for the user to pick a time, date, time slot or color as ready- to-use dialogs.

4.8.1 Types

There are mainly three types of it.

  • Color Picker

To choose the color.

  • Date Picker:

To choose the date.

  • Time & Time Slot Picker

To choose the time.

Types of Pickers
Fig 4.8.1 Different types of pickers

4.8.2 Guideline

Guidelines are listed as below.

  • Date Picker consists of 2 major sections, navigation and dates with weekdays section.
  • Date picker can have elements like icon based button, select dropdown menu of which design specifications and behaviour will remain same as described in the respective sections.
  • In Date Picker current date always displayed with White(#ffffff)  background color and 1p x border with color NavyBlue(#120e5b)  .
  • In Date picker User can select the date range as well. Font size for the weekdays will be 10PX and color will be SkyBlue(#2991d6)  .
  • Time picker will have icon based buttons to navigate of which design specifications and behaviour will remain same as described in the button section.
  • In time picker,the font size for the parent panel where user can navigate through hour/min/sec will be 24PX & color will be NavyBlue(#120e5b)  .
  • Font size for the dates, times in the hour/min/sec child panel will be 12PX and color will be DarkGray(#5c5c5c)  .
  • The default date format will be DD/MM/YYYY. For time will be HR:MIN:SEC & for color will be rgb but If it can also be changed by changing the user preferences settings as described in the implementation.
  • User can also direct input the date, time & color details by typing in the textfield. Each picker will have respective icon box on the right side of the main textfield by clicking on it respective picker will open.
  • In the mobile device, date and time picker will take device default control where we may loose the option for range selection depending on the devi ce.
  • In the mobile color picker field will collapse to small color box.

4.8.3 Behaviour

Behaviour for the different types of pickers are listed as below.

Date Picker

Once after the user clicks on the calendar icon, the date picker appears.

  • Shows the current date as a default when opens.
  • In navigation section, month and year dropd own where user can click on the dropdown and select the required month and years. There is a forward (<) and backward (>) arrow which allows user to navigate through the months – Once the 12 months count is done the year changes.
  • In the date section placeholder user can select the date by double clicking on it. User can also select the rang by simply first click on start date and second click on last date. In range first & last date will background SkyBlue(#2991d6)   with font color White(#ffffff)  while in between selected dates will have background LightSkyBlue(#e0f3ff)  with font color DarkGray(#5c5c5c)  . Dates outsie selected month will be in LightGray (#e6e6e6)   color.
  • On hover the box around date will have 1px border of color SkyBlue(#2991d6)   and background color White(#ffffff)  . Selected date will have border and background color SkyBlue(#2991d6)  .
  • User can select date by direct input and can select before/after date by simply adding numeric + or - after date. I.e. If today's date 14/10/2015 user can type 14/10/2015 +2 to select the date 16/10/2015. In such case after typing date with numeric, it will reflect the correct date.
Date Picker
Fig 4.8.3a Different states of Date Picker

Time Picker

There will be upward and downward arrow which will help the user to increase and decrease the timeline. An icon based buttons behaviour on hover/touch will remain same as described in button sections.

  • When clicked on the numbers respective section will open: On hour – There will be 00 – 23 numbers which indicates 24 hours and user can click on the desired hours.
  • On minutes and seconds – there will be 00-59 numbers which indicated 60 minutes (or) seconds and user can click on the desired minutes (or) seconds.
  • User can select time slot by direct input or can select by clicking the time slot icon, it will open a popup with list of available time slot.
Time Picker
Fig 4.8.3b Different state of Time & Time Slot Picker

Append/Truncate Value from Date & Time Picker

  • User can append value like +1D,+2M,+3Y..etc or truncate value like -1D,-2M,-3Y..etc to select a date which is next or previous to current date by typing the values in select field after the current date.
  • In the same way, user can append value like +1H,+2M,+3S..etc or truncate value like -1H,-2M,-3S..etc to select a time which is next or previous to current time by typing the values in select field after the current time. I.e. If current time is 11:35:05 user can type 11:35:05 +1H to select the time 12:35:05. In such case after typing time with numeric, it will reflect the correct time.
Append/Truncate Value from Date & Time Picker
Fig 4.8.3c Behaviour of Time & Date picker while appending/truncating values.

Color Picker

Once the user click on the icon on the right corner, the color picker will be opened

  • Color pool will have a default color section on the left which has 16 (12 standard colors + 4 black and white ) default shades.
  • User can click on any default color so that middle section will filled with entire shades of that clicked color where user can click and select the desired color. User can explore it by dragging the mouse over the middle section.
  • The bottom box will act as a color maximizer which will show the filled box with the selected color to give a enlarged look to user.
  • On the right side there is another color selection bar is there where user can select any custom shade.
  • Once the user click's on the desired color – the color picker disappears with recording of the RGB of the color noted in the text box with color picker icon.
  • If user's are know the RBG code – they can directly type of the text box and the color code will be picked automatically.
Sections and behaviour of color picker
Fig 4.8.3c Different sections and behaviour of color picker

4.8.4 Usage

  • Each picker can be used in form control or anywhere its required to pick validated date, date-range, time, time-range or color.