MVC4 DateTimePicker 找不到图标时间和图标日历

Question

我正在使用来自from this link 的日期时间选择器从用户那里获取日期和时间。我正在使用引导程序。这是我的代码：

        <div id="startDateTimePicker" class="input-append date">
            Data e Hora Inícial do Gráfico
            <input id="plotStartDate" name="StartDate" data-format="dd/MM/yyyy hh:mm:ss" value="startDateTime" type="text" />
            <span class="add-on">
                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
            </span>
        </div>

        <div id="endDateTimePicker" class="input-append date">
            Data e Hora Final do Gráfico
            <input id="plotEndDate" name="EndDate" data-format="dd/MM/yyyy hh:mm:ss" type="text" />
            <span class="add-on">
                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
            </span>
        </div>

        <script type="text/javascript">
            $(function () {

                $('#startDateTimePicker').datetimepicker({
                    language: 'pt-BR'
                });

                $('#endDateTimePicker').datetimepicker({
                    language: 'pt-BR'
                });

                $("#endDateTimePicker").data('datetimepicker').setLocalDate(now);
                $("#startDateTimePicker").data('datetimepicker').setLocalDate(oneHourAgo);
            });
        </script>

系统运行时不显示icon-date和icon-time。我不知道在哪里可以找到那些。

有人可以帮我在屏幕上显示这些图标吗？

这个插件有更好的选择日期和时间吗？我发现了几个仅适用于日期或时间的实现，但不能同时适用于两者。

谢谢。

Answer 1

您似乎正在使用Bootstrap 2.3.2 icons。按照以下步骤在您的项目中设置 Bootstrap 2.3.2：http://getbootstrap.com/2.3.2/getting-started.html

我想向你推荐 3.0 版本的 Bootstrap。在 3.0 中，图标的使用有所改变：http://getbootstrap.com/components/#glyphicons

2.3.2 版：

<i class="icon-date"></i>

3.0 版：

<span class="glyphicon glyphicon-date"></span>

Answer 2

查看此示例以解决您的问题。

1. 打开BundleConfig.cs，修改样式包“~/Content/themes/base/css”如下：

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include( "~/Content/themes/base/jquery-ui.css", "~/Content/themes/base/jquery-ui.all.css"));

1. 打开您的 _layout.cs 并在
的结束标记之前添加以下内容

@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryui") @Styles.Render("~/Content/themes/base/css") @RenderSection("脚本", 必需：false)

1. 最后为了测试你的视图，打开你的 index.cshtml 并在最后添加这个

日期：

@section Scripts{
    @*@Scripts.Render("~/bundles/jqueryval")*@
    <script type="text/javascript">
        $(document).ready(function () {
            $(".datefield").datepicker();
        });
    </script>
}

如果有任何疑问，请告诉我。

干杯