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

Posted 2023-02-22

技术标签:

【中文标题】在引导日期时间选择器中禁用时间【英文标题】：Disable time in bootstrap date time picker 【发布时间】：2014-06-01 23:53:00 【问题描述】：

我在我的 Web 应用程序中使用引导日期时间选择器，它是用 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>

【问题讨论】：

请出示您使用的代码，我们不都是物理的使用编辑添加有问题的代码... @Steve 我们并不都是通灵者，只有我们中的一些人是 xD 对我来说这个minView:'month' 有效，我不想显示时间选择。我从他们的 github 存储库中得到了帮助。 github.com/smalot/bootstrap-datetimepicker/issues/… 【参考方案1】：

检查下面的sn-p

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

【讨论】：

您引用的 pickDate 选项未记录在您链接到的文档中。这个问题的答案是错误的。问题是如何禁用时间，而不是日期。此外，该代码可能仍然无法工作，因为它将日期选择器附加到父 div（也许库会处理这个并搜索 <input>-sub-elements） pickDate 和 pickTime 已在 Eonasdan 的 Bootstrap Datetimepicker 的当前版本中删除。请改用格式。这是错误的，设置格式会破坏国际化【参考方案2】：

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

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

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

【讨论】：

在此页面上的所有解决方案中，这是唯一对我有用的解决方案。使用 v4.7.14 的 bootstrap-datetimepicker 库。为了避免混淆，因为似乎有一些名称相似的日期时间选择器，我会指出这对我来说适用于这个特定的插件：eonasdan.github.io/bootstrap-datetimepicker 谢谢，这对我有用，但是，我的表单仍然显示切换到时间选择器的图标，它允许您切换，然后显示 00:00。它不会更改随表单提交的内容，但是有没有办法删除时钟图标，以便用户无法访问表单的时间选择器部分？再次感谢！您必须使用不同版本的 DateTimePicker，因为我的时间图标消失了。【参考方案3】：

这是给：Eonasdan's Bootstrap Datetimepicker

首先我会为<input> 提供一个id 属性，然后直接为<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 现在使用该格式来确定是否存在时间组件。如果不存在时间组件，它不会让您选择时间（并隐藏时钟图标）。

【讨论】：

为什么这被否决了？这是唯一正确解释插件选项在最新版本中已更改的答案。如果这是最佳答案，本可以为我节省几分钟的困惑。奇怪的是，它必须是大写日期才能工作是的，这就是 Javascript 中指定日期格式的方式（与 Java 中定义日期/时间格式的方式相反）。我也花了一些时间来弄清楚这一点。谢谢，这对我有用，但是，我的表单仍然显示切换到时间选择器的图标，它允许您切换，然后显示 00:00。它不会更改随表单提交的内容，但是有没有办法删除时钟图标，以便用户无法访问表单的时间选择器部分？再次感谢！ jackerman09，请注意您使用的 datetimepicker 版本。所描述的行为适用于 Eonasdan 的 datetimepicker v3、v4。如果您使用的是最新的（您应该这样做），那么格式中没有时间组件将自动删除时钟图标。并且请不要对多个答案发表相同的评论...这表明缺乏动力...【参考方案4】：

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

如果它也适合你，请尝试

【讨论】：

像魅力一样工作 :) 非常感谢。请问什么是minView设置？如果没有此设置，则会显示时间。我不知道，但我也有这个问题，它解决了这个代码。你的观点是对的，更多内容在这里：github.com/smalot/bootstrap-datetimepicker/issues/416。完美！为了不破坏语言环境，请使用：$('#datetimepicker').datetimepicker( minView: 2, pickTime: false, language: 'pt-BR' ); 你在使用这个库吗？ malot.fr/bootstrap-datetimepicker【参考方案5】：

由于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 格式提供的输入（日期或唯一时间）。希望这对仍在寻找的人有所帮助。

【讨论】：

这是最好的答案，因为它包括依赖于语言环境的格式，而不是“硬编码”格式。【参考方案6】：

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

像这样初始化你的日期时间选择器

禁用时间

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

【讨论】：

【参考方案8】：

这仅显示日期：

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

更多关于主题here

【讨论】：

【参考方案9】：

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

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

【讨论】：

【参考方案10】：

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

【讨论】：

【参考方案11】：

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

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

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

【讨论】：

【参考方案12】：

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>

【讨论】：

【参考方案13】：

选择器标准现在是 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。

【讨论】：

【参考方案14】：

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

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

【讨论】：

我不知道你为什么不同意我的评论，德米特里，因为它实际上回答了发帖人的问题。存在各种 dateFormats 的事实与问题无关，此处仅作为示例显示。【参考方案15】：

在 boostrap 日期时间选择器中禁用时间...

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

在 boostrap 日期时间选择器中禁用日期...

   $(document).ready(function () 
        $('.timepicker').datetimepicker(
            format: "HH:mm A",
        );
    );

【讨论】：

【参考方案16】：

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

【讨论】：

【参考方案17】：

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

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

【讨论】：

【参考方案18】：

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

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

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

【讨论】：

【参考方案19】：

这里有适合您的解决方案。只需添加如下代码非常容易：

    $('#datetimepicker4').datetimepicker( 

    pickTime: false 

    minview:2;(Please see here.)

    );

【讨论】：

【参考方案20】：

 $("#datetimepicker4").datepicker(
    dateFormat: 'mm/dd/yy',
    changeMonth: true,
    changeYear: true,
    showOtherMonths: true,
    selectOtherMonths: true,
    pickTime: false,
    format: 'YYYY-MM-DD'
);

【讨论】：

【参考方案21】：

不像一次拖延时间和语言我放了这个不行

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

【讨论】：

很难从你的回答中获得灵感。

以上是关于在引导日期时间选择器中禁用时间的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Twitter 引导日期选择器中禁用结束日期范围？

在引导程序日期选择器中禁用日期的自动格式化

在引导日期选择器中启用特定日期

如何使用引导模式更新引导日期时间选择器中的默认日期

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

如何在引导日期选择器中突出显示特定日期？