Jquery datepicker blank popup

Asked

Viewed 256 times

1

My project is in . NET MVC 4 and I’m having trouble calling the datepicker. It is applied but the popup is small above the field and blank. I want to use it in that field:

@Html.TextBoxFor(model => model.DataDesligamento, new { @class = "form-control", @maxlength = 10, onkeydown = "formatar(this,'##/##/####',event)", onblur = "javascript:valida_data(this);" })

In Layout called by View where is the field I want datepicker I make the following calls from Bundles in Head:

@Scripts.Render("~/bundles/ieLt9")   
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/maskedinput")
@Scripts.Render("~/bundles/datepicker")
@Scripts.Render("~/bundles/cpfl")
@RenderSection("scripts", required: false)

I believe that this is not so, because the datepicker is applied and if I open the console I can see that there is data in it, the days, months, years, but are not shown.

In the browser when opening the console, the following scripts are added:

<script src="/Scripts/modernizr-2.8.3.js"></script>
<script src="/Scripts/jquery-3.1.0.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/jquery-ui.min.js"></script>
<script src="/Scripts/jquery.maskedinput.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/bootstrap-datepicker.min.js"></script>
<script src="/Scripts/bootstrap-datetimepicker.js"></script>
<script src="/Scripts/bootstrap-datepicker.pt-BR.min.js"></script>
<script src="/Scripts/locales/bootstrap-datetimepicker.pt-BR.js"></script>
<script src="/Scripts/select.js"></script>
<script src="/Scripts/core.pp.js"></script>
<script src="/Scripts/core.init.pp.js"></script>

In the view, at the end of the file I add datepicker in the field with the line:

aplicarDatePicker('DataDesligamento');

Follow the Javascript function that applies datepicker:

function aplicarDatePicker(campo) {
    $('#' + campo).datepicker({
        format: 'dd/mm/yyyy',
        language: 'pt-BR',
        autoclose: true
    });
}

Am I doing something wrong? Why does datepicker not show content in the popup?

  • 1

    Here { @class = "form-control", @maxlength = 10, onkeydown = "formatar(this,'##/##/####',event)", onblur = "javascript:valida_data(this);" }) did not fail you to include the id? That is to say, { id="DataDesligamento", @class = "form-control", @maxlength = 10, onkeydown = "formatar(this,'##/##/####',event)", onblur = "javascript:valida_data(this);" })

  • Behold here

  • I’ve done this test before @Marconi, the ID is generated with exactly the same name as the field that was used for the Model: "model.Datesligamento". I added his ID as Datesligament2 and called it that way in the function and nothing. I’m checking the link you gave me.

  • @George follows the example and I helped William from another topic (http://answall.com/questions/144056/localizar-jquery-datetimepicker-para-pt-br/144103#144103), and I have several examples if I can and help.

  • @Marconi, the only difference in the link you sent me is the way the datepicker is initiated. In the example it is started by all fields with the datepicker class, I added that function and put the field with class='datepicker', it is started, but with the same error.

  • @Kingrider, my code seems to follow these examples. And as I reported, the datepicker is generated and even the popup appears, but it is small and blank. If I was in the datepicker div in the browser console all the information is there.

  • Guys, I got it. In fact I only changed the version of my jQuery and Bootstrap to the same one I had in another project that already used datepicker and worked. The version I posted was 2.2.3, but I don’t know why it didn’t work with the other.

  • 2

    One recommended to use 1.9.1, and no more new beta version for above 2.x. Expects to exit version 3.x and can use 2.x, the jquery Veloper community said.

Show 3 more comments

1 answer

1


I changed the version of my jQuery and Bootstrap to the same one I had in another project that already used datepicker and worked. The version I posted was 2.2.3.

Note: Note the @Kingrider comment that indicates use of version 1.9.1 since 2.x is still in beta.

Browser other questions tagged

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