web-dev-qa-db-fra.com

Bootstrap-Datetimepicker ne fonctionne pas

Je regarde cela depuis 2 jours et je ne peux pas comprendre ce que je fais mal.

Voici un violon avec mon projet. http://jsfiddle.net/dagger2002/RR4hw/

Voici le HTML

    <div class="container">
    <div class="col-sm-6" style="height:75px;">
        <div class='col-md-5'>
            <div class="form-group">
                <div>Start</div>

                <div class='input-group date' id='startDate'>
                    <input type='text' class="form-control" name="startDate" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class='col-md-5'>
            <div class="form-group">
                <div>End</div>

                <div class='input-group date' id='endDate'>
                    <input type='text' class="form-control" name="org_endDate" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

Voici le Jquery.

jQuery(function () {
    jQuery('#startDate').datetimepicker();
    jQuery('#endDate').datetimepicker();
    jQuery("#startDate").on("dp.change",function (e) {
        jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
    });
    jQuery("#endDate").on("dp.change",function (e) {
        jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
    });
});

Je ne reçois aucune erreur et quand je le fais à travers le violon, il dit qu'aucune erreur n'a été trouvée. Je suis nouveau sur jQuery, donc je ne suis pas sûr de ce que je fais mal. 

Oh oui. J'utilise un nom long pour faire cela sur un site joomla qui utilise également moo tools.

Merci d'avance.

METTRE À JOUR

<!doctype html>

<html lang="en-gb">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="x-ua-compatible" content="IE=Edge,chrome=1" />
        <title>DateTime Test</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />


        <!-- Style Sheets -->
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" type="text/css" />
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" />

        <!-- Scripts -->
        <script src="//ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
        <script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>

        <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js" type="text/javascript"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>  
        <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/lang/en-gb.js" type="text/javascript"></script>
        <script>
            jQuery.noConflict();
        // Code that uses other library's $ can follow here.
        </script>
    </head>

    <body>
        <div class="container">
            <div class="col-sm-6" style="height:75px;">
               <div class='col-md-5'>
                    <div class="form-group">
                        <div>Start</div>

                        <div class='input-group date' id='startDate'>
                            <input type='text' class="form-control" name="startDate" />
                            <span class="input-group-addon">
                                   <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class='col-md-5'>
                    <div class="form-group">
                        <div>End</div>

                        <div class='input-group date' id='endDate'>
                            <input type='text' class="form-control" name="org_endDate" />
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Ce jFiddle fonctionne. http://jsfiddle.net/RR4hw/11/

Mais lorsque je l’incorpore à une page normale, elle se déchire. Je ne sais pas ce que je déconne. 

Merci d'avance.

jquerytwitter-bootstrap-3bootstrap-datetimepicker
10
dagger2002

Il semblait y avoir des problèmes avec les ressources externes dans votre jsFiddle.

J'ai mis à jour jsFiddle pour travailler. J'ai changé les ressources externes et apporté quelques ajustements mineurs au code.

HTML

<div class="container">
    <div class="col-sm-6" style="height:75px;">
       <div class='col-md-5'>
            <div class="form-group">
                <div>Start</div>

                <div class='input-group date' id='startDate'>
                    <input type='text' class="form-control" name="startDate" />
                    <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
      </span>
                    </span>
                </div>
            </div>
        </div>
        <div class='col-md-5'>
            <div class="form-group">
                <div>End</div>

                <div class='input-group date' id='endDate'>
                    <input type='text' class="form-control" name="org_endDate" />
                    <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
      </span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

JAVASCRIPT

jQuery(function () {
    jQuery('#startDate').datetimepicker({ format: 'dd/MM/yyyy hh:mm:ss' });
    jQuery('#endDate').datetimepicker({ format: 'dd/MM/yyyy hh:mm:ss' });
    jQuery("#startDate").on("dp.change",function (e) {
        jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
    });
    jQuery("#endDate").on("dp.change",function (e) {
        jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
    });
});

METTRE &AGRAVE; JOUR

  • Dans votre jsFiddle, vous faites référence à "bootstrap-datepicker.min.js" et non à "bootstrap-datetimepicker.min.js". 
  • il semble que "bootstrap-datepicker.min.js" nécessite "moment.js" comme condition préalable. S'il vous plaît noter que l'ordre de comprend la matière. 
  • Enfin, "en-gb.js" doit figurer après "bootstrap-datetimepicker.min.js".

Mise à jour jsFiddle avec la solution de travail.

10
malkassem

L'ordre d'inclusion de script dans jsFiddle ne fonctionne pas. Vous trouverez ci-dessous l'ordre modifié pour un échantillon exploitable. Comme suggéré par @malkassem, moment.js est requis pour que le sélecteur de date bootstrap fonctionne.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>        
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/lang/en-gb.js"></script>                
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js"></script>`
6
Jeevanantham

Le moyen le plus simple de faire fonctionner le sélecteur de date et/ou d’heure est d’installer le paquet ci-dessous

Install-Package Bootstrap.v3.Datetimepicker.CSS

et référencez ensuite les fichiers installés dans _Layout 

<!-- JS -->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>   <!-- Bootstrap v3.3.5 -->
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<script src="~/Scripts/Core.js"></script>

puis ajoutez le script ci-dessous à la page de présentation avant la balise </body> 

<script>
jQuery(document).ready(function () {

    jQuery('.datepicker').datetimepicker({ format: 'DD/MM/YYYY' });
    jQuery('.datetimepicker').datetimepicker();

});
</script>

en vue rasoir utiliser comme ci-dessous

@Html.EditorFor(model => model.MyDate, new { htmlAttributes = new { @class = "form-control datepicker" } })
@Html.EditorFor(model => model.MyDateTime, new { htmlAttributes = new { @class = "form-control datetimepicker" } })
0
Moji