在引导日期时间选择器中禁用时间

Question

我在我的Web应用程序中使用bootstrap日期时间选择器,用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>

Answer 1

请查看以下代码段

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

Answer 2

我尝试了这里发布的所有解决方案,但没有一个适合我.我设法通过在我的jQuery中使用这行代码来禁用时间:

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

这将格式设置为仅限日期并完全禁用时间.希望这可以帮助.

Answer 3

这是为了:Eonasdan的Bootstrap Datetimepicker

首先,我将提供一个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>

对于第3版:与Ck Maurya的答案相反:

• pickDate: false 将禁用日期,只允许选择时间
• pickTime: false 将禁用时间,只允许选择一个日期(这是你想要的).

对于v4:Bootstrap Datetimepicker现在使用该格式来确定是否存在时间组件.如果没有时间组件,则不允许您选择时间(并隐藏时钟图标).

Answer 4

由于更新,我花了一些时间试图解决这个问题DateTimePicker.您可以输入基于moment.js文档的格式.您可以使用其他答案显示的内容:

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

或者您可以使用moment.js提供的一些本地化格式来执行日期,例如:

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

使用此功能,您只能根据区域设置显示time(LT)或date(L).datetimepicker的文档对我来说并不清楚,它会通过moment.js格式自动适应所提供的输入(日期或时间).希望这对仍在寻找的人有所帮助.

Answer 5

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

请尝试它是否适合您

Answer 6

像这样初始化你的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

Answer 7

这仅显示日期：

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

更多关于这里的主题

Answer 8

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