在引导date时间select器中禁用时间
我在我的web应用程序中使用引导date时间select器，使用PHP / HTML5和JavaScript。 我目前正在使用从这里： http : //tarruda.github.io/bootstrap-datetimepicker/
当我没有时间使用控件时，它不起作用。 它只是显示一个空白的文本框。
我只是想从date时间select器中删除时间。 有没有解决scheme？
<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 $('#datetimepicker').datetimepicker({ format: 'DD/MM/YYYY' }); }); </script> </div>
您可以参考http://eonasdan.github.io/bootstrap-datetimepicker/获取文档和其他function的详细信息。; 这应该工作。
我尝试了所有在这里发布的解决scheme，但没有一个为我工作。 我设法通过在我的jQuery中使用这一行代码来禁用时间：
$('#datetimepicker4').datetimepicker({ format: 'YYYY-MM-DD' });
这将格式设置为仅限date并完全禁用时间。 希望这可以帮助。
这是用于： Eonasdan的Bootstrap Datetimepicker
首先，我会为<input>提供一个id属性，然后直接为<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将禁用date，只允许select一个时间 -
pickTime: false将禁用时间，只允许select一个date（这是你想要的）。
对于v4：引导Datetimepicker现在使用该格式来确定是否存在时间成分。 如果没有时间组件，它不会让你select一个时间（并隐藏时钟图标）。
我花了一些时间试图解决这个问题，因为DateTimePicker的更新。 您将input基于moment.js文档的格式。 你可以使用其他的答案显示：
$('#datetimepicker').datetimepicker({ format: 'DD/MM/YYYY' });
或者你可以使用一些本地化的格式，moment.js提供的只是一个date，比如：
$('#datetimepicker').datetimepicker({locale: 'fr', format: 'L' });
使用此function， 只能根据语言环境显示时间（ LT ）或date（ L ） 。 datetimepicker的文档不是很清楚，它可以通过moment.js格式自动适应提供的input（date或时间）。 希望这有助于那些仍在寻找。
像这样初始化你的datetimepicker
禁用时间
$(document).ready(function(){ $('#dp3').datetimepicker({ pickTime: false }); });
禁用date
$(document).ready(function(){ $('#dp3').datetimepicker({ pickDate: false }); });
禁用date和时间
$(document).ready(function(){ $("#dp3").datetimepicker('disable'); });
如果您有任何疑问，请参阅以下文件
$('#datetimepicker').datetimepicker({ minView: 2, pickTime: false, });
请尝试，如果它适合你
<script type="text/javascript"> $(function () { $('#datepicker').datetimepicker({ format: 'YYYY/MM/DD' }); }); </script>
这只显示date：
$('#myDateTimePicker').datetimepicker({ format: 'dd.mm.yyyy', minView: 2, maxView: 4, autoclose: true });
更多关于这个问题
在boostrap datetimeselect器中禁用时间…
$(document).ready(function () { $('.timepicker').datetimepicker({ format: "dd-mm-yy", }); });
在boostrap datetimeselect器中禁用date…
$(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>
<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>
这允许在input字段中显示时间，但隐藏时间select器button，这是手风琴中的第二个元素
.bootstrap-datetimepicker-widget .list-unstyled li:nth-child(2){ display: none; }
select器标准现在是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。
我知道这是迟到，但答案是简单地从单词中删除“时间”， datetimepicker将其更改为datepicker 。 你可以用dateFormat格式化它。
jQuery( "#datetimepicker4" ).datepicker({ dateFormat: "MM dd, yy", });
这是你的解决scheme。 只需添加如下代码非常简单：
$('#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 }); });
