Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > bootstrap datepicker


Автор: smily 16.11.2012, 03:09
Использовал: bootstrap v2.2.1, jquery v1.8.2, компонент Datepicker for Bootstrap http://www.eyecon.ro/bootstrap-datepicker/
Имеется страница с возможностью вызова диалогового окна с формой ввода.
вводимым значением является дата, которую нужно выбрать с помощью календаря.

Реализовал следующим образом:
Код

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>...</title>    
    <link href="css/bootstrap.css" rel="stylesheet" media="screen"> 
     <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="css/datepicker.css" rel="stylesheet">
</head>
<body>
<script src="js/jquery-1.8.2.js"></script>    
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-datepicker.js "></script>
<a class="btn btn-success" id="openMyModal" href="#myModal"><i class="icon-plus icon-white"></i> Добавить</a>

<div class="modal hide static" id="myModal">
  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Создание документа</h3>
  </div>
  <div class="modal-body">    
    <form class="form-horizontal">
     <fieldset>            
     <div class="control-group">
     <label class="control-label " for="dateP">Дата публикации на сайте (по плану закупок)</label>
     <div class="controls">    
        <input type="text" class="input-xsmall" id="input04">    
     </div>
     </div>     
     </fieldset>
    </form>    
</div>    
<script>
 $('#input04').click(function (e) {
  $("#input04").datepicker();  
 });    
</script>
</body>

но проблема: при клике на поле, календарик открывается не в модальном окне а на основной странице:user posted image
Как победить?

Автор: Aliance 16.11.2012, 11:00
На сколько я помню в стандартных компонентах bootstrap`а нет datepicker`а. Видимо, это форк со стороны. В таком случае не удивительно, что он так глючит.
Как варианты:
 - поставить zIndex прямо в css больше
 - ловить open datepicker`а и прятать модальное окно до close datepicker`а.

Автор: smily 21.11.2012, 12:11
Цитата(Aliance @ 16.11.2012,  11:00)
На сколько я помню в стандартных компонентах bootstrap`а нет datepicker`а. Видимо, это форк со стороны. В таком случае не удивительно, что он так глючит.
Как варианты:
 - поставить zIndex прямо в css больше
 - ловить open datepicker`а и прятать модальное окно до close datepicker`а.

после нескольких манипуляций с CSS, и добавления (а его не было изначально) параметра z-index заработало. 

Зы. thx  smile 

ЗыЗы. единственное что добавлю, параметр z-index отрабатывает только при правильном позиционировании элемента ( .position: absolute)

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)