Error opening datapicker bootstrap

Question

Error opening datapicker bootstrap

Navigation

#1 by (0 votes)

0

We recently bought a template from a certain site and among its features comes the datapicker bootstrap as below:

Ijustwanttousethisline:

<divclass="form-control-wrapper">
    <input type="text" id="date" class="form-control floating-label" placeholder="Date">
</div>

The problem is that when I remove the lines below that will not be part of the project:

<div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header"><h5 class="card-header-text">Raised Button</h5></div>
                         <div class="card-block">
                             <div class="row">
                                <div class="col-xl-4">
                                    <input type="checkbox" class="js-dynamic-default" checked />
                                    <input type="checkbox" class="js-dynamic-primary" checked />
                                    <input type="checkbox" class="js-switch" checked />
                                    <input type="checkbox" class="js-dynamic-warning" checked />
                                    <input type="checkbox" class="js-dynamic-danger" checked />
                                    <input type="checkbox" class="js-dynamic-info" checked />
                                    <input type="checkbox" class="js-dynamic-secondary" checked />
                                </div>
                                <div class="col-xl-4">
                                    <input type="checkbox" class="js-dynamic-sm" checked />
                                    <input type="checkbox" class="js-switch" checked />
                                    <input type="checkbox" class="js-dynamic-lg" checked />
                                </div>
                                <div class="col-xl-4">
                                    <input type="checkbox" class="js-dynamic-state" checked />
                                    <button class="btn btn-danger waves-effect waves-light js-dynamic-disable m-l-20 m-r-10">Disable</button>
                                    <button class="btn btn-success waves-effect waves-light m-r-30 js-dynamic-enable">Enable</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

It stops working. I do not know if there is any reference. Anyway, whatever line I take, it stops working. I wiped as much as I could in the code and I stopped like this: See:

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

<head>
    <title>Able Pro Responsive Bootstrap 4 Admin Template by Phoenixcoded</title>
    <!-- HTML5 Shim and Respond.js IE9 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><scriptsrc="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="Phoenixcoded">
    <meta name="keywords" content=", Responsive, Landing, Bootstrap, App, Template, Mobile, iOS, Android, apple, creative app">
    <meta name="author" content="Phoenixcoded">

    <!-- Favicon icon -->
    <link rel="shortcut icon" href="assets/images/favicon.png" type="image/x-icon">
    <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">

    <!-- Google font-->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">

    <!-- Font Awesome -->
    <link href="assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- iconfont -->
    <link rel="stylesheet" type="text/css" href="assets/icon/icofont/css/icofont.css">

    <!-- simple line icon -->
    <link rel="stylesheet" type="text/css" href="assets/icon/simple-line-icons/css/simple-line-icons.css">

    <!-- Required Fremwork -->
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">

    <!-- Date Picker css -->
    <link rel="stylesheet" href="assets/plugins/datepicker/css/bootstrap-material-datetimepicker.css" />

    <!-- Style.css -->
    <link rel="stylesheet" type="text/css" href="assets/css/main.css">  
  <link rel="stylesheet" type="text/css" href="assets/css/responsive.css"> 

    <!--color css-->
 <link rel="stylesheet" type="text/css" href="assets/css/color/color-1.css" id="color"/>

</head>

<body class="horizontal-fixed fixed">
<div class="wrapper">
    <!-- Sidebar chat end-->
    <div class="content-wrapper">
        <!-- Container-fluid starts -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header"><h5 class="card-header-text">Raised Button</h5></div>
                         <div class="card-block">
                             <div class="row">
                                <div class="col-xl-4">
                                    <input type="checkbox" class="js-dynamic-default" checked />
                                    <input type="checkbox" class="js-dynamic-primary" checked />
                                    <input type="checkbox" class="js-switch" checked />
                                    <input type="checkbox" class="js-dynamic-warning" checked />
                                    <input type="checkbox" class="js-dynamic-danger" checked />
                                    <input type="checkbox" class="js-dynamic-info" checked />
                                    <input type="checkbox" class="js-dynamic-secondary" checked />
                                </div>
                                <div class="col-xl-4">
                                    <input type="checkbox" class="js-dynamic-sm" checked />
                                    <input type="checkbox" class="js-switch" checked />
                                    <input type="checkbox" class="js-dynamic-lg" checked />
                                </div>
                                <div class="col-xl-4">
                                    <input type="checkbox" class="js-dynamic-state" checked />
                                    <button class="btn btn-danger waves-effect waves-light js-dynamic-disable m-l-20 m-r-10">Disable</button>
                                    <button class="btn btn-success waves-effect waves-light m-r-30 js-dynamic-enable">Enable</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                        <!-- Row start -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-header-text">Date-Time Widgets</h5>
                        </div>
                        <div class="card-block">
                            <!-- Row start -->
                            <div class="row m-b-30 advance-elements">
                                <div class="col-xl-3">
                                    <!-- <h6 class="sub-title">Date Picker</h6> -->
                                    <!-- end of modal -->
                                    <div class="form-control-wrapper">
                                        <input type="text" id="date" class="form-control floating-label" placeholder="Date">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
     </div>
    </div>
</div>
        <!-- Required Jqurey -->
        <script src="assets/js/jquery-3.1.1.min.js"></script>
        <script src="assets/js/jquery-ui.min.js"></script>
        <script src="assets/js/tether.min.js"></script>

        <!-- Required Fremwork -->
        <script src="assets/js/bootstrap.min.js"></script>

        <!-- Date picker.js -->
        <script src="assets/plugins/datepicker/js/moment-with-locales.min.js"></script>
        <script src="assets/plugins/datepicker/js/bootstrap-material-datetimepicker.js"></script>

        <!-- Select 2 js -->
        <script src="assets/plugins/select2/js/select2.full.min.js"></script>

        <!-- Max-Length js -->
        <script src="assets/plugins/max-length/js/bootstrap-maxlength.js"></script>

        <!-- switchery js -->
        <script type="text/javascript" src="assets/plugins/switchery/js/switchery.min.js"></script>

        <!-- Multi Select js -->
        <script src="assets/plugins/multi-select/js/bootstrap-multiselect.js"></script>
        <script src="assets/plugins/multi-select/js/jquery.multi-select.js"></script>
        <script type="text/javascript" src="assets/plugins/multi-select/js/jquery.quicksearch.js"></script>

        <!-- Tags js -->
        <script src="assets/plugins/tags/js/bootstrap-tagsinput.js"></script>

        <!-- Bootstrap Datepicker js -->
        <script type="text/javascript" src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
        <script src="assets/plugins/bootstrap-datepicker/js/bootstrap-datetimepicker.min.js"></script>

        <!-- bootstrap range picker -->
        <script type="text/javascript" src="assets/plugins/bootstrap-datepicker/js/daterangepicker.js"></script>

        <!-- custom js -->
        <script type="text/javascript" src="assets/js/main.js"></script>
        <script type="text/javascript" src="assets/pages/advance-form.js"></script>
        <script src="assets/js/menu-horizontal.js"></script>
        <script type="text/javascript">SyntaxHighlighter.all();</script>
</body>

</html>

Can someone guide me to identify what is causing this conflict or to indicate another plugin that has the same effect as the image?

jquery

asked by anonymous 02.04.2018 / 20:12

1 answer

Doubts JQuery pagination Application consuming a lot of server resource

score 0 · Answer 1

If you want something simple, but that works, use the jQuery plugin, you can style it too. see more here

$( function() {
    $( "#datepicker" ).datepicker();
  } );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
<p>Date: <input type="text" id="datepicker"></p>