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?