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

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

0 голосов
/ 04 сентября 2018

Я использую 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: 'DD/MM/YYYY', он правильно показывает часть календаря.

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

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

Есть что-то, что я делаю не так?

1 Ответ

0 голосов
/ 04 сентября 2018

В настоящее время 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>
...