Щебетать

Как я могу использовать выбор даты в 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>

Ответы

Ответ 2

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

Для простого экземпляра требуется только:

HTML

<input class="datepicker">

Javascript

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

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

Ответ 3

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

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

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

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

Краткое руководство пользователя

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

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

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

  • С помощью jQuery выберите свой вход и вызовите метод .datepicker():

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

  • Загрузите свою страницу и нажмите или вставьте элемент input. Появится датапикер:

    Picture of a datepicker

Ответ 4

У меня была такая же проблема, но когда я создал тестовый проект, к моему удивлению, datepicker отлично работал с использованием Bootstrap v2.0.2 и JQuery 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>

Ответ 6

добавить

z-index:1151;

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

.datepicker

Ответ 7

Создайте пользовательскую тему с помощью themeroller, затем на странице загрузки выберите "Настройки расширенной темы". Задайте область CSS для тела. Поскольку правила CSS, которые вы загружаете, будут иметь префикс с тегом body tag, они будут иметь более высокую специфичность и будут отменять правила начальной загрузки.

Ответ 8

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

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

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

Ответ 9

Некоторые люди разместили ссылку для этой реализации 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, в соответствии с вашими потребностями.

Ответ 10

Вы использовали 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>