javascript - How to enable date and time picker in Bootstrap-DateTimePicker

I am using this Bootstrap-DateTimePicker with the latest version of 4.17.47.

I read all the documentation options, functions, and events.

I also included all dependencies of JS and CSS.

But something is not working properly somehow.

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

There is an option of format in the documentation about displaying calendar part or time-picker part.

What I want is to display both parts i.e. calendar and time-picker.

But when I set format: 'DD/MM/YYYY' it shows the calendar part properly.

When I set format: 'hh:mm' it shows time-picker properly.

But when I set format:'DD/MM/YYYY hh:mm' to enable both parts, it doesn't show calendar part and only show icon for time-picker and when I click that icon it opens time-picker. This is the same case if I do not set format option explicitly and keep it default to false.

Is there anything I am doing wrong?

I am using this Bootstrap-DateTimePicker with the latest version of 4.17.47.

I read all the documentation options, functions, and events.

I also included all dependencies of JS and CSS.

But something is not working properly somehow.

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

There is an option of format in the documentation about displaying calendar part or time-picker part.

What I want is to display both parts i.e. calendar and time-picker.

But when I set format: 'DD/MM/YYYY' it shows the calendar part properly.

When I set format: 'hh:mm' it shows time-picker properly.

Is there anything I am doing wrong?

Share Improve this question asked Sep 4, 2018 at 6:44 Kalpesh Shingala 3762 gold badges6 silver badges20 bronze badges

1 do you get some error from the console? I've tried with your code and I see it work correctly jsFiddle – nmbrphi Commented Sep 4, 2018 at 8:12
@nmbrphi No, there is no console error. I think you are using an older version of bootstrap and date-time-picker both. Your bootstrap.min,js is of version-3 ,while I am using the version-4. – Kalpesh Shingala Commented Sep 4, 2018 at 8:33
that's probably the problem, this library was developed for bootstrap 3 and I did't see any support or change for bootstrap 4. github project – nmbrphi Commented Sep 4, 2018 at 8:59

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

Currently Bootstrap-DateTimePicker does not support Bootstrap 4. In fact, your code looks fine with Bootstrap 3.

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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to enable date and time picker in Bootstrap-DateTimePicker - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)