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

时间：2014-04-17 15:48:53

标签： javascript html twitter-bootstrap

我在我的网络应用程序中使用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>

19 个答案:

答案 0 :(得分：119)

检查以下代码段

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

中的其他本地化格式

答案 1 :(得分：40)

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

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

这将格式设置为仅限日期并完全禁用时间。希望这会有所帮助。

答案 2 :(得分：25)

这适用于：Eonasdan's 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现在使用该格式来确定是否存在时间组件。如果没有时间组件，则不允许您选择时间（并隐藏时钟图标）。

答案 3 :(得分：19)

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

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

或者您可以使用一些本地化格式moment.js提供的日期，例如：

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

使用此功能，您可以display only a time (LT) or date (L) based on locale。 datetimepicker的文档对我来说并不清楚，它会通过moment.js格式自动适应所提供的输入（日期或仅时间）。希望这对那些仍在寻找的人有所帮助。

答案 4 :(得分：9)

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

请尝试，如果它也适合你

答案 5 :(得分：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

答案 6 :(得分：5)

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

答案 7 :(得分：3)

这只显示日期：

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

有关此主题的更多信息here

答案 8 :(得分：2)

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

答案 9 :(得分：1)

<script type="text/javascript">
        $(function () {
                  $('#datepicker').datetimepicker({
                     format: 'YYYY/MM/DD'
               });
            });
</script>

答案 10 :(得分：1)

选择标准现在是DIV标记的属性。

例子是...... 

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

所以dd mm yyyy的bootstrap示例是： - 

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

答案 11 :(得分：0)

我迟到了这篇文章，但我想分享我的经验。 有些人建议使用下面的代码关闭时间选择器，它确实解决了问题。

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

我认为他们使用这个库 https://www.malot.fr/bootstrap-datetimepicker/ 而不是这个库 http://eonasdan.github.io/bootstrap-datetimepicker/

的原因

答案 12 :(得分：0)

就我而言，我使用的选项是：

var from = $("input.datepicker").datetimepicker({
  format:'Y-m-d',
  timepicker:false # <- HERE
});

我正在使用此插件https://xdsoft.net/jqplugins/datetimepicker/

答案 13 :(得分：0)

对于bootstrap 4版本，此代码有效； 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smallCatalogBlock comingSoonSmall" data-availability="No">
<img src="https://boygeniusreport.files.wordpress.com/2016/11/puppy-dog.jpg?quality=98&strip=all&w=782" alt="Fastening Technology Catalog">
  <span class="smallCatalogTitle">Technology</span>
  <div class="smallCatalogButtonWrap">
    <div class="catalogSmallCircle"></div>
  </div>
</div>

答案 14 :(得分：0)

这允许在输入字段中显示时间但隐藏时间选择器按钮，这是手风琴中的第二个li元素

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

答案 15 :(得分：0)

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>

答案 16 :(得分：-1)

以下是您的解决方案。 只需添加这样的代码就很容易了：

    $('#datetimepicker4').datetimepicker({ 

    pickTime: false 

    minview:2;(Please see here.)

    });

答案 17 :(得分：-1)

我知道这已经很晚了，但答案只是从单词datetimepicker中删除“时间”，将其更改为datepicker。您可以使用dateFormat格式化它。

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

答案 18 :(得分：-3)

不是一次推迟时间和语言 我把它放在了不行的

$(function () {
    $('#datetimepicker2').datetimepicker({
              locale: 'es',
              pickTime: false
          });
});
相关问题
最新问题