bootstrap datetimepicker自定义timepicker only

时间:2015-09-08 11:57:55

标签: jquery-ui twitter-bootstrap-3 datetimepicker timepicker bootstrap-datetimepicker

我有时间戳。 我使用bootstrap-datetimepicker javascript生成。

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

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

但我需要把标题放到时间戳。

在下一张图片中,我展示了最终结果:

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

这是我的代码:

-Razor代码:

<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',
        });            
    });

我尝试使用函数.prepend(),wrap()jquery,但是在datetimepicker中没有工作。

我也证明了以下几点:

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

但它不起作用。

1 个答案:

答案 0 :(得分:0)

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