The Shared UI Library supports styling for the timepicker, but to make it work you will need to include jQuery Timepicker plugin.
++<div class="sui-form-field"> + + <label for="unique-id" id="unique-id--label" class="sui-label">Label</label> + + <div class="sui-time"> + <input + type="text" + value="00:00" + placeholder="Placeholder" + id="unique-id" + class="time sui-form-control" + aria-labelledby="unique-id--label" + aria-describedby="unique-id--message unique-id--error" + /> + <span class="sui-icon-clock" aria-hidden="true"></span> + </div> + + <!-- NOTE: Print error message when error occurs and display message --> + <span id="unique-id--error" class="sui-error-message" style="display: none;"></span> + + <span id="unique-id--message" class="sui-description">Field message goes here.</span> + +</div> ++ +
+$( '#unique-id' ).clockTimePicker({
+ duration: true,
+ precision: 1,
+ vibrate: true,
+ required: true,
+ alwaysSelectHoursFirst: true
+});
+
+
+