Time Picker

Experimental Available since 1.1.0 Last updated 1.3.0

Timepicker is a component composed of an input-group, a popover and the time component to create a time selection interaction.


Basic Time Picker

A basic example of a time picker.


<div class="fd-time-picker">
    <div class="fd-popover fd-popover--no-arrow">
        <div class="fd-popover__control">
            <div class="fd-input-group fd-input-group--after">
                <input type="time" class="fd-input " id="" placeholder="hh:mm am/pm">
                <span class="fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button ">
                                  <button class=" fd-button--light sap-icon--history fd-popover__control" aria-controls="rthHR811" aria-expanded="false" aria-haspopup="true"></button>

                      </span>
            </div>
        </div>

        <div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="true" id="rthHR811">

            <div class="fd-time">

                <div class="fd-time__item">
                    <div class="fd-time__control">

                        <button class=" fd-button--standard fd-button--light sap-icon--navigation-up-arrow" aria-label="Increase hours" aria-controls="BW7dC141"></button>
                    </div>
                    <div class="fd-time__input">
                        <input class="fd-form__control" type="text" placeholder="hh" value="" id="BW7dC141" aria-label="Hours">
                    </div>
                    <div class="fd-time__control">

                        <button class=" fd-button--standard fd-button--light fd-button--compact sap-icon--navigation-down-arrow" aria-label="Decrease hours" aria-controls="BW7dC141"></button>
                    </div>
                </div>

                <div class="fd-time__item">
                    <div class="fd-time__control">

                        <button class=" fd-button--standard fd-button--light fd-button--compact sap-icon--navigation-up-arrow" aria-label="Increase minutes" aria-controls="VyQHq609"></button>
                    </div>
                    <div class="fd-time__input">
                        <input class="fd-form__control" type="text" placeholder="mm" value="" id="VyQHq609" aria-label="Minutes">
                    </div>
                    <div class="fd-time__control">

                        <button class=" fd-button--standard fd-button--light fd-button--compact sap-icon--navigation-down-arrow" aria-label="Decrease minutes" aria-controls="VyQHq609"></button>
                    </div>
                </div>

                <div class="fd-time__item">
                    <div class="fd-time__control">

                        <button class=" fd-button--standard fd-button--light fd-button--compact sap-icon--navigation-up-arrow" aria-label="Increase seconds" aria-controls="Tbwlb978"></button>
                    </div>
                    <div class="fd-time__input">
                        <input class="fd-form__control" type="text" placeholder="ss" value="" id="Tbwlb978" aria-label="Seconds">
                    </div>
                    <div class="fd-time__control">

                        <button class=" fd-button--standard fd-button--light fd-button--compact sap-icon--navigation-down-arrow" aria-label="Decrease seconds" aria-controls="Tbwlb978"></button>
                    </div>
                </div>

                <div class="fd-time__item">
                    <div class="fd-time__control">

                        <button class=" fd-button--standard fd-button--light fd-button--compact sap-icon--navigation-up-arrow" aria-label="Increase period" aria-controls="UxXMT681"></button>
                    </div>
                    <div class="fd-time__input">
                        <input class="fd-form__control" type="text" placeholder="am" value="" id="UxXMT681" aria-label="Period">
                    </div>
                    <div class="fd-time__control">

                        <button class=" fd-button--standard fd-button--light fd-button--compact sap-icon--navigation-down-arrow" aria-label="Decrease period" aria-controls="UxXMT681"></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<br>

<div class="fd-time-picker">
    <div class="fd-popover fd-popover--no-arrow">
        <div class="fd-popover__control">
            <div class="fd-input-group fd-input-group--after fd-input-group--compact">
                <input type="time" class="fd-input  fd-input--compact" id="" placeholder="hh:mm am/pm">
                <span class="fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button ">
                                  <button class=" fd-button--light fd-button--compact sap-icon--history fd-popover__control" aria-controls="bJuyJ846" aria-expanded="false" aria-haspopup="true"></button>
                      </span>
            </div>
        </div>
        <div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="true" id="bJuyJ846">
            <div class="fd-time">
                <div class="fd-time__item">
                    <div class="fd-time__control">
                        <button class=" fd-button--standard fd-button--light fd-button--compact sap-icon--navigation-up-arrow" aria-label="Increase hours" aria-controls="BW7dC141"></button>
                    </div>
                    <div class="fd-time__input">
                        <input class="fd-form__control" type="text" placeholder="hh" value="" id="BW7dC141" aria-label="Hours">
                    </div>
                    <div class="fd-time__control">
                        <button class=" fd-button--standard fd-button--light fd-button--compact sap-icon--navigation-down-arrow" aria-label="Decrease hours" aria-controls="BW7dC141"></button>
                    </div>
                </div>
                <div class="fd-time__item">
                    <div class="fd-time__control">
                        <button class=" fd-button--standard fd-button--light fd-button--compact sap-icon--navigation-up-arrow" aria-label="Increase minutes" aria-controls="VyQHq609"></button>
                    </div>
                    <div class="fd-time__input">
                        <input class="fd-form__control" type="text" placeholder="mm" value="" id="VyQHq609" aria-label="Minutes">
                    </div>
                    <div class="fd-time__control">
                        <button class=" fd-button--standard fd-button--light fd-button--compact sap-icon--navigation-down-arrow" aria-label="Decrease minutes" aria-controls="VyQHq609"></button>
                    </div>
                </div>

                <div class="fd-time__item">
                    <div class="fd-time__control">
                        <button class=" fd-button--standard fd-button--light fd-button--compact sap-icon--navigation-up-arrow" aria-label="Increase seconds" aria-controls="Tbwlb978"></button>
                    </div>
                    <div class="fd-time__input">
                        <input class="fd-form__control" type="text" placeholder="ss" value="" id="Tbwlb978" aria-label="Seconds">
                    </div>
                    <div class="fd-time__control">
                        <button class=" fd-button--standard fd-button--light fd-button--compact sap-icon--navigation-down-arrow" aria-label="Decrease seconds" aria-controls="Tbwlb978"></button>
                    </div>
                </div>
                <div class="fd-time__item">
                    <div class="fd-time__control">
                        <button class=" fd-button--standard fd-button--light fd-button--compact sap-icon--navigation-up-arrow" aria-label="Increase period" aria-controls="UxXMT681"></button>
                    </div>
                    <div class="fd-time__input">
                        <input class="fd-form__control" type="text" placeholder="am" value="" id="UxXMT681" aria-label="Period">
                    </div>
                    <div class="fd-time__control">
                        <button class=" fd-button--standard fd-button--light fd-button--compact sap-icon--navigation-down-arrow" aria-label="Decrease period" aria-controls="UxXMT681"></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>