2016-07-04 3 views
-1

У меня очень странная проблема со страницей, которую я делаю с помощью boostrap3, jquery и bootstrap-datepicker.Bootstrap-datepicker в модальном использовании bootstrap стирает скрытые файлы позади, когда выбрано

У меня есть динамический модальный (с формой внутри него), где пользователь может выбрать дату. Поскольку модальный динамический, я отправляю некоторые значения от кнопки к некоторым скрытым значениям внутри модального. (не важно, если они находятся внутри или вне модального ...)

Проблема заключается в том, что пользователь нажимает кнопку datepicker, все входные текстовые/скрытые значения стираются и становятся неопределенными.

Я настроил пример здесь: https://codepen.io/anon/pen/VjWzVr

Код:

$('#myModal').on('show.bs.modal', function (event) { 
    var button = $(event.relatedTarget) // Button that triggered the modal 
    $('#datetimepicker1').datetimepicker({ 
    defaultViewDate: 'today', 
    autoclose:true, 
    todayHighlight:true 
    }); 
    $('#datetimepicker1').datetimepicker('update', new Date()); 
    $('#datetimepicker1').datetimepicker('update'); 
    var showInField = button.data('showid') // Extract info from data-* attributes 
    $('#test').val(showInField) 
}) 

И HTML:

<!-- Button to trigger modal --> 
<a href="#myModal" role="button" class="btn" data-toggle="modal" data-showid="1">Launch demo modal</a> 

<!-- Modal --> 
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body"> 
    <div id="datetimepicker1" class="input-append date"> 
     <input data-format="yyyy-mm-dd" type="text"></input> 
     <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span> 
    </div> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    </div> 
</div><br> 
<input type="text" name="test" id="test" value=""> 

Использование:

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js 
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js 
https://s3-us-west-2.amazonaws.com/s.cdpn.io/2708/bootstrap-datetimepicker.min.js 

причина, почему я делаю т он «обновляет», так что датапикер имеет сегодняшнюю дату, написанную в поле ... codepen не показывает это ... но он работает.

Кто-нибудь знает, почему он удаляет каждое поле ввода на странице?

Благодаря

+0

Это потому, что ваш формат даты. Вы должны определить его в JS для DatePicker тоже .... –

+0

попробуйте поставить это также: format: 'yyyy-mm-dd' –

+0

да жаль, что я забыл, что я удалил это, когда я тестировал вещи, а затем забыл добавить его назад. однако он все еще делает ошибку. – user1033882

ответ

0

Я использовал другую версию самозагрузки-DatePicker и он работает в настоящее время. Дайвинг мой вопрос был noob вещь, чтобы сделать ..., так как я показал пример проблемы и объяснил, что происходит .. Представленные комментарии не решили проблему ... так как они могли легко протестировать код в кодефене и что он не работает.

Смежные вопросы