Как включить средство выбора даты и времени в Bootstrap-DateTimePicker

Я использую этот Bootstrap-DateTimePicker с последней версией 4.17.47.

Я прочитал все параметры документации, функции и события.

Я также включил все зависимости JS и CSS.

Но что-то как-то не так работает.

<!doctype html>
<html lang="en">

<head>
    <script type="text/javascript" src="./jquery.min.js"></script>
    <script type="text/javascript" src="./moment.js"></script>
    <script type="text/javascript" src="./bootstrap.min.js"></script>
    <script type="text/javascript" src="./bootstrap-datetimepicker.min.js"></script>
    <link rel="stylesheet" href="./bootstrap.min.css" />
    <link rel="stylesheet" href="./bootstrap-datetimepicker.min.css" />
</head>

<body>
    <div class="container">
        <div class="row">
            <div class='col-sm-6'>
                <input type='text' class="form-control" id='datetimepicker4' />
            </div>
            <script type="text/javascript">
                $(function () {
                    $('#datetimepicker4').datetimepicker({
                        format: 'DD/MM/YYYY hh:mm',
                    });
                });
            </script>
        </div>
    </div>
</body>

</html>

В документации есть опция format для отображения части календаря или части выбора времени.

Я хочу отображать обе части, то есть календарь и средство выбора времени.

Но когда я устанавливаю format: 'DD/MM/YYYY', он правильно отображает часть календаря.

Когда я устанавливаю format: 'hh:mm', он правильно показывает время.

Но когда я устанавливаю format:'DD/MM/YYYY hh:mm' для включения обеих частей, он не показывает часть календаря, а показывает только значок для выбора времени, и когда я нажимаю на этот значок, он открывает окно выбора времени. Это тот же случай, если я не устанавливаю параметр format явно и оставляю его по умолчанию равным false.

Есть ли что-то, что я делаю неправильно?


javascript bootstrap-datetimepicker eonasdan-datetimepicker
person Kalpesh Shingala    schedule 04.09.2018    source источник
comment
вы получаете какую-то ошибку из консоли? Я попробовал ваш код и вижу, что он работает правильно jsFiddle   -  person nmbrphi    schedule 04.09.2018
comment
@nmbrphi Нет, ошибки консоли нет. Я думаю, что вы используете более старую версию бутстрапа и средства выбора даты и времени. Ваш bootstrap.min,js имеет версию 3, а я использую версию 4.   -  person Kalpesh Shingala    schedule 04.09.2018
comment
это, вероятно, проблема, эта библиотека была разработана для начальной загрузки 3, и я не видел никакой поддержки или изменений для начальной загрузки 4. проект на гитхабе   -  person nmbrphi    schedule 04.09.2018

Ответы (1)


arrow_upward
4
arrow_downward

В настоящее время Bootstrap-DateTimePicker не поддерживает Bootstrap 4. На самом деле ваш код отлично выглядит с Bootstrap 3.

<!doctype html>
<html lang="en">

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class='col-sm-6'>
                <input type='text' class="form-control" id='datetimepicker4' />
            </div>
            <script type="text/javascript">
                $(function () {
                    $('#datetimepicker4').datetimepicker({
                        format: 'DD/MM/YYYY hh:mm',
                    });
                });
            </script>
        </div>
    </div>
</body>

</html>

person nmbrphi    schedule 04.09.2018