2

Pessoal Estou implementado o Datepicker com data e hora (padrão pt-br)

Estou usando o componente que está neste link: http://eonasdan.github.io/bootstrap-datetimepicker/

Lendo o manual usei o Nuget para instalar os componentes

Install-Package Bootstrap.v3.Datetimepicker

Configurei o 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"));

Realizei a seguite implementação na 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>

O componente está funcionando. Porém ele perdeu algumas das formatações do componente.

Já tentei mudar a ordem dos js, incluir os arquivos .less do datepicker no bundle mas não tive sucesso o componente fica com este visual:

Erro de formatação datepicker

Alguém tem alguma ideia o que está errado?

1

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .