Example 1: Single Time Picker with custom black theme, using 12 hour format and dropdown state being open by default.

<wy-time-picker
    data-dropdown-toggle-state="settings.third.dropdownToggleState"
    data-time-settings="settings.third.time"
    data-theme="settings.third.theme"
    data-no-range="settings.third.noRange"
    data-format="settings.third.format"
    data-apply-callback="onApplyTimePicker()"
    data-clear-callback="onClearTimePicker()">
</wy-time-picker>

Example 2: Time Range Picker with default settings and custom initial time settings. By default, time validation will work.

<wy-time-picker
    data-dropdown-toggle-state="settings.first.dropdownToggleState"
    data-time-settings="settings.first.time"
    data-apply-callback="onApplyTimePicker()"
    data-clear-callback="onClearTimePicker()">
</wy-time-picker>

Example 3: Time Range Picker with default settings and custom initial time settings.Time validation is purposely turned off.

<wy-time-picker
    data-dropdown-toggle-state="settings.second.dropdownToggleState"
    data-time-settings="settings.second.time"
    data-apply-callback="onApplyTimePicker()"
    data-clear-callback="onClearTimePicker()"
    data-no-validation="settings.second.noValidation">
</wy-time-picker>

Note: One can easily change the styling of the template inside the angular-time-picker.js.