부트 스트랩 날짜 시간 선택기에서 시간 비활성화

PHP / HTML5 및 JavaScript로 만든 웹 애플리케이션에서 부트 스트랩 날짜 시간 선택기를 사용하고 있습니다. 나는 현재 여기에서 하나를 사용하고 있습니다 : http://tarruda.github.io/bootstrap-datetimepicker/

시간없이 컨트롤을 사용하면 작동하지 않습니다. 빈 텍스트 상자 만 표시됩니다.

날짜 시간 선택기에서 시간을 제거하고 싶습니다. 이에 대한 해결책이 있습니까?

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

아래 스 니펫을 확인하십시오.

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

문서 및 기타 기능에 대한 자세한 내용은 http://eonasdan.github.io/bootstrap-datetimepicker/ 를 참조하십시오 . 작동합니다.

i18n 지원 업데이트

moment.js의 현지화 된 형식을 사용합니다.

• L 날짜 만
• LT 시간 만
• L LT 날짜 및 시간

moment.js 문서 ( https://momentjs.com/docs/#/displaying/format/ ) 에서 다른 현지화 된 형식을 참조하십시오.

나는 여기에 게시 된 모든 솔루션을 시도했지만 그중 어느 것도 나를 위해 일하지 않았습니다. 내 jQuery에서 다음 코드 줄을 사용하여 시간을 비활성화 할 수있었습니다.

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

이렇게하면 형식이 날짜로만 설정되고 시간이 완전히 비활성화됩니다. 도움이 되었기를 바랍니다.

이것은 Eonasdan의 Bootstrap Datetimepicker입니다.

우선에 대한 id속성을 제공 한 <input>다음 <input>부모 컨테이너가 아닌 해당 항목에 대해 직접 datetimepicker를 초기화합니다 .

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

v3의 경우 : Ck Maurya 의 답변과 반대 :

• pickDate: false 날짜를 비활성화하고 시간 만 선택할 수 있습니다.
• pickTime: false 시간을 비활성화하고 원하는 날짜 만 선택할 수 있습니다.

v4의 경우 : Bootstrap Datetimepicker는 이제 형식을 사용하여 시간 구성 요소가 있는지 확인합니다. 시간 구성 요소가 없으면 시간을 선택할 수 없으며 시계 아이콘을 숨길 수 없습니다.

와의 업데이트로 인해 이것을 알아 내려고 시간을 보냈습니다 DateTimePicker. moment.js 문서를 기반으로 한 형식으로 입력 합니다 . 다른 답변이 보여준 것을 사용할 수 있습니다.

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

또는 moment.js가 제공하는 현지화 된 형식 중 일부를 사용하여 다음과 같이 날짜 만 수행 할 수도 있습니다.

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

이를 사용하면 로케일에 따라 시간 ( LT) 또는 날짜 ( L) 만 표시 할 수 있습니다. datetimepicker에 대한 문서는 moment.js형식을 통해 제공된 입력 (날짜 또는 시간 만)에 자동으로 적응한다는 것이 명확하지 않았습니다 . 이것이 여전히 찾고있는 사람들에게 도움이되기를 바랍니다.

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

그것이 당신에게도 효과가 있다면 시도하십시오

다음과 같이 datetimepicker를 초기화하십시오.

비활성화 시간

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

비활성화 날짜

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

날짜와 시간을 모두 비활성화하려면

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

의심스러운 점이 있으면 다음 문서를 참조하십시오.

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>

날짜 만 표시됩니다.

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

여기 에서 주제에 대해 더 알아보기

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

선택기 기준은 이제 DIV 태그의 속성입니다.

예는 ...

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

따라서 dd mm yyyy의 부트 스트랩 예는 다음과 같습니다.

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

내 Javascript 설정은 다음과 같습니다.

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

        $(datePickerId).datetimepicker(picker_settings);

bootstrap-datetimepicker-master 파일을 다운로드하면 이러한 작업 예제를 볼 수 있습니다. 각각 index.html이있는 샘플 폴더가 있습니다.

부트 스트랩 4 버전의 경우이 코드가 작동합니다.

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

boostrap datetime 선택기에서 시간 비활성화 ...

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

boostrap datetime 선택기에서 날짜 비활성화 ...

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

이것은 입력 필드에 시간을 표시 할 수 있지만 아코디언의 두 번째 li 요소 인 시간 선택기 버튼을 숨 깁니다.

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

나는 이것이 늦었다는 것을 알고 있지만 대답은 단순히 단어에서 "시간"을 제거 datetimepicker하여 datepicker. 당신은 그것을 포맷 할 수 있습니다 dateFormat.

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

여기 당신을위한 해결책이 있습니다. 다음과 같은 코드를 추가하는 것은 매우 쉽습니다.

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

한 번에 시간과 언어를 미루는 것이 아니라 이것을 놓고 일하지 않습니다.

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