it-swarm.com.de

Deaktivieren Sie die Uhrzeit in der Bootstrap-Datumsauswahl

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

Wenn ich das Steuerelement ohne Zeit verwende, funktioniert es nicht. Es zeigt nur ein leeres Textfeld.

Ich möchte nur die Uhrzeit aus der Datumsauswahl 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>
86
Chirag Sudra

Überprüfen Sie den folgenden Ausschnitt

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

Auf http://eonasdan.github.io/bootstrap-datetimepicker/ können Sie sich ausführlich auf Dokumentation und andere Funktionen beziehen. Dies 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/ ).

116
Ck Maurya

Ich habe alle hier veröffentlichten Lösungen ausprobiert, aber keine davon funktionierte für mich. Es ist mir gelungen, die Zeit mithilfe dieser Codezeile in meiner jQuery zu deaktivieren:

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

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

40
Celt

Dies ist für: Eonasdans Bootstrap Datetimepicker

Zuerst würde ich ein id-Attribut für den <input> angeben und dann den datetimepicker direkt für diesen <input> (und nicht für den übergeordneten Container) initialisieren:

<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: Entgegen der Antwort von Ck Maurya:

  • pickDate: false deaktiviert das Datum und lässt nur eine Uhrzeit auswählen
  • pickTime: false deaktiviert die Uhrzeit und erlaubt nur die Auswahl eines Datums (wie gewünscht).

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 Uhrzeit auswählen (und das Uhrensymbol ausblenden).

24
Peter Ilfrich

Ich habe einige Zeit versucht, das herauszufinden, weil ich das Update mit DateTimePicker durchgeführt habe. Sie würden in einem Format eingeben, das auf der Dokumentation von moment.js basiert. Sie können die anderen Antworten verwenden:

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

Oder Sie können einige der lokalisierten Formate verwenden, die moment.js zur Verfügung stellt, um nur ein Datum zu erstellen, z. 

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

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

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

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

9
ImBS

Initialisieren Sie Ihren Datentimepicker so

Für Zeit deaktivieren

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

Für das Datum deaktivieren

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

Um sowohl Datum als auch Uhrzeit zu deaktivieren

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

im Zweifelsfall beziehen Sie sich bitte auf folgende Dokumentation

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

Dies zeigt nur Datum: 

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

Mehr zum Thema hier

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

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 dd mm yyyy lautet: -

<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 Arbeitsbeispiele davon sehen, wenn Sie die bootstrap-datetimepicker-master-Datei herunterladen. Es gibt Beispielordner mit jeweils einer index.html.

1
Ato Thejay

Dies ermöglicht die Anzeige von Zeit im Eingabefeld, verbirgt jedoch die Schaltfläche für die Zeitauswahl, die das zweite Element des Akkordeons ist

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

Zeit in Bootstrap-Datentimepicker deaktivieren ...

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

Datum in der Bootstrap-Datumsauswahl deaktivieren ...

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

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

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