Wyłącz czas w selektorze daty i godziny ładowania początkowego

Używam selektora daty i czasu ładowania początkowego w mojej aplikacji internetowej, wykonanej w PHP / HTML5 i JavaScript. Obecnie używam jednego stąd: http://tarruda.github.io/bootstrap-datetimepicker/

Kiedy używam kontrolki bez czasu, to nie działa. Po prostu pokazuje puste pole tekstowe.

Chcę tylko usunąć godzinę z selektora dat. Czy jest na to jakieś rozwiązanie?

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

Sprawdź poniższy fragment

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

Możesz odnieść się do http://eonasdan.github.io/bootstrap-datetimepicker/, aby uzyskać szczegółowe informacje na temat dokumentacji i innych funkcji. To powinno działać.

Zaktualizuj, aby obsługiwać i18n

Użyj zlokalizowanych formatów moment.js:

• L tylko na randkę
• LT tylko na czas
• L LT daty i godziny

Zobacz inne zlokalizowane formaty w dokumentacji moment.js ( https://momentjs.com/docs/#/displaying/format/ )

Wypróbowałem wszystkie zamieszczone tutaj rozwiązania, ale żadne z nich nie zadziałało. Udało mi się wyłączyć czas, używając tej linii kodu w moim jQuery:

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

Spowoduje to ustawienie tylko formatu daty i całkowite wyłączenie czasu. Mam nadzieję że to pomoże.

To jest dla: Eonasdan's Bootstrap Datetimepicker

Przede wszystkim podałbym idatrybut dla, <input>a następnie zainicjowałbym datetimepicker bezpośrednio dla tego <input>(a nie dla kontenera nadrzędnego):

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

Dla wersji 3: w przeciwieństwie do odpowiedzi Ck Mauryi :

• pickDate: false wyłączy datę i pozwoli tylko na wybranie czasu
• pickTime: false wyłączy czas i pozwoli tylko na wybranie daty (co chcesz).

W przypadku wersji 4: Bootstrap Datetimepicker używa teraz formatu do określenia, czy występuje składnik czasu. Jeśli nie ma składnika czasu, nie pozwoli ci wybrać czasu (i ukryje ikonę zegara).

Spędziłem trochę czasu, próbując to rozgryźć z powodu aktualizacji z DateTimePicker. Wpisałbyś w formacie opartym na dokumentacji moment.js . Możesz użyć innych odpowiedzi:

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

Możesz też użyć niektórych zlokalizowanych formatów udostępnianych przez moment.js, aby zrobić tylko datę, na przykład:

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

Używając tego, możesz wyświetlić tylko godzinę ( LT) lub datę ( L) na podstawie ustawień regionalnych . Dokumentacja dla datetimepicker nie była dla mnie jasna, że ​​automatycznie dostosowuje się do dostarczonych danych wejściowych (data lub tylko godzina) poprzez moment.jsformat. Mam nadzieję, że to pomoże tym, którzy wciąż szukają.

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

Spróbuj, jeśli to również działa dla Ciebie

Zainicjuj swój datetimepicker w ten sposób

Na czas wyłączenia

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

Data wyłączenia

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

Aby wyłączyć zarówno datę, jak i godzinę

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

w razie wątpliwości zapoznaj się z poniższą dokumentacją

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>

Pokazuje tylko datę:

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

Więcej na ten temat tutaj

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

Kryteria selektora są teraz atrybutem znacznika DIV.

przykłady to ...

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

więc przykład bootstrap dla dd mm rrrr to: -

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

moje ustawienia Javascript są następujące: -

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

        $(datePickerId).datetimepicker(picker_settings);

Możesz zobaczyć ich działające przykłady, jeśli pobierzesz plik bootstrap-datetimepicker-master. Istnieją przykładowe foldery, z których każdy ma plik index.html.

Dla wersji bootstrap 4 ten kod działa;

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

Wyłącz czas w selektorze datetime Boostrap ...

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

Wyłącz datę w selektorze 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>

Pozwala to na pokazanie czasu w polu wprowadzania, ale ukrywa przycisk wyboru czasu, który jest drugim elementem li w akordeonie

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

Wiem, że jest późno, ale odpowiedzią jest po prostu usunięcie „czasu” ze słowa, datetimepickeraby je zmienić datepicker. Możesz go sformatować za pomocą dateFormat.

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

Oto rozwiązanie dla Ciebie. Bardzo łatwo jest po prostu dodać taki kod:

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

Nie odkładam czasu i języka na raz, kładę to i nie pracuję

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