web-dev-qa-db-fra.com

Désactiver l'heure dans le sélecteur de date et d'heure bootstrap

J'utilise le sélecteur de date/heure d'amorçage dans mon application Web, faite en PHP/HTML5 et JavaScript. J'en utilise actuellement un ici: http://tarruda.github.io/bootstrap-datetimepicker/

Lorsque j'utilise le contrôle sans temps, cela ne fonctionne pas. Il montre juste une zone de texte vide.

Je veux juste supprimer l'heure du sélecteur de date et heure. Existe-t-il une solution à ça?

<div class="well">
    <div id="datetimepicker4" class="input-append"> 
        <input data-format="yyyy-MM-dd" type="text"></input> 
        <span class="add-on"> 
            <i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i> 
        </span> 
    </div> 
</div> 
<script type="text/javascript"> 
    $(function() { 
        $('#datetimepicker4').datetimepicker({ pickTime: false }); 
    }); 
</script>
javascripthtmltwitter-bootstrap
86
Chirag Sudra

Vérifiez l'extrait ci-dessous

<div class="container">
<div class="row">
    <div class='col-sm-6'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker4'>
                <input type='text' class="form-control" />
                <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
                </span>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function() {              
           // Bootstrap DateTimePicker v4
           $('#datetimepicker4').datetimepicker({
                 format: 'DD/MM/YYYY'
           });
        });      
    </script>
</div>

Vous pouvez consulter http://eonasdan.github.io/bootstrap-datetimepicker/ pour obtenir des informations détaillées sur la documentation et d’autres fonctions ..__ Cela devrait fonctionner.

Mise à jour pour supporter i18n

Utilisez les formats localisés de moment.js:

  • L pour la date seulement
  • LT pour le temps seulement
  • L LT pour la date et l'heure

Voir les autres formats localisés dans la documentation de moment.js ( https://momentjs.com/docs/#/displaying/format/ )

116
Ck Maurya

J'ai essayé toutes les solutions affichées ici, mais aucune d'entre elles n'a fonctionné pour moi. J'ai réussi à désactiver l'heure en utilisant cette ligne de code dans mon jQuery:

$('#datetimepicker4').datetimepicker({
    format: 'YYYY-MM-DD'
});

Ceci définit le format à la date seulement et désactive complètement l’heure. J'espère que cela t'aides.

40
Celt

Ceci est pour: Bootstrap Datetimepicker d'Eonasdan

Tout d'abord, je fournirais un attribut id pour le <input>, puis initialiserais directement le datetimepicker pour ce <input> (et non pour le conteneur parent):

<div class="container">
  <input data-format="yyyy-MM-dd" type="text" id="datetimepicker"/>
</div>
<script type="text/javascript">
  $(function() {
    // Bootstrap DateTimePicker v3
    $('#datetimepicker').datetimepicker({
      pickTime: false
    });
    // Bootstrap DateTimePicker v4
    $('#datetimepicker').datetimepicker({
      format: 'DD/MM/YYYY'
    });
  });
</script>

Pour v3: Contrairement à la réponse de Ck Maurya:

  • pickDate: false désactive la date et permet seulement de choisir une heure
  • pickTime: false désactive l'heure et permet seulement de choisir une date (c'est ce que vous voulez).

Pour la v4: Bootstrap Datetimepicker utilise maintenant le format pour déterminer si un composant temporel est présent. Si aucun composant heure n'est présent, il ne vous laissera pas choisir une heure (et masquera l'icône de l'horloge).

24
Peter Ilfrich

J'ai passé un peu de temps à essayer de comprendre cela en raison de la mise à jour avec DateTimePicker. Vous devez entrer dans un format basé sur moment.js documentation . Vous pouvez utiliser ce que d'autres réponses ont montré:

$('#datetimepicker').datetimepicker({ format: 'DD/MM/YYYY' });

Ou vous pouvez utiliser certains des formats localisés que moment.js fournit pour faire une date, tels que: 

$('#datetimepicker').datetimepicker({locale: 'fr', format: 'L' });

En utilisant ceci, vous pouvez afficher uniquement une heure (LT) ou une date (L) basée sur la locale . La documentation de datetimepicker ne m'a pas dit clairement qu'elle s'adapte automatiquement à l'entrée fournie (date ou heure unique) via le format moment.js. J'espère que cela aide pour ceux qui cherchent encore.

19
ishmael62
$('#datetimepicker').datetimepicker({ 
    minView: 2, 
    pickTime: false, 
    language: 'pt-BR' 
});

S'il vous plaît essayez si cela fonctionne pour vous aussi

9
ImBS

Initialisez votre datetimepicker comme ceci

Pour désactiver le temps

$(document).ready(function(){
    $('#dp3').datetimepicker({
      pickTime: false
    });
});

Pour désactiver la date

$(document).ready(function(){
    $('#dp3').datetimepicker({
      pickDate: false
    });
});

Pour désactiver la date et l'heure

$(document).ready(function(){
   $("#dp3").datetimepicker('disable'); 
});

veuillez vous reporter à la documentation suivante si vous avez un doute

http://eonasdan.github.io/bootstrap-datetimepicker/#options

6
muni
<div class="container">
  <input type="text" id="datetimepicker"/>
</div>

<script type="text/javascript">
  $(function() {
    // trigger datepicker
    $('#datetimepicker').datetimepicker({
       pickTime: false,
        minView: 2,
        format: 'dd/mm/yyyy',
        autoclose: true,
    });
  });
</script>
4
wolver

Cela montre seulement la date: 

$('#myDateTimePicker').datetimepicker({
        format: 'dd.mm.yyyy',
        minView: 2,
        maxView: 4,
        autoclose: true
      });

Plus sur le sujet ici

3
FrenkyB
    $(function () {
        $('#datetimepicker9').datetimepicker({
            viewMode: 'years',
            format: 'DD/MM/YYYY' /*Add this line to remove time format*/
        });
    });
2
Paul
<script type="text/javascript">
        $(function () {
                  $('#datepicker').datetimepicker({
                     format: 'YYYY/MM/DD'
               });
            });
</script>
1
Viral M

Le critère de sélection est maintenant un attribut de la balise DIV.

les exemples sont ...

data-date-format="dd MM yyyy" 
data-date-format="dd MM yyyy - HH:ii p
data-date-format="hh:ii"

ainsi, l'exemple de bootstrap pour jj mm aaaa est le suivant: -

<div class="input-group date form_date col-md-5" data-date="" 
    data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
..... etc ....
</div>

mes paramètres javascript sont les suivants: -

            var picker_settings = {
                language:  'en',
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0
            };

        $(datePickerId).datetimepicker(picker_settings);

Vous pouvez en voir des exemples de travail si vous téléchargez le fichier bootstrap-datetimepicker-master. Il existe des exemples de dossiers, chacun avec un index.html.

1
Ato Thejay

Cela permet d’afficher l’heure dans le champ de saisie mais masque le bouton de sélection d’heure, qui est le deuxième élément li de l’accordéon

.bootstrap-datetimepicker-widget .list-unstyled li:nth-child(2){
    display: none;
}
0
Maxim Radevich

Désactiver le temps dans bootstrap datetimepicker ...

   $(document).ready(function () {
        $('.timepicker').datetimepicker({
            format: "dd-mm-yy",
        });
    });

Désactiver la date dans le sélecteur bootstrap datetime ...

   $(document).ready(function () {
        $('.timepicker').datetimepicker({
            format: "HH:mm A",
        });
    });
0
Mugundhan A
your same code work's fine, just add some link reference

<!DOCTYPE HTML>
<html>
    <head>
        <link href="http://netdna.bootstrapcdn.com/Twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" media="screen"
              href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">


    </head>
    <body>
        <div class="well">
            <div id="datetimepicker4" class="input-append"> 
                <input data-format="yyyy-MM-dd" type="text"></input> 
                <span class="add-on"> 
                    <i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i> 
                </span> 
            </div> 
        </div> 

        <script type="text/javascript"
                src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
        </script> 
        <script type="text/javascript"
                src="http://netdna.bootstrapcdn.com/Twitter-bootstrap/2.2.2/js/bootstrap.min.js">
        </script>
        <script type="text/javascript"
                src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
        </script>
        <script type="text/javascript"
                src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
        </script>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker4').datetimepicker({pickTime: false});
            });
        </script>

    </body>
    </html>
0
Hrushi

Pour la version bootstrap 4, ce code fonctionne;

$('#payment-date-time-select').datetimepicker({
    startView:2,
    minView:2,
});
0
Ethem