[RESOLVED]datepicker work once in partialview mvc5

Hi,I’m having this annoying problemwith datepicker.
I’m working with MVC5, Bootstrap, jquery 1.10.2 and jquery-ui-1.11.1.
I have 2 datepickers in a partial view that is call it from a bs modal, and when I show the modal a second time, the datepicker stop working, and I’ve tried almost everything, take a look:

**JS Code**

<script type="text/javascript">
(function () {
$("#EDate").datepicker();
$("#RDate").datepicker({ minDate: "-1d" });

$("#divm").on("hidden.bs.modal", function () {
$(".datepicker").datepicker("destroy");
$(".datepicker").removeClass("hasDatepicker").removeAttr('id');
})
})();
</script>

**Razor Code**

@Html.EditorFor(model => model.EntryDateOperation, new { htmlAttributes = new { id = "EDate", @class = "form-control datepicker" } })
@Html.EditorFor(model => model.EntryDateOperation, new { htmlAttributes = new { id = "RDate", @class = "form-control datepicker" } })

**The bootstrap modal**

<div id="divm" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Embarcaciones" aria-hidden="true">
<div class="modal-dialog" style="text-align:right">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div style="text-align:left">
<h4 class="modal-title" id="mTitulo">Nueva Embarcaci&oacute;n</h4>
</div>
</div>
<div id="mEdit" class="modal-body" style="width:100%; text-align:center">
@{Html.RenderPartial("_myclass", Model.Myclass);}
</div>
</div>
</div>
</div>

**and I added z-index on jquery ui css**

.ui-datepicker {
width: 17em;
padding: .2em .2em 0;
display: none;
z-index: 9999999 !important;
}

As you can see I have tried almost everything, but I don’t know what else can I do, Thanks for any kind of help :)

lebarros

$(".datepicker").datepicker("destroy");

I believe this could be the problem. You are removing the date picker with the destroy method

Leave a Reply