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:
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.
– George Wurthmann