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

J'utilise le sélecteur de date et d'heure bootstrap dans mon application Web, en PHP / HTML5 et JavaScript. J'en utilise actuellement un à partir d'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 d'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>

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 de la documentation et d'autres fonctions en détail. Cela devrait fonctionner.

Mise à jour pour prendre en charge i18n

Utilisez les formats localisés de moment.js:

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

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

J'ai essayé toutes les solutions affichées ici, mais aucune 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'
});

Cela a défini le format à la date uniquement et a complètement désactivé l'heure. J'espère que cela t'aides.

Ceci est pour: Bootstrap Datetimepicker d'Eonasdan

Tout d'abord, je fournirais un idattribut pour le <input>, puis j'initialiserais le datetimepicker directement pour cela <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 la v3: contrairement à la réponse de Ck Maurya :

• pickDate: false désactivera la date et permettra uniquement de choisir une heure
• pickTime: false désactivera l'heure et ne permettra que de choisir une date (ce que vous voulez).

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

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

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

Ou vous pouvez utiliser certains des formats localisés fournis par moment.js pour ne faire qu'une date, tels que:

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

Grâce à cela, vous pouvez afficher uniquement une heure ( LT) ou une date ( L) en fonction des paramètres régionaux . La documentation de datetimepicker n'était pas claire pour moi qu'elle s'adapte automatiquement à l'entrée fournie (date ou heure uniquement) via le moment.jsformat. J'espère que cela aide pour ceux qui cherchent encore.

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

Veuillez essayer si cela fonctionne aussi pour vous

Initialisez votre datetimepicker comme ceci

Pour désactiver le temps

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

Pour la date de désactivation

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

Pour désactiver la date et l'heure

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

veuillez vous référer à la documentation suivante en cas de doute

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

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

Cela montre seulement la date:

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

Plus sur le sujet ici

    $(function () {
        $('#datetimepicker9').datetimepicker({
            viewMode: 'years',
            format: 'DD/MM/YYYY' /*Add this line to remove time format*/
        });
    });

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

des exemples sont ...

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

donc l'exemple de bootstrap pour jj mm aaaa est: -

<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 voir des exemples fonctionnels de ceux-ci si vous téléchargez le fichier bootstrap-datetimepicker-master. Il existe des exemples de dossiers chacun avec un index.html.

Pour la version bootstrap 4, ce code fonctionne;

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

Désactiver l'heure dans le sélecteur d'heure de date boostrap ...

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

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

   $(document).ready(function () {
        $('.timepicker').datetimepicker({
            format: "HH:mm 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>

<script type="text/javascript">
        $(function () {
                  $('#datepicker').datetimepicker({
                     format: 'YYYY/MM/DD'
               });
            });
</script>

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

Je sais que c'est tard, mais la réponse est simplement de supprimer le «temps» du mot, datetimepickerpour le changer en datepicker. Vous pouvez le formater avec dateFormat.

      jQuery( "#datetimepicker4" ).datepicker({
        dateFormat: "MM dd, yy",
      });

Voici la solution pour vous. Il est très facile d'ajouter simplement du code comme celui-ci:

    $('#datetimepicker4').datetimepicker({ 

    pickTime: false 

    minview:2;(Please see here.)

    }); 

 $("#datetimepicker4").datepicker({
    dateFormat: 'mm/dd/yy',
    changeMonth: true,
    changeYear: true,
    showOtherMonths: true,
    selectOtherMonths: true,
    pickTime: false,
    format: 'YYYY-MM-DD'
});

Pas aussi retardé et la langue à la fois je mets ça et ne travaille pas

$(function () {
    $('#datetimepicker2').datetimepicker({
              locale: 'es',
              pickTime: false
          });
});