Tắt thời gian trong bộ chọn thời gian ngày bootstrap

Tôi đang sử dụng bộ chọn thời gian ngày tháng trong bootstrap trong ứng dụng web của mình, được tạo bằng PHP / HTML5 và JavaScript. Tôi hiện đang sử dụng một từ đây: http://tarruda.github.io/bootstrap-datetimepicker/

Khi tôi đang sử dụng điều khiển mà không có thời gian, nó không hoạt động. Nó chỉ hiển thị một hộp văn bản trống.

Tôi chỉ muốn xóa thời gian khỏi bộ chọn ngày giờ. Có giải pháp nào cho điều này?

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

Kiểm tra đoạn mã dưới đây

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

Bạn có thể tham khảo chi tiết tại http://eonasdan.github.io/bootstrap-datetimepicker/ để biết tài liệu và các chức năng khác. Điều này sẽ hoạt động.

Cập nhật để hỗ trợ i18n

Sử dụng các định dạng được bản địa hóa của moment.js:

• L chỉ cho ngày
• LT chỉ trong thời gian
• L LT cho ngày và giờ

Xem các định dạng được bản địa hóa khác trong tài liệu moment.js ( https://momentjs.com/docs/#/displaying/format/ )

Tôi đã thử tất cả các giải pháp được đăng ở đây nhưng không có giải pháp nào phù hợp với tôi. Tôi đã quản lý để vô hiệu hóa thời gian bằng cách sử dụng dòng mã này trong jQuery của mình:

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

Điều này đặt định dạng thành chỉ ngày tháng và tắt hoàn toàn thời gian. Hi vọng điêu nay co ich.

Điều này dành cho: Eonasdan's Bootstrap Datetimepicker

Trước hết, tôi sẽ cung cấp một idthuộc tính cho <input>và sau đó khởi tạo bộ chọn ngày trực tiếp cho điều đó <input>(chứ không phải cho vùng chứa mẹ):

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

Đối với v3: Trái ngược với câu trả lời của Ck Maurya :

• pickDate: false sẽ vô hiệu hóa ngày và chỉ cho phép chọn một thời gian
• pickTime: false sẽ vô hiệu hóa thời gian và chỉ cho phép chọn một ngày (đó là những gì bạn muốn).

Đối với v4: Bootstrap Datetimepicker hiện sử dụng định dạng để xác định xem có thành phần thời gian hay không. Nếu không có thành phần thời gian nào, nó sẽ không cho phép bạn chọn thời gian (và ẩn biểu tượng đồng hồ).

Tôi đã dành một thời gian để cố gắng tìm ra điều này do bản cập nhật với DateTimePicker. Bạn sẽ nhập vào một định dạng dựa trên tài liệu moment.js . Bạn có thể sử dụng những gì các câu trả lời khác đã hiển thị:

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

Hoặc bạn có thể sử dụng một số định dạng được bản địa hóa mà moment.js cung cấp để chỉ định ngày, chẳng hạn như:

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

Bằng cách sử dụng này, bạn chỉ có thể hiển thị thời gian ( LT) hoặc ngày ( L) dựa trên ngôn ngữ . Tài liệu về datetimepicker không rõ ràng đối với tôi rằng nó tự động thích ứng với đầu vào được cung cấp (ngày hoặc giờ duy nhất) thông qua moment.jsđịnh dạng. Hy vọng điều này sẽ giúp ích cho những người vẫn đang tìm kiếm.

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

Hãy thử nếu nó cũng phù hợp với bạn

Khởi tạo bộ chọn ngày của bạn như thế này

Cho thời gian vô hiệu hóa

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

Đối với ngày vô hiệu hóa

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

Để tắt cả ngày và giờ

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

vui lòng tham khảo tài liệu sau nếu bạn có bất kỳ nghi ngờ nào

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>

Điều này chỉ hiển thị ngày:

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

Thêm về chủ đề ở đây

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

Tiêu chí bộ chọn bây giờ là một thuộc tính của thẻ DIV.

ví dụ là ...

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

vì vậy ví dụ bootstrap cho dd mm yyyy là: -

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

cài đặt Javascript của tôi như sau: -

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

        $(datePickerId).datetimepicker(picker_settings);

Bạn có thể xem các ví dụ làm việc về những điều này nếu bạn tải xuống tệp bootstrap-datetimepicker-master. Có các thư mục mẫu, mỗi thư mục có một index.html.

Đối với phiên bản bootstrap 4, mã này hoạt động;

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

Tắt thời gian trong bộ chọn ngày giờ trong boostrap ...

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

Tắt ngày trong bộ chọn ngày giờ trong 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>

Điều này cho phép hiển thị thời gian trong trường nhập liệu nhưng ẩn nút bộ chọn thời gian, là phần tử li thứ hai trong đàn accordion

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

Tôi biết điều này là muộn, nhưng câu trả lời chỉ đơn giản là loại bỏ "thời gian" khỏi từ này, datetimepickerđể thay đổi nó thành datepicker. Bạn có thể định dạng nó với dateFormat.

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

Đây là giải pháp cho bạn. Rất dễ dàng chỉ cần thêm mã như sau:

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

Không phải như thời gian và ngôn ngữ bị ngưng trệ tại một thời điểm, tôi đặt điều này và không hoạt động

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