Deaktivieren Sie die Uhrzeit in der Bootstrap-Datums- und Uhrzeitauswahl

Ich verwende die Bootstrap-Datums- und Uhrzeitauswahl in meiner Webanwendung, die in PHP / HTML5 und JavaScript erstellt wurde. Ich verwende derzeit eine von hier: http://tarruda.github.io/bootstrap-datetimepicker/

Wenn ich das Steuerelement ohne Zeit benutze, funktioniert es nicht. Es wird nur ein leeres Textfeld angezeigt.

Ich möchte nur die Uhrzeit aus der Datums- und Uhrzeitauswahl entfernen. Gibt es dafür eine Lösung?

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

Überprüfen Sie das folgende Snippet

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

Dokumentation und andere Funktionen finden Sie unter http://eonasdan.github.io/bootstrap-datetimepicker/ . Das sollte funktionieren.

Update zur Unterstützung von i18n

Verwenden Sie lokalisierte Formate von moment.js:

• L nur für Datum
• LT nur für die Zeit
• L LT für Datum und Uhrzeit

Weitere lokalisierte Formate finden Sie in der Dokumentation zu moment.js ( https://momentjs.com/docs/#/displaying/format/ ).

Ich habe alle hier veröffentlichten Lösungen ausprobiert, aber keine davon hat für mich funktioniert. Ich konnte die Zeit mithilfe dieser Codezeile in meiner jQuery deaktivieren:

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

Dadurch wurde das Format nur auf Datum gesetzt und die Uhrzeit vollständig deaktiviert. Hoffe das hilft.

Dies ist für: Eonasdans Bootstrap Datetimepicker

Zuerst würde ich ein idAttribut für das bereitstellen <input>und dann den datetimepicker direkt dafür initialisieren <input>(und nicht für den übergeordneten Container):

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

Für v3: Im Gegensatz zu Ck Mauryas Antwort:

• pickDate: false deaktiviert das Datum und erlaubt nur die Auswahl einer Uhrzeit
• pickTime: false deaktiviert die Uhrzeit und erlaubt nur die Auswahl eines Datums (das ist, was Sie wollen).

Für v4: Bootstrap Datetimepicker verwendet jetzt das Format, um festzustellen, ob eine Zeitkomponente vorhanden ist. Wenn keine Zeitkomponente vorhanden ist, können Sie keine Zeit auswählen (und das Uhrensymbol ausblenden).

Ich habe einige Zeit damit verbracht, dies aufgrund des Updates mit herauszufinden DateTimePicker. Sie würden in einem Format eingeben, das auf der Dokumentation von moment.j basiert . Sie können verwenden, was andere Antworten zeigten:

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

Oder Sie können einige der lokalisierten Formate verwenden, die moment.js bereitstellt, um nur ein Datum festzulegen, z.

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

Auf diese Weise können Sie nur eine Uhrzeit ( LT) oder ein Datum ( L) basierend auf dem Gebietsschema anzeigen . Die Dokumentation für datetimepicker war mir nicht klar, dass sie sich automatisch über das moment.jsFormat an die Eingabe (Datum oder nur Uhrzeit) anpasst . Hoffe das hilft für diejenigen, die noch suchen.

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

Bitte versuchen Sie, ob es auch für Sie funktioniert

Initialisieren Sie Ihren datetimepicker wie folgt

Zum Deaktivieren der Zeit

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

Zum Deaktivieren des Datums

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

Datum und Uhrzeit deaktivieren

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

Im Zweifelsfall lesen Sie bitte die folgende Dokumentation

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>

Dies zeigt nur Datum:

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

Mehr zum Thema hier

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

Das Auswahlkriterium ist jetzt ein Attribut des DIV-Tags.

Beispiele sind ...

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

Das Bootstrap-Beispiel für TT MM JJJJ lautet also: -

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

Meine Javascript-Einstellungen lauten wie folgt: -

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

        $(datePickerId).datetimepicker(picker_settings);

Sie können funktionierende Beispiele dafür sehen, wenn Sie die Datei bootstrap-datetimepicker-master herunterladen. Es gibt Beispielordner mit jeweils einer index.html.

Für die Bootstrap 4-Version funktioniert dieser Code.

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

Zeit in Boostrap Datetime Picker deaktivieren ...

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

Datum in Boostrap Datetime Picker deaktivieren ...

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

Dies ermöglicht die Anzeige der Zeit im Eingabefeld, verbirgt jedoch die Zeitauswahltaste, die das zweite Li-Element im Akkordeon ist

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

Ich weiß, dass dies spät ist, aber die Antwort ist einfach, "Zeit" aus dem Wort datetimepickerzu entfernen, um es in zu ändern datepicker. Sie können es mit formatieren dateFormat.

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

Hier ist die Lösung für Sie. Es ist sehr einfach, Code wie folgt hinzuzufügen:

    $('#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'
});

Nicht so viel Zeit und Sprache auf einmal zu verschieben, ich setze dies und arbeite nicht

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