bootstrap datetimepicker 仅限自定义时间选择器

Question

我有一个时间选择器。 我生成了 bootstrap-datetimepicker javascript .

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

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

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

下图我展示了最终结果：

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

这是我的代码：

-剃须刀代码：

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

-脚本：

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

我尝试使用函数 .prepend () , wrap () jquery 但在 datetimepicker 中不起作用。

我还证明可以做到以下几点：

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

但它不起作用。

Answer 1

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