Search code examples
jquerytwitter-bootstrap-3bootstrap-datetimepicker

how to implement bootstrap datetimepicker to have a calendat field

I am trying to have a calendar in my form but datetimepicker function is not functioning

<html>
<head>
    <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="./css/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css">
    <link href="./css/style.css" rel="stylesheet" type="text/css">
    <link href="./css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
</head>                          

<body>
    <script src="js/jquery-3.2.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/moment.min.js"></script>
    <script src="js/bootstrap-datetimepicker.min.js"></script>
    <input type="text" id="datetimepicker1" readonly />
    <script type="text/javascript">
        $('#datetimepicker1').datetimepicker({
            format: 'dd/MM/yyyy hh:mm:ss', 
            language: 'pt-BR'
        });
    </script>
</body>
</html>

In the html page I only get an input field. When I check the console it tells me

function datetimepicker not found

Solution

  • Because its probably not loaded yet, try:

    $(function(){
    $('#datetimepicker1').datetimepicker({
        format: 'dd/MM/yyyy hh:mm:ss', 
        language: 'pt-BR'
    });
});