54 votes

Le sélecteur de date de Twitter Bootstrap

Comment puis-je utiliser le sélecteur de date Twitter Bootstrap? J'ai utilisé le code ci-dessus mais cela ne fonctionne 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>
 

68voto

Zoop - Josh Points 1019

J'ai trouvé celui qui correspond exactement à ce que vous recherchez: http://www.eyecon.ro/bootstrap-datepicker/

Mise à jour : Ceci est le github du lien que j'ai posté à l'origine: https://github.com/eternicode/bootstrap-datepicker (merci à @dentarg de l' avoir découvert )

44voto

mwoods79 Points 758

J'ai trouvé un exemple ici .

Je n'ai pas encore trouvé de bonne documentation.

30voto

Mark Amery Points 4705

Beaucoup de confusion provient de l'existence d'au moins quatre bibliothèques nommé bootstrap-datepicker:

  1. Populaire fourche de eyecon du datepicker par Andrew 'eternicode' Rowls (utilisation de celui-ci!):
  2. La version originale par Stefan 'eyecon' Petre, toujours disponible au http://www.eyecon.ro/bootstrap-datepicker/
  3. Une autre fourche de eyecon du datepicker par "Vitalets': https://github.com/vitalets/bootstrap-datepicker
  4. Un totalement indépendants du composant que "storborg' a cherché à avoir fusionné dans le bootstrap. Il n'était pas fusionnés et pas de la bonne version du widget a jamais été créé.

Si vous êtes le démarrage d'un nouveau projet - ou diable, même si vous prenez le contrôle d'un vieux projet à l'aide de la eyecon version - je recommande que vous utilisez eternicode version, pas eyecon de l'. L'original eyecon version est carrément inférieur en termes de fonctionnalité et de la documentation, et cela ne devrait pas changer, il n'a pas été mis à jour depuis le mois de Mars 2013.

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

Dans le cas où vous êtes impatient de la, si, voici une très courte étape par étape guide pour la plus simple et la plus courante de cas d'utilisation pour le datepicker.

Guide de démarrage rapide

  1. Inclure les bibliothèques suivantes (versions minimales de noter ici) sur votre page:
  2. Mettre un input élément sur votre page quelque part, par exemple

    <input id="my-date-input">
    
  3. Avec jQuery, sélectionnez votre entrée et d'appeler l' .datepicker() méthode:

    jQuery('#my-date-input').datepicker();
    
  4. Chargement de votre page et cliquez sur l'onglet ou dans votre input élément. Un datepicker apparaît:

    Picture of a datepicker

16voto

Michael Points 554

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

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

Cela pourrait vous aider https://github.com/sferik/rails_admin ( http://rails-admin-tb.herokuapp.com/admin/drafts/new )

1voto

Andrew Points 940

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>
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X