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

Posted 2023-05-09

【中文标题】MVC4 DateTimePicker 找不到图标时间和图标日历

【英文标题】：MVC4 DateTimePicker cannot find icon-time and icon-calendar

【发布时间】：2014-01-05 17:13:35

【问题描述】：

我正在使用来自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。我不知道在哪里可以找到那些。

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

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

谢谢。

【问题讨论】：

我添加了“~/Content/bootstrap.css”，它成功了！

【参考方案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>

【讨论】：

我正在使用引导程序 3。我已经尝试过 glyphicons，但只显示了一个空方块......我在我的应用程序中使用 glyphicons 没有任何问题。所以看到我的插件使用的是旧的 Bootstrap 版本......

【参考方案2】：

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

打开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"));

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

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

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

日期：

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

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

干杯

【讨论】：

不是日期选择器，而是日期和时间选择器。 JQueryUI Datepicker 不能解决我的问题。