Отключить время в средстве выбора даты начальной загрузки
Я использую bootstrap date time picker в моем веб-приложении, выполненном на 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>
18 ответов:
Проверьте ниже фрагмент
<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
используйте локализованные форматы момента.js:
Lна сегодняшний день толькоLTпо времени толькоL LTдата и времяпосмотреть другие локализованные форматы на данный момент.документация js (https://momentjs.com/docs/#/displaying/format/)
Я пробовал все решения, опубликованные здесь, но никто из них не работал для меня. Мне удалось отключить время, используя эту строку кода в моем jQuery:
$('#datetimepicker4').datetimepicker({ format: 'YYYY-MM-DD' });Это установило формат только на дату и полностью отключило время. Надеюсь, это поможет.
это: Eonasdan'S Bootstrap Datetimepicker
прежде всего я бы предоставил на
<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>для v3: вопреки Ck Maurya'ы ответ:
pickDate: falseотключит дату и только позволит выбрать времяpickTime: falseотключит время и только позволяют выбрать дату (что вы хотите).для v4: Bootstrap Datetimepicker теперь использует формат, чтобы определить, присутствует ли компонент времени. Если компонент времени отсутствует, он не позволит вам выбрать время (и скрыть значок часов).
Я потратил некоторое время, пытаясь понять это из-за обновления с
DateTimePicker. Вы бы ввели в формате, основанном на момент.документация Яш. Вы можете использовать то, что другие ответы показали:$('#datetimepicker').datetimepicker({ format: 'DD/MM/YYYY' });или вы можете использовать некоторые из локализованных форматов момент.js предоставляет сделать только дату, например:
$('#datetimepicker').datetimepicker({locale: 'fr', format: 'L' });используя это, вы можете отображение только времени (
LT) или дата (L), основываясь на локали. Документация для datetimepicker не было ясно мне, что он автоматически адаптируется к входным данным (дата или только время) через . Надеюсь, это поможет тем, кто все еще ищет.
$('#datetimepicker').datetimepicker({ minView: 2, pickTime: false, language: 'pt-BR' });пожалуйста, попробуйте, если это работает для вас, а также
инициализируйте свой datetimepicker вот так
для отключения времени
$(document).ready(function(){ $('#dp3').datetimepicker({ pickTime: false }); });для отключения дата
$(document).ready(function(){ $('#dp3').datetimepicker({ pickDate: false }); });чтобы отключить дату и время
$(document).ready(function(){ $("#dp3").datetimepicker('disable'); });пожалуйста, обратитесь к следующей документации, если у вас есть какие-либо сомнения
<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>
Это показывает только дату:
$('#myDateTimePicker').datetimepicker({ format: 'dd.mm.yyyy', minView: 2, maxView: 4, autoclose: true });еще по теме здесь
$(function () { $('#datetimepicker9').datetimepicker({ viewMode: 'years', format: 'DD/MM/YYYY' /*Add this line to remove time format*/ }); });
<script type="text/javascript"> $(function () { $('#datepicker').datetimepicker({ format: 'YYYY/MM/DD' }); }); </script>
критерий селектора теперь является атрибутом тега 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. Есть примеры папок, каждая из которых имеет индекс.формат html.
отключить время в Boostrap datetime picker...
$(document).ready(function () { $('.timepicker').datetimepicker({ format: "dd-mm-yy", }); });отключить дату в boostrap datetime picker...
$(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>
Это позволяет отображать время в поле ввода, но скрывает кнопку выбора времени, которая является второй элемент li в Баян
.bootstrap-datetimepicker-widget .list-unstyled li:nth-child(2){ display: none; }
Я знаю, что это поздно, но ответ просто удаляя "время" от слова
datetimepickerизменить наdatepicker. Вы можете отформатировать его с помощьюdateFormat.jQuery( "#datetimepicker4" ).datepicker({ dateFormat: "MM dd, yy", });
вот решение для вас. Очень легко просто добавить такой код:
$('#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 }); });
Comments