0

我刚刚将我的项目从 TB2 更新到 TB3,我正在使用这个bootstrap-datetimepicker来选择日期/时间。

正如您在该站点上看到的那样,如果您单击日历的输入字段,则会弹出日历。在升级之前,这就是它曾经为我工作的方式。现在看起来像这样:

在此处输入图像描述

默认情况下会弹出日历,并且日期仍然可以单击,但是当您完成单击日期和时间时,输入字段不会被填充。甚至ValidationMessageError默认情况下也是可见的(但现在,忘记这一点)。

这是我使用的标记:

<div class="input-group date" id="datetimepicker1" data-date-format="yyyy-mm-dd hh:ii">
    <input class="form-control" size="16" type="text" id="StartDate" name="StartDate" /> 
    <span class="input-group-addon"><i class="glyphicon glyphicon-remove"></i></span>
    <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

<br />

<div class="input-group date" id="datetimepicker2" data-date-format="yyyy-mm-dd hh:ii">
    <input class="form-control" size="16" type="text" id="EndDate" name="EndDate" /> 
    <span class="input-group-addon"><i class="glyphicon glyphicon-remove"></i></span>
    <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

此标记不同于bootstrap-datetimepicker上的标记。我已经用 TB3 中的新课程替换了这些课程。我还更新了可以在这里看到的 bootstrap-datetimepicker.js 文件。

这是我的标题标记:

<head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <meta name="viewport" content="width=device-width" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery")

        <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
        <link href="@Url.Content("~/Content/site.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/chosen.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/datetimepicker.css")" rel="stylesheet" type="text/css" />

        <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
        <script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/chosen.jquery.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/bootstrap-datetimepicker.js")" type="text/javascript"></script>

        <script type="text/javascript" lang="javascript">
            $(document).ready(function () {
                $(".chzn-select").chosen();
            });
        </script>
    </head>

其中一篇 stackoverflow 帖子将我引导至站点,通过在标题中添加这些链接来包含所有引导文件(css/js/ghypicons)。如您所见,它在链接上方显示“完成”。我看不到具体包括什么。这个bootstrap-datetimepicker需要dropdowns.lessandsprites.less才能工作。

如果有人可以帮助我解决我混乱的布局,我将非常感激!

4

1 回答 1

0

我读到实际上 bootstrap-datetimepicker 与 boostrap3 不兼容。

请参阅:https : //github.com/smalot/bootstrap-datetimepicker/issues/114、https: //github.com/smalot/bootstrap-datetimepicker/pull/129https://github.com/smalot/bootstrap-日期时间选择器/问题/144

您可以使用固定分叉(非官方)或尝试其他日期时间选择器,例如:http ://tarruda.github.io/bootstrap-datetimepicker/

于 2013-10-12T11:15:15.890 回答