Jquery ui 引导日期时间选择器仅限自定义时间选择器

我有一个计时器。 我已经使用引导datetimepicker javascript生成了

在下一张图片中，我展示了结果：

但我需要给时间选择器加上标题

在下一张图片中，我展示了最终结果：

这是我的代码：

-剃刀代码：

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

我尝试使用函数.prepend（）、wrap（）jquery，但在datetimepicker中无法工作

我还证明了以下几点：

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

但它不起作用。

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

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