Отключить время в начальной загрузке даты и времени

82

В моем веб-приложении, используемом в PHP/HTML5 и JavaScript, я использую bootstrap date time picker. В настоящее время я использую один из них: 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>
  • 4
    Пожалуйста, покажите код, который вы используете, мы не все физики
  • 1
    Добавьте нужный код, используя Edit ...
Показать ещё 1 комментарий

18 ответов

106
Лучший ответ

Проверьте приведенный ниже фрагмент

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

  • 0
    Опция pickDate, которую вы цитируете, не документирована в документации, на которую вы ссылаетесь.
  • 2
    Ответ неправильный в отношении вопроса. Вопрос был в том, как отключить время, а не дату. Кроме того, этот код, вероятно, все еще не будет работать, так как он прикрепляет указатель даты к родительскому элементу div (возможно, библиотека обрабатывает это и ищет <input> -sub-elements)
Показать ещё 5 комментариев
40

Я пробовал все решения, размещенные здесь, но ни один из них не работал у меня. Мне удалось отключить время, используя эту строку кода в моем jQuery:

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

Это задает формат только по дате и полностью отключает время. Надеюсь, это поможет.

  • 5
    Из всех решений на этой странице это единственное, которое сработало для меня. Использование v4.7.14 из библиотеки bootstrap-datetimepicker.
  • 2
    Просто для того, чтобы избежать путаницы, так как, похоже, есть несколько схожих по названию сборщиков даты и времени, я укажу , что это сработало для меня для этого конкретного плагина: eonasdan.github.io/bootstrap-datetimepicker
Показать ещё 3 комментария
24

Это для: Eonasdan Bootstrap Datetimepicker

Прежде всего, я бы предоставил атрибут id для <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 теперь использует формат, чтобы определить, присутствует ли компонент времени. Если компонент времени отсутствует, он не позволит вам выбрать время (и скрыть значок часов).

  • 0
    Почему это было отклонено? Это единственный ответ, который правильно объясняет, что опция плагина изменилась в последней версии. Я бы сэкономил несколько минут путаницы, если бы это был лучший ответ.
  • 1
    Странно, но для того, чтобы это работало, это должна быть КАПИТАЛЬНАЯ дата
Показать ещё 3 комментария
19

Я потратил некоторое время, пытаясь понять это из-за обновления с помощью DateTimePicker. Вы входите в формат, основанный на документации moment.js. Вы можете использовать другие ответы:

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

Или вы можете использовать некоторые локализованные форматы. moment.js позволяет делать только дату, например:

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

Используя это, вы можете отображать только время (LT) или дату (L) на основе языкового стандарта. Документация для datetimepicker не ясна для меня, что она автоматически адаптируется к предоставленному вводом (дате или только времени) через формат moment.js. Надеюсь, это поможет тем, кто все еще смотрит.

  • 4
    Это лучший ответ, потому что он включает формат, зависящий от локали, а не «жесткое кодирование» формата.
8
$('#datetimepicker').datetimepicker({ 
    minView: 2, 
    pickTime: false, 
    language: 'pt-BR' 
});

Попробуйте, если это сработает и для вас

  • 0
    Работает как шарм :) Большое спасибо. Могу я спросить, что такое настройка minView? Без этой настройки показывается время.
  • 0
    я не знаю, но у меня также есть эта проблема и ее решение для этого кода.
Показать ещё 2 комментария
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

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

Показывает только дату:

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

Подробнее о теме здесь

2
    $(function () {
        $('#datetimepicker9').datetimepicker({
            viewMode: 'years',
            format: 'DD/MM/YYYY' /*Add this line to remove time format*/
        });
    });
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: -

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

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

Это позволяет отображать время в поле ввода, но скрывает кнопку выбора времени, которая является вторым элементом li в аккордеоне

.bootstrap-datetimepicker-widget .list-unstyled li:nth-child(2){
    display: none;
}
0
your same code work 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>
0

Отключить время в сборщике datetime для сбора данных...

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

Отключить дату в сборщике datetime для сбора данных...

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

Вот решение для вас. Очень просто добавить код следующим образом:

    $('#datetimepicker4').datetimepicker({ 

    pickTime: false 

    minview:2;(Please see here.)

    }); 
-1

Я знаю, что это поздно, но ответ просто удаляет "время" из слова datetimepicker, чтобы изменить его на datepicker. Вы можете отформатировать его с помощью dateFormat.

      jQuery( "#datetimepicker4" ).datepicker({
        dateFormat: "MM dd, yy",
      });
  • 0
    Я не уверен, почему вы отказались от моего комментария, Дмитрий, потому что на самом деле он отвечает на вопрос автора. Тот факт, что существуют различные форматы даты, не имеет отношения к вопросу и показан здесь только в качестве примера.
-2
 $("#datetimepicker4").datepicker({
    dateFormat: 'mm/dd/yy',
    changeMonth: true,
    changeYear: true,
    showOtherMonths: true,
    selectOtherMonths: true,
    pickTime: false,
    format: 'YYYY-MM-DD'
});
-2

Не как время от времени и язык Я положил это и не работал.

$(function () {
    $('#datetimepicker2').datetimepicker({
              locale: 'es',
              pickTime: false
          });
});
  • 2
    получить представление о вашем ответе будет сложно.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню