datepicker loses formatting and mouse icons

Asked

Viewed 105 times

2

Personal I am implemented the Datepicker with date and time (standard en)

I’m using the component that’s on this link: http://eonasdan.github.io/bootstrap-datetimepicker/

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 realized 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. However it has lost some of the component formatting.

I tried to change the order of js, include the files . datepicker Less in Bundle but I did not succeed the component gets this look:

Erro de formatação datepicker

Does anyone have any idea what’s wrong?

  • I had exactly the same problem with bootstrap 3. Staff helped me here: http://answall.com/questions/145518/jquery-datepicker-popup-em-branco. In short, I had to go back to my bootstrap pro 2.2.3.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.