We use as a base JQuery UI changing its style with the characteristics of our design system. 
<div class="pforms"
    <div class="title">
        <h1>Title</h1>
    </div>
    <div class="form-field vertical">
        Select or Inputs code here
    </div>
    <div class="form-field vertical double">
        Double select code here
    </div>
    <div class="form-field">
    Checkbox or Radio code here
    </div>
    <div class="form-field horizontal">
        Buttons code here
    </div>
</div>
General guidelines
  • Ensure that locale is appropriately set so that users see dates and times in a familiar format.

  • If helper text is necessary, place helper text above the input (below the area label).

  • Use a concise label to indicate what the date and time selections refer to.
1
Month and Year: Indicates the menu where a date may be selected.
2
Controls: Allows the user to navigate through past and future time frames.
3
Days: Shows the available days to select.
4
Selected Option: Indicates the user the option selected.
DO
  • Use date and time pickers when you are asking the user for a time or date, or for scheduling tasks.
  • Use hover states to preview a user’s selection.
DON'T
  • Do not use a complex date picker every time you ask for any date.
  • Don't use a calendar picker to prompt for dates in the distant past or future, such as a date of birth.
  • Don't use the same style for hover and selected states.