Question

我遇到的问题是，当我在本地计算机上运行和网页发布时，我的kendo datetimerpicker呈现出不同的呈现方式

脚本：

<script>
    $(document).ready(function () {
        $("#datetimepicker").kendoDateTimePicker({
            animation: {
                close: {
                    effects: "faceOut zoom:out",
                    duration: 300
                },
                open: {
                    effects: "faceIn zoom:in",
                    duration: 300
                }
            }
        });
    });

HTML：

<div class="form-group">
        @Html.LabelFor(model => model.Highwatermark, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Highwatermark, new { htmlAttributes = new { @class = "form-control", @id = "datetimepicker" } })
            @Html.ValidationMessageFor(model => model.Highwatermark, "", new { @class = "text-danger" })
        </div>
    </div>

在本地计算机上运行：

发布时间：

如果我点击日历和时钟的位置，它仍然有用，但我不确定为什么图像没有出现。

我也不确定为什么datetimepicker在这两种情况下都在延伸。

Answer 1

form-control CSS类与扩展相关：

http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap#use-form-control-bootstrap-css-class

您可以使用自定义CSS规则恢复15em的标准DateTimePicker宽度：

.k-datetimepicker.form-control {
    width: 15em;
}

如果您只需要一些DateTimePickers来维护其默认宽度，请在htmlAttributes中除form-control之外应用另一个自定义CSS类，并在CSS选择器中使用它：

.k-datetimepicker.form-control.my-no-expand {
    width: 15em;
}

假设生产服务器上确实存在主题图像（ sprite.png 和 sprite_2x.png ），那么丢失图标的问题可能是由CSS捆绑配置：

http://docs.telerik.com/kendo-ui/aspnet-mvc/fundamentals#css-bundling

Answer 2

检查您的kendo CSS文件。有时相对地址需要修改才能正确应用。这是常见问题。例如，在css文件中，您有类似的内容：

background-image:url('Bootstrap/sprite.png')

应改为

background-image:url('2015.3.930/Bootstrap/sprite.png')

Kendo Datetimepicker呈现不同的一次发布

2 个答案: