ปิดใช้งานเวลาในตัวเลือกวันที่เวลาบูตสแตรป

ฉันใช้ตัวเลือกวันที่เวลาบูตสแตรปในเว็บแอปพลิเคชันของฉันซึ่งสร้างใน 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'
});

ตั้งค่ารูปแบบเป็นวันที่เท่านั้นและปิดใช้งานเวลาอย่างสมบูรณ์ หวังว่านี่จะช่วยได้

สิ่งนี้มีไว้สำหรับ: Bootstrap Datetimepicker ของ Eonasdan

ก่อนอื่นฉันจะระบุidแอตทริบิวต์สำหรับ<input>และจากนั้นเริ่มต้น datetimepicker โดยตรงสำหรับสิ่งนั้น<input>(ไม่ใช่สำหรับคอนเทนเนอร์หลัก):

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

ดังนั้นตัวอย่าง bootstrap สำหรับ 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

สำหรับ bootstrap 4 รุ่นรหัสนี้ทำงาน;

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

ปิดใช้งานเวลาในตัวเลือกวันที่และเวลาของ boostrap ...

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

ปิดการใช้งานวันที่ในตัวเลือกวันที่และเวลาของ 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>

สิ่งนี้อนุญาตให้แสดงเวลาในช่องป้อนข้อมูล แต่ซ่อนปุ่มตัวเลือกเวลาซึ่งเป็นองค์ประกอบที่สองในหีบเพลง

.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
          });
});