bootstrap datepicker im popover löschen andere eingaben wenn event show gefeuert

Question

ich habe ein formular im popover window, in dieser form habe ich mit datepicker bootstrap eingegeben. Ich fülle alle Eingaben vor der Eingabe mit Datumsauswahl, aber wenn ich Datumsauswahl öffne, werden alle Eingaben gelöscht. Kann jemand helfen?

$('.datepicker').datepicker({ 
 
     format: 'dd.mm.yyyy', 
 
     language: 'ru', 
 
     autoclose: true 
 
    });

<div class="modal fade" id="taskform" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
\t <div class="modal-dialog" role="document"> 
 
\t \t <div class="modal-content"> 
 
\t \t \t <div class="modal-header"> 
 
\t \t \t \t <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
\t \t \t \t <h4 class="modal-title" id="myModalLabel">Создать задачу</h4> 
 
\t \t \t </div> 
 
\t \t \t @using (Html.BeginForm(Model.ActionName, Model.ControllerName, FormMethod.Post, new { id = "task_form" })) 
 
\t \t \t { 
 
\t \t \t \t <div class="modal-body"> 
 
\t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t @Html.HiddenFor(m => m.CampaignId) 
 
\t \t \t \t \t \t @Html.HiddenFor(m => m.AuthorId) 
 

 
\t \t \t \t \t \t @Html.LabelFor(x => x.Title) 
 
\t \t \t \t \t \t @Html.TextBoxFor(x => x.Title, new { @class = "form-control form-input" }) 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t <br /> 
 
\t \t \t \t \t \t @Html.LabelFor(x => x.Description) 
 
\t \t \t \t \t \t @Html.TextAreaFor(x => x.Description, new { @class = "ckeditor form-control form-input", rows = "3" }) 
 
\t \t \t \t \t \t <br /> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t @Html.LabelFor(x => x.DeadLine) 
 
\t \t \t \t \t \t @Html.TextBoxFor(x => x.DeadLine, new { @class = "form-control form-input datepicker", placeholder = "Дедлайн" }) 
 
\t \t \t \t \t \t <br /> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="modal-footer" style="text-align: left;"> 
 
\t \t \t \t \t <button type="button" id="task-submit" class="btn btn-primary" style="float: right;">Создать</button> 
 
\t \t \t \t \t @Html.DropDownListFor(m => m.Performers, Model.AllPerformers.Select(item => new SelectListItem() 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t Text = item.FullName, 
 
\t \t \t \t \t \t Value = Convert.ToString(item.Id) 
 
\t \t \t \t \t }), new { @class = "form-control select2 ", style = "", multiple = "multiple", placeholder = "Добавьте исполнителей" }) 
 
\t \t \t \t </div> 
 
\t \t \t } 
 
\t \t </div> 
 
\t </div> 
 
</div>

Answer 1

Falls jemand braucht es noch:

Verwenden gezeigt und versteckte Ereignisse statt Show und zu verstecken ist nicht immer möglich. Eine bessere Abhilfe ist das Ereignis Namespace zu überprüfen:

modal.on('show.bs.modal', function(e) { 
    if (e.namespace === 'bs.modal') { 
     // 
    } 
}); 

von https://github.com/uxsolutions/bootstrap-datepicker/issues/978

Answer 2

ich Ihr Problem versucht zu replizieren, aber meine Form werden nicht die anderen Eingänge, wenn die Datepicker geklickt wird.

Ausblick:

<button type="button" class="btn btn-primary" id="btnAdd" data-target="#modalTaskForm" aria-label="Left Align"> 
    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Task 
</button> 
<!-- Add Modal --> 
<div id="modalTaskForm" class="modal fade" role="dialog"> 
    <div class="modal-dialog modal-sm"> 
    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Task Form</h4> 
     </div> 
     <div class="modal-body"> 
     @using (Html.BeginForm("PopOver","Home", FormMethod.Post, new { id = "task_form" })) 
     { 
      <div class="modal-body"> 
       <div class="form-group"> 
        @Html.HiddenFor(m => m.CampaignId) 
        @Html.HiddenFor(m => m.AuthorId) 

        @Html.LabelFor(x => x.Title) 
        @Html.TextBoxFor(x => x.Title, new { @class = "form-control form-input" }) 
       </div> 

       <div class="form-group"> 
        <br /> 
        @Html.LabelFor(x => x.Description) 
        @Html.TextAreaFor(x => x.Description, new { @class = "ckeditor form-control form-input", rows = "3" }) 
        <br /> 
       </div> 
       <div class="form-group"> 
        @Html.LabelFor(x => x.DeadLine) 
        @Html.TextBoxFor(x => x.DeadLine, new { @class = "form-control form-input datepicker", placeholder = "Дедлайн" }) 
        <br /> 
       </div> 
      </div> 
      <div class="modal-footer" style="text-align: left;"> 
       <button type="button" id="task-submit" class="btn btn-primary" style="float: right;">Создать</button> 
      </div> 
     }   
     </div> 
    </div> 
    </div> 
</div> 
<!-- /.modal --> 

Script:

<script> 
    $(document).ready(function() { 
     $('.datepicker').datepicker({ 
      format: 'dd.mm.yyyy', 
      language: 'ru', 
      autoclose: true 
     }); 

    }); 

    $(document).on('click', '#btnAdd', function() { 
     $("#modalTaskForm").modal(); 
    }); 
</script>