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

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

javascript html twitter-bootstrap

Javascript 在引导日期时间选择器中禁用时间,javascript,html,twitter-bootstrap,Javascript,Html,Twitter Bootstrap,我在我的web应用程序中使用bootstrap日期时间选择器，它是用PHP/HTML5和JavaScript制作的。我目前正在使用一个：当我在没有时间的情况下使用控件时，它不工作。它只显示一个空白文本框我只想从日期时间选择器中删除时间。有什么解决办法吗 <div class="well"> <div id="datetimepicker4" class="input-append"> <input data-format="yyyy-

我在我的web应用程序中使用bootstrap日期时间选择器，它是用PHP/HTML5和JavaScript制作的。我目前正在使用一个：

当我在没有时间的情况下使用控件时，它不工作。它只显示一个空白文本框

我只想从日期时间选择器中删除时间。有什么解决办法吗

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


$（函数（）{
$（'#datetimepicker4'）。datetimepicker（{pickTime:false}）；
});

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

禁用时间

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

禁用日期

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

禁用日期和时间的步骤

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

如果您有任何疑问，请参阅以下文档

检查下面的代码片段

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


$（函数（）{
//引导日期时间选择器v4
$（'#datetimepicker4'）。datetimepicker({
格式：“DD/MM/YYYY”
});
});

有关文档和其他函数的详细信息，请参阅。这应该行得通

更新以支持i18n 使用moment.js的本地化格式：

```
L
```
仅适用于日期
```
LT
```
仅限时间
```
L LT
```
用于日期和时间

请参阅moment.js文档中的其他本地化格式（）

这是为了：

首先，我将为

提供一个

id

属性，然后直接为该

初始化datetimepicker（而不是为父容器）：


$（函数（）{
//引导日期时间选择器v3
$（“#datetimepicker”）.datetimepicker({
拾取时间：错误
});
//引导日期时间选择器v4
$（“#datetimepicker”）.datetimepicker({
格式：“DD/MM/YYYY”
});
});

对于v3：与Ck Maurya的回答相反：

```
pickDate:false
```
将禁用日期并仅允许拾取时间
```
pickTime:false
```
将禁用时间，只允许选择日期（这是您想要的）

对于v4：引导Datetimepicker现在使用该格式确定是否存在时间组件。如果没有时间组件，它将不允许您选择时间（并隐藏时钟图标）。

我尝试了这里发布的所有解决方案，但没有一个对我有效。我在jQuery中使用以下代码行成功禁用了时间：

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

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

不要一次拖延时间和语言我把这个放了，不工作

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

我知道这已经晚了，但答案只是从单词中删除“time”，将其改为

datetimepicker

。您可以使用

dateFormat

对其进行格式化

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

这是给你的解决方案。添加这样的代码非常容易：

    $('#datetimepicker4').datetimepicker({ 

    pickTime: false 

    minview:2;(Please see here.)

    });

由于使用

DateTimePicker

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

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

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

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

使用此功能，您可以。datetimepicker的文档不清楚它是否通过

moment.js

格式自动适应提供的输入（日期或仅时间）。希望这对那些仍在寻找的人有所帮助。

在boostrap datetime选择器中禁用时间

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

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

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

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

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

$（函数（）{
$（'#datetimepicker4'）。datetimepicker（{pickTime:false}）；
});


$（函数（）{
$（“#日期选择器”）.datetimepicker({
格式：“YYYY/MM/DD”
});
});

仅显示日期：

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

有关此主题的更多信息


$（函数（）{
//触发器日期选择器
$（“#datetimepicker”）.datetimepicker({
皮克泰姆：错，
minView:2，
格式：“dd/mm/yyyy”，
自动关闭：是的，
});
});

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

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

选择器条件现在是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>

如果下载引导datetimepicker主文件，您可以看到这些工作示例。有一些示例文件夹，每个文件夹都有一个index.html。

对于Bootstrap4版本，此代码有效

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

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

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

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

var from=$（“input.datepicker”）.datetimepicker({
格式：'Y-m-d'，
时间选择器：错#我写这篇文章迟到了，但我想分享我的经验。
一些人建议下面的代码关闭时间选择器，它确实解决了这个问题
$（'#datetimepicker'）。datetimepicker（{
minView:2，
拾取时间：错误
});

背后的原因我认为他们使用这个库而不是这个库
请显示你正在使用的代码，我们不都是物理的，使用Edit…@Steve我们不都是通灵的，只有我们中的一些人对我来说这个minView:'month'工作了，我不想显示时间选择。我从ir github存储库。您引用的pickDate选项没有记录在您链接到的文档中。关于这个问题，答案是错误的。问题是如何禁用时间，而不是日期。此外，该代码可能仍然无法使用
            var picker_settings = {
                language:  'en',
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0
            };

        $(datePickerId).datetimepicker(picker_settings);

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

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

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