Error opening the bootstrap datapicker

Asked

Viewed 48 times

0

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

inserir a descrição da imagem aqui

I just want to use that line:

<div class="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 don’t know if there’s any reference. Anyway, whatever line I take, it stops working. I wiped out as much as I could in the code and stopped like this: Look:

<!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>
    <script src="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 indicate me another plugin that does the same effect as the image?

jquery
  • 1

    Good afternoon. Why you want to remove lines from the code?

  • 1

    But what did you want to change? What do you want?

  • I made an adjustment in the post. Really had become vague my doubt.

  • 1

    This is complicated because in some part of a script like this it may be using the code you want to delete... for example, counting or checking an element of this code, and the other part of the code depends on it... that is, if it is empty, the script causes error. If you don’t find a solution, you’ll have to appeal to the police, putting display: none in the div just to hide it from the page.

  • Hello dvd. I did as suggested and worked. Thanks again.

1 answer

0

If you want something simple, but it works, use the plugin jQuery, has how to 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>
<link rel="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>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
<p>Date: <input type="text" id="datepicker"></p>

  • Hello Leandro. Actually I would like to use as per the image. I made as the dvd suggested and worked. Thank you.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.