datepicker loses formatting and mouse icons

2

Personal I'm implementing the Datepicker with date and time (default pt-br)

I'm using the component that is in this link: link

Reading the manual I used Nuget to install the components

Install-Package Bootstrap.v3.Datetimepicker

I configured the bundleConfig:

 bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js"));

    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.validate*"));

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
              "~/Scripts/bootstrap.js",
              "~/Scripts/respond.js",
              "~/Scripts/moment-with-locales.min.js",
              "~/Scripts/bootstrap-datetimepicker.min.js" /// datepicker
              ));

    // Use the development version of Modernizr to develop with and learn from. Then, when you're
    // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
    bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                "~/Scripts/modernizr-*"));

    bundles.Add(new StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/site.css"));

I made the following implementation in the view:

     $('#DataFinal').inputmask("99/99/9999 99:99");
            $('#divDataFinal').datetimepicker(
                {
                    useCurrent: false, //Important! See issue #1075
                    locale: 'pt-br'
                });

            $('#DataInicial').inputmask("99/99/9999 99:99");
            $('#divDataInicial').datetimepicker({
                locale: 'pt-br'
            });

....

<div class="form-group">
            @Html.LabelFor(model => model.DataInicial,"Data inicial", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div class='input-group date' id='divDataInicial'>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                    @Html.EditorFor(model => model.DataInicial, new { htmlAttributes = new { @class = "form-control",@style="max-width:240px"} })
                    @Html.ValidationMessageFor(model => model.DataInicial, "", new { @class = "text-danger" })
                </div>
             </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.DataFinal,"Data final", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div class='input-group date' id='divDataFinal'>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                    @Html.EditorFor(model => model.DataFinal, new { htmlAttributes = new { @class = "form-control", @style = "max-width:240px"} })
                    @Html.ValidationMessageFor(model => model.DataFinal, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>

The component is working. But it lost some of the component formatting.

I have tried to change the order of the js, to include the .pp files in the bundle but I did not succeed the component stays with this visual:

Does anyone have any ideas what's wrong?

    
asked by anonymous 20.01.2017 / 21:30

0 answers