MVC4 DateTimePicker cannot find icon-time and icon

问题:

I´m using DateTime picker from from this link to get date AND time from user. I´m using bootstrap. Here is my code:

        <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>

When running the system does not show the icon-date and icon-time. I don´t know where to find those.

Can someone please help me to show these icons on screen ?

Is there better option that this plugin to pick Date AND time ? I´ve found several implementations for date or time only, but not for both.

Thanks.

回答1:

It looks like you are using Bootstrap 2.3.2 icons. Follow these steps to setup Bootstrap 2.3.2 on your project: http://getbootstrap.com/2.3.2/getting-started.html

I would like to recommend to you the 3.0 version of Bootstrap. In the 3.0 the icons usage has changed a little bit: http://getbootstrap.com/components/#glyphicons

Version 2.3.2:

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

Version 3.0:

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

回答2:

Checkout this example to resolve your issue.

1. Open BundleConfig.cs and modify the style bundle "~/Content/themes/base/css" as follows:

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

1. Open your _layout.cs and add the following just before the closing tag of the

@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryui") @Styles.Render("~/Content/themes/base/css") @RenderSection("scripts", required: false)

1. Finally to test your view, open your index.cshtml and add this at the end

Date:

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

Let me know if any query remains.

Cheers