bootstrap datetimepicker custom timepicker only - jquery-ui

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;
}