Twitter Bootstrap Выбор даты - PullRequest
Новая
       62

Twitter Bootstrap Выбор даты

54 голосов
/ 25 ноября 2011

Как я могу использовать средство выбора даты Twitter Bootstrap? Я использовал код ниже, но он не работает. 

<html>
    <head>
    <title>DatePicker Demo</title>
    <script src="js/jquery-1.7.1.js"></script>
    <link href="css/datepicker.less" rel="stylesheet" type="text/css" />
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="js/bootstrap-datepicker.js"></script>

    </script>
    </head>
    <body>
    <form >
        <div class="input">
            <input class="small" type="text" value="01/05/2011" data-datepicker="datepicker">
        </div>
    </form>

    </body>
</html>

Ответы [ 10 ]

68 голосов
/ 02 апреля 2012

Самым популярным средством выбора даты начальной загрузки в настоящее время является: https://github.com/eternicode/bootstrap-datepicker (спасибо @ dentarg за его поиск)

Простое создание экземпляра требует только:

HTML 

<input class="datepicker">

Javascript 

$('.datepicker').datepicker();

См. Простой пример здесь https://jsfiddle.net/k6qsm5no/1/ или полные документы здесь http://bootstrap -datepicker.readthedocs.org/ ен / последний /

30 голосов
/ 08 января 2014

Большая путаница связана с существованием, по крайней мере, трех основных библиотек с именем bootstrap-datepicker:

  1. Популярная вилка средства выбора даты eyecon by Andrew 'eternicode' Rowls one!) :
  2. Оригинальная версия Stefan 'eyecon' Petre, все еще доступна на http://www.eyecon.ro/bootstrap-datepicker/
  3. Совершенно не связанный виджет DatePickerэтот 'storborg' стремился слиться в начальную загрузку .Он не был объединен, и соответствующая версия выпуска виджета никогда не создавалась.

Если вы начинаете новый проект - или, черт возьми, даже если вы принимаете старый проект, используяверсия eyecon - я рекомендую вам использовать версию eternicode, а не eyecon .Оригинальная версия eyecon явно уступает в плане как функциональности, так и документации, и вряд ли это изменится - она ​​не обновлялась с марта 2013 года.

Большинство возможностей указателя даты eternicode можно увидеть на демонстрационная страница , которая позволяет вам играть с конфигурацией средства выбора даты и наблюдать за результатами.Для получения более подробной информации см. Краткую, но исчерпывающую документацию , которую вы, вероятно, сможете употребить полностью менее чем за час.

Однако, если вы нетерпеливы, вот очень короткий шагпошаговое руководство по самому простому и наиболее распространенному варианту использования средства выбора даты.

Краткое руководство по началу работы

  1. Включите следующие библиотеки (минимальные отмеченные версии здесь ) на вашей странице:

  2. Поместите элемент input на страницу где-нибудь, например, 

    <input id="my-date-input">

  3. С помощью jQuery выберите ваш ввод и вызовите метод .datepicker(): 

    jQuery('#my-date-input').datepicker();

  4. Загрузите страницу и нажмите или перейдите в элемент input.Появится средство выбора даты:

    Picture of a datepicker

16 голосов
/ 26 ноября 2011

Twitter Bootstrap на данный момент несовместим со стилями пользовательского интерфейса jQuery.

https://github.com/twitter/bootstrap/issues/156

Это может помочь вам https://github.com/sferik/rails_admin (http://rails -admin-tb.herokuapp.com/admin/drafts/new)

1 голос
/ 03 марта 2013

добавить 

z-index:1151;

к таблице стилей в 

.datepicker
1 голос
/ 15 июня 2012

Проверьте Jquery Bootstrap:

http://jslegers.github.com/jquery-bootstrap/

1 голос
/ 15 июня 2012

У меня была та же проблема, но когда я создал тестовый проект, к моему удивлению, datepicker отлично работал с использованием Bootstrap v2.0.2 и Jquery UI 1.8.11. Вот сценарии, которые я включаю: 

        <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap-responsive.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
0 голосов
/ 04 апреля 2016

Вы использовали data-datepicker="datepicker" Это должно быть date-provide="datepicker"

Кроме того, вы включили 2 таблицы стилей начальной загрузки bootstrap.css и bootstrap.min.css

Я также предпочитаю использовать bootstrap-datepicker3.min.css, чем datepicker.less

Полный HTML: 

<html>
    <head>
    <title>DatePicker Demo</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/bootstrap-datepicker3.min.css">
    <script src="js/jquery-1.7.1.js"></script>
    <script src="js/bootstrap-datepicker.js"></script>
    </head>
    <body>
        <form>
            <div class="input">
                <input data-provide="datepicker" class="small" type="text" value="01/05/2011">
            </div>
        </form>
    </body>
</html>
0 голосов
/ 06 декабря 2013

Некоторые люди опубликовали ссылку на эту реализацию bootstrap-datepicker.js.Я использовал его следующим образом, он работает с Bootstrap 3.

Это разметка, которую я использовал: 

<div class="input-group date col-md-3" data-date-format="dd-mm-yyyy" data-date="01-01-2014">                        
    <input id="txtHomeLoanStartDate" class="form-control" type="text" readonly="" value="01-01-2014" size="14" />
    <span class="input-group-addon add-on">
        <span class="glyphicon glyphicon-calendar"</span>
    </span>
</div>

Это javascript: 

$('.date').datepicker();

Я также включил файл javascript, загруженный по ссылке выше, вместе с его файлом css, и, конечно, вы должны удалить все классы сетки начальной загрузки, такие как col-md-3, в соответствии с вашими потребностями.

0 голосов
/ 13 сентября 2013

Я также столкнулся с той же проблемой для twitter-bootstrap.

Поскольку eternicode / bootstrap-datepicker несовместим с пользовательским интерфейсом jQuery.

Но Twitter-bootstrapотлично работает для vitalets / bootstrap-datepicker даже с пользовательским интерфейсом jQuery.

0 голосов
/ 11 марта 2012

Создайте пользовательскую тему с themeroller, затем на странице загрузки выберите «Дополнительные параметры темы». Установите область видимости CSS на «body» .Поскольку загружаемые вами CSS-правила будут иметь префикс выбора тега body, они будут иметь более высокую специфичность и будут переопределять правила начальной загрузки .

...