Twitter Bootstrap date picker

Najpopularniejszym Bootstrap Date picker jest obecnie: https://github.com/eternicode/bootstrap-datepicker (dzięki @dentarg za wykopanie)

Prosta instancja wymaga tylko:

HTML

<input class="datepicker">

Javascript

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

Zobacz prosty przykład tutaj https://jsfiddle.net/k6qsm5no/1 / lub pełne dokumenty tutaj http://bootstrap-datepicker.readthedocs.org/en/latest/

Wiele zamieszania wynika z istnienia co najmniej trzech głównych bibliotek o nazwie Bootstrap-datepicker:

1. [[9]}popularny widelec Eyecon 's datepicker autorstwa Andrew' eternicode ' Rowls (Użyj tego!):
   • demo Online oraz link do pobrania najnowszej wersji
   • kompleksowa dokumentacja
   • GitHub repo
2. Oryginalna wersja Stefana 'eyecona' Petre ' a, dostępna jeszcze na http://www.eyecon.ro/bootstrap-datepicker /
3. zupełnie niepowiązany widżet datepicker, który " storborg "starał się połączyć w bootstrap. Nie został on scalony i nigdy nie stworzono odpowiedniej wersji widżetu.

Jeśli rozpoczynasz nowy projekt - lub nawet przejmujesz stary projekt za pomocą wersji eyecon-polecam użyj wersji eternicode, a nie eyecon. Oryginalna wersja eyecon to zdecydowanie gorszy zarówno pod względem funkcjonalności, jak i dokumentacji, a to raczej się nie zmieni - nie został zaktualizowany od marca 2013 roku.

Możesz zobaczyć większość możliwości eternicode datepicker na stronie demo , która pozwala Ci grać z konfiguracją datepicker i obserwować wyniki. Więcej szczegółów można znaleźć w zwięzłej, ale wyczerpującej dokumentacji , którą prawdopodobnie można zużyć w całości w mniej niż godzinę.

W przypadku jesteś jednak niecierpliwy, oto bardzo krótki przewodnik krok po kroku po najprostszym i najczęstszym przypadku użycia datepicker.

Quick start guide

1. Dołącz na swojej stronie następujące biblioteki (Minimalne wersje tutaj) :
   • jQuery
   • Bootstrap - zarówno JS jak i CSS
   • najnowsza wersja Bootstrap-datepicker - zarówno JS jak i CSS

2. Umieść element input gdzieś na twojej stronie, np.

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

3. Z jQuery wybierz swoje wejście i wywołaj metodę .datepicker():

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

4. Załaduj swoją stronę i kliknij na lub zakładkę do elementu input. Pojawi się datepicker:

   

Sprawdź Jquery Bootstrap:

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

Miałem ten sam problem, ale kiedy stworzyłem projekt testowy, ku mojemu zdziwieniu, datepicker działał idealnie przy użyciu Bootstrap v2.0. 2 i jQuery UI 1.8.11. Oto skrypty, które dołączam:

        <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>

Dodaj

z-index:1151;

Do arkusza stylów w

.datepicker

Utwórz własny motyw za pomocą themeroller, a następnie na stronie pobierania wybierz "Zaawansowane Ustawienia motywu". Ustaw zakres CSS na 'body' . Ponieważ reguły CSS, które pobierasz, będą poprzedzone selektorem znaczników body, będą miały wyższą specyficzność i nadpisają reguły bootstrap .

Miałem również do czynienia z tym samym problemem dla twitter-bootstrap.

Ponieważ eternicode/Bootstrap-datepicker jest niezgodny z jQuery UI.

Ale twitter - bootstrap działa dobrze dlavitalets/Bootstrap-datepicker nawet z jQuery UI.

Niektórzy wrzucili link do tego Bootstrap-datepicker.implementacja js. Użyłem tego w następujący sposób, działa z Bootstrap 3.

To jest znacznik, którego użyłem:

<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>

To jest javascript:

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

Dołączyłem również plik javascript pobrany z linku powyżej, wraz z plikiem css, i oczywiście powinieneś usunąć wszelkie klasy siatki bootstrap, takie jak col-md-3, aby dostosować się do swoich potrzeb.

Użyłeś data-datepicker="datepicker" to musi być date-provide="datepicker"

Dołączono również 2 arkusze stylów bootstrap bootstrap.css i bootstrap.min.css

Ja też wolę używać bootstrap-datepicker3.min.css niż datepicker.less

Pełny 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>