bootstrap datetimepicker custom timepicker only

Question

I have a timepicker. I've generated with the bootstrap-datetimepicker javascript .

In the next picture I show the result:

https://www.dropbox.com/s/iknp2vzty3bykon/time1.jpg?dl=0

but I need to put title to timepicker.

In the next picture I show the final result:

https://www.dropbox.com/s/q0evaqwxmxm3eif/time2.jpg?dl=0

This is my code:

-Razor code:

<div class="input-group input-append date" id="timepicker1">
         @Html.TextBoxFor(model => model.time, new { @class = "form-control datetimepicker" })
    <span id="icon" class="input-group-addon add-on">
        <span class="icon-time"></span>
    </span>
</div>

-Script:

$(function () {
        $('.datetimepicker').datetimepicker({                
            format: 'HH:mm',
        });            
    });

I tried using the function .prepend () , wrap () jquery but within the datetimepicker not working.

I've also proven to do the following :

$(function () {
        $('.datetimepicker').datetimepicker({
            format: 'HH:mm',
            timeText: 'Time',
            hourText: 'Hour',
        });
    });

but it does not work.

Answer 1

code css:

.bootstrap-datetimepicker-widget table td a[data-action="incrementHours"]:before {
            content: 'Hora'; 
        }

.bootstrap-datetimepicker-widget table td a[data-action="incrementMinutes"]:before { 
            content: 'Minuts'; 
        }

.bootstrap-datetimepicker-widget table td a[data-action="incrementHours"]:before,
.bootstrap-datetimepicker-widget table td a[data-action="incrementMinutes"]:before { 
            display: block;
            text-align: center;
            text-transform: uppercase;
            color: #6a696f;
            font-weight: bold;
            font-size: 15px;
            font-family: 'Segoe UI';
            padding-bottom: 10px;
        }

.timepicker-picker:before { 
            content: 'Hora'; 
            font-family: 'Segoe UI';
            text-transform: uppercase;
            color: #FFFFFF;
            background-color: #44bdc5;
            text-align: center;
            display: block;
            padding: 8px 0px;
            font-weight: bold;
            font-size: 15px;
        }   

.bootstrap-datetimepicker-widget .list-unstyled{
    margin-top: 0;
    margin-bottom: 0;
}