ASP MVC 4: Metro css 2 bootstrap's datepicker do not behave as expected

Question

I have ASP Net MVC 4 app, i have installed Metro css 2 bootstrap version 2.0.31.

I'm presenting problems when using DatePicker component, every time i hit the button (.btn-date) to open the calendar the form is submited to the server. In the other hand if i click the input textbox itself then the calendar opens but the textbox is not updated when i select a day.

If i place that same html outside the form then it behave as expected: the calendar is displayed and i can select a day from it and the selection is written to the textbox.

In short, this do not work:

<form>
 <div class="input-control text" data-role="input-control">        
    @Html.EditorFor(model => model.Date)
    <button class="btn-date"></button>
    @Html.ValidationMessageFor(model => model.Fecha)
</div>
</form>

Outside forms works but is usesless:

<div class="input-control text">
    <input type="text">
    <button class="btn-date"></button>
</div>

Any thought?

Answer 1

An unspecified button type, within a form, defaults to submit. Just change your button to:

<button class="btn-date" type="button"></button>

And you're good to go.