Twitter Bootstrap date picker

самый популярный выбор даты начальной загрузки в настоящее время: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/

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

1. популярный форк отмечать иконку на Rowls Андрей 'eternicode'(использовать это!):
   • онлайн демо, а также ссылка для загрузки последней версии релиза
   • полная документация
   • GitHub РЕПО
2. оригинальная версия Stefan 'eyecon' Petre, все еще доступна по адресу http://www.eyecon.ro/bootstrap-datepicker/
3. совершенно не связанный виджет datepicker, который "storborg"стремились слиться в bootstrap. Он не был объединен, и ни одна правильная версия выпуска виджета никогда не создавалась.

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

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

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

краткое руководство

1. Включите следующие библиотеки (минимальные версии отмечены здесь) на страница:
   • jQuery
   • Bootstrap - оба JS и CSS
   • последняя версия bootstrap-datepicker - оба JS и CSS

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

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

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

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

4. загрузите свою страницу и нажмите на кнопку или вкладку в свой input элемент. Элемент управления datepicker будет выглядеть так:

   

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

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

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

добавить

z-index:1151;

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

.datepicker

создайте пользовательскую тему с themeroller, затем на странице загрузки выберите "Дополнительные Настройки Темы". установите область CSS в 'body'. Поскольку правила CSS, которые вы загружаете, будут иметь префикс с селектором тегов body, они будут иметь более высокую спецификацию и будут переопределить правила начальной загрузки.

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

Как eternicode / bootstrap-datepicker несовместим с jQuery UI.

но twitter-bootstrap отлично работает для vitalets / bootstrap-datepicker даже с jQuery UI.

некоторые люди выложили ссылке к этому 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, и, конечно же, вы должны удалить любые классы сетки bootstrap, такие как col-md-3 в соответствии с вашими потребностями.

используется data-datepicker="datepicker" должно быть date-provide="datepicker"

кроме того, вы включили 2 bootstrap stylesheets 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>