web-dev-qa-db-fra.com

Sélecteur de date Twitter Bootstrap

Comment puis-je utiliser le sélecteur de date Twitter Bootstrap? J'ai utilisé le code ci-dessous mais ça ne marche pas.

<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>
twitter-bootstrapdatepickerbootstrap-datepicker
54
Sangram Anand

Twitter Bootstrap est incompatible avec les styles jQuery UI pour le moment.

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

Ceci pourrait vous aider https://github.com/sferik/Rails_admin ( http://Rails-admin-tb.herokuapp.com/admin/drafts/new )

16
Michael

Le sélecteur de date d'amorçage le plus populaire est actuellement: https://github.com/eternicode/bootstrap-datepicker (Grâce à @dentarg pour l'avoir découvert)

Une instanciation simple nécessite seulement:

HTML

<input class="datepicker">

Javascript

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

Voir un exemple simple ici https://jsfiddle.net/k6qsm5no/1/ ou la documentation complète ici http://bootstrap-datepicker.readthedocs.org/en/latest/

68
Josh Stuart

Une grande confusion résulte de l’existence d’au moins trois grandes bibliothèques nommées bootstrap-datepicker:

  1. Un fork populaire du sélecteur de date eyecon par Andrew 'eternicode' Rowls (utilisez celui-ci!) :
  2. La version originale de Stefan 'eyecon' Petre, toujours disponible sur le site http://www.eyecon.ro/bootstrap-datepicker/
  3. Un widget datepicker totalement indépendant qui "storborg" a cherché à avoir fusionné dans bootstrap . Il n'a pas été fusionné et aucune version appropriée du widget n'a été créée.

Si vous démarrez un nouveau projet - ou diable, même si vous reprenez un ancien projet utilisant la version eyecon - je vous recommande (= /// =) d'utiliser la version d'éternicode , pas eyecon . La version originale d'Eyecon est nettement inférieure en termes de fonctionnalité et de documentation, et il est peu probable que cela change. Elle n'a pas été mise à jour depuis mars 2013.

Vous pouvez voir la plupart des fonctionnalités de l’éternicode datepicker sur la page de démonstration , ce qui vous permet de jouer avec la configuration du datpicker et d’observer les résultats. Pour plus de détails, voir le documentation succincte mais complète , que vous pouvez probablement consommer dans son intégralité en moins d’une heure.

Si vous êtes impatient, voici un très bref guide étape par étape du cas d'utilisation le plus simple et le plus courant du sélecteur de date.

Guide de démarrage rapide

  1. Incluez les bibliothèques suivantes (versions minimales notées ici ) sur votre page:

  2. Placez un élément input sur votre page quelque part, par exemple.

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

  3. Avec jQuery, sélectionnez votre entrée et appelez la méthode .datepicker():

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

  4. Chargez votre page et cliquez sur ou tabulation dans votre élément input. Un datepicker apparaîtra:

    Picture of a datepicker

30
Mark Amery

Découvrez Jquery Bootstrap:

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

1
Andrew

ajouter 

z-index:1151;

à la feuille de style dans 

.datepicker
1
Sujay sreedhar

J'avais le même problème mais quand j'ai créé un projet test, à ma grande surprise, datepicker fonctionnait parfaitement avec Bootstrap v2.0.2 et Jquery UI 1.8.11. Voici les scripts que je suis inclus:

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

Créez un thème personnalisé avec themeroller, puis sur la page de téléchargement, choisissez "Paramètres de thème avancés". Définissez la portée CSS sur 'body'. Étant donné que les règles CSS que vous téléchargez seront préfixées par le sélecteur de balises body, elles auront une spécificité supérieure et remplaceront les règles d'amorçage.

0
Shehab Fawzy

Certaines personnes ont posté le link sur cette implémentation bootstrap-datepicker.js. Je l'ai utilisé de la manière suivante, cela fonctionne avec Bootstrap 3.

C'est le balisage que j'ai utilisé:

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

C'est le javascript:

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

J'ai également inclus le fichier javascript téléchargé à partir du lien ci-dessus, ainsi que son fichier css, et bien sûr, vous devez supprimer toutes les classes de grille d'amorçage comme le col-md-3 pour répondre à vos besoins.

0
Cloud9999Strife

Vous avez utilisé data-datepicker="datepicker" Il doit s'agir de date-provide="datepicker"

De plus, vous avez inclus 2 feuilles de style d'amorçage bootstrap.css et bootstrap.min.css

Je préfère aussi utiliser bootstrap-datepicker3.min.css que datepicker.less

Full 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
Quan Do

Je faisais également face au même problème pour Twitter-bootstrap.

As eternicode/bootstrap-datepicker est incompatible avec l'interface utilisateur jQuery.

Mais Twitter-bootstrap fonctionne bien pour vitalets/bootstrap-datepicker même avec l'interface utilisateur jQuery.

0
Tanmay