1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Select & DatePicker

Alfian Firdaus free asked 8 years ago

Hi there, I still struggling with this issues for more than 2 weeks. I can't use the Select and DatePicker. I already insert the Initialization before </body> This is the trigger file >> https://kerjabilitas.com/v2/main_page/modal-register2-trigger.php 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="../img/Icon.png"/>
    <title>S.O.S</title>
    <!-- Material Design Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/mdb.css" rel="stylesheet">
    <script src="../js/material.js"></script>

    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <!-- Material Design Bootstrap -->
    <script type="text/javascript" src="../js/mdb.js"></script>
</head>
<body>

<?php include '../popup_main/modal-register2en.html' ?>

<br/><br/>

<div class="col-lg-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
    <a href="" class="btn btn-danger btn-flat waves-effect waves-light" data-toggle="modal" data-target="#modal-register2en" style="padding-top: 10px; padding-bottom: 10px">DAFTAR</a>
</div>

<script>
    $(document).ready(function () {
        $('select').material_select();
    });
</script>

<script> $('.datepicker').pickadate({
        selectMonths: true, // Creates a dropdown to control month
        selectYears: 15 // Creates a dropdown of 15 years to control year
    });</script>

</body>
</html>
This is the modal 
<!-- Modal -->
<div class="modal fade" id="modal-register2en" role="dialog">
    <div class="modal-dialog modal-lg">

        <!-- Modal content-->
        <div class="modal-content" style="padding: 20px">

            <!--Body-->
            <div class="modal-body"><br/>
                <div class="row" style="padding-left: 15px; padding-right: 15px">                   
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 no-padding">
                            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6" style="padding: 10px">
                                <b>Start Date</b>
                                <input type="date" class="datepicker">
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6" style="padding: 10px">
                                <b>Finish Date</b>
                                <input type="date" class="date">
                            </div>
                        </div>

                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-padding">
                            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6" style="padding: 10px">
                                <b>I Live in</b>
                                <select class="form-control">
                                    <option value="" disabled selected>Choose Province</option>
                                    <option value="1">Option 1</option>                                    
                                </select>
                            </div>
                        </div>

                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-padding">
                            <br/>
                            <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6 col-xs-offset-0 col-sm-offset-1 col-md-offset-2 col-lg-offset-3">
                                <button type="submit" class="btn btn-danger btn-flat btn-block btn-lg waves-effect waves-light">FINISH</button>
                                <br/>&nbsp;
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!--/.Body-->
        </div>
    </div>
</div>
<!--/.Modal-->
<!--/.GitHub Test-->

Michal Szymanski staff answered 7 years ago

Send me please your files, I'll check what's wrong, because the code I paste here works fine for me. m.szymanski@mdbootstrap.com

Alfian Firdaus free answered 7 years ago

Thanks for reply... you can check the result here : https://kerjabilitas.com/v2/personal/modal-register2-trigger.php Now, at least I need the Select work properly.

Michal Szymanski staff answered 7 years ago

Alright, if you use MDB3 that changes everything. I should ask about that before. That code should work for you: 
<body>

    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">

                    <input type="date" class="datepicker">

                    <div class="row">
                        <div class="col-md-5">
                            <select>
                                <option value="" disabled selected>Choose your option</option>
                                <option value="1">Option 1</option>
                                <option value="2">Option 2</option>
                                <option value="3">Option 3</option>
                            </select>
                        </div>
                    </div>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque quos vel temporibus cum placeat repudiandae omnis esse id nostrum unde similique soluta quisquam quis, possimus labore tempore recusandae illum nam.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque quos vel temporibus cum placeat repudiandae omnis esse id nostrum unde similique soluta quisquam quis, possimus labore tempore recusandae illum nam.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque quos vel temporibus cum placeat repudiandae omnis esse id nostrum unde similique soluta quisquam quis, possimus labore tempore recusandae illum nam.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

    <!-- SCRIPTS -->

    <!-- JQuery -->
    <script type="text/javascript" src="js/jquery.min.js"></script>

    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <!-- Material Design Bootstrap -->
    <script type="text/javascript" src="js/mdb.js"></script>

    <script>
        $('.datepicker').pickadate({
            selectMonths: true, // Creates a dropdown to control month
            selectYears: 15 // Creates a dropdown of 15 years to control year
        });

        $('select').material_select();
    </script>

</body>

Alfian Firdaus free answered 7 years ago

I have try it, but still not working, is it because I can't find js/jquery-2.2.3.min.js, js/tether.min.js & js/cookies.js ? Note : I use MDB3

Michal Szymanski staff answered 7 years ago

Try this way: 
<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Material Design Bootstrap Template</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Material Design Bootstrap -->
    <link href="css/mdb.css" rel="stylesheet">

</head>

<body>

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <!--Content-->
            <div class="modal-content">
                <!--Header-->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <!--Body-->
                <div class="modal-body">

                    <div class="md-form">
                        <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
                    </div>

                    <select class="mdb-select">
                        <option value="" disabled selected>Choose your option</option>
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                        <option value="3">Option 3</option>
                    </select>

                    <br>
                    <br>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit deleniti numquam atque impedit adipisci nisi deserunt necessitatibus voluptas facere commodi, facilis. Dignissimos provident ea ex iure, molestiae obcaecati facere quisquam.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit deleniti numquam atque impedit adipisci nisi deserunt necessitatibus voluptas facere commodi, facilis. Dignissimos provident ea ex iure, molestiae obcaecati facere quisquam.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit deleniti numquam atque impedit adipisci nisi deserunt necessitatibus voluptas facere commodi, facilis. Dignissimos provident ea ex iure, molestiae obcaecati facere quisquam.</p>

                </div>
                <!--Footer-->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
            <!--/.Content-->
        </div>
    </div>
    <!-- /.Live preview-->

    <!-- SCRIPTS -->

    <!-- JQuery -->
    <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>

    <!-- Tooltips -->
    <script type="text/javascript" src="js/tether.min.js"></script>

    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="js/mdb.js"></script>

    <script type="text/javascript" src="js/cookies.js"></script>

    <script>
        $(document).ready(function () {
            $('.datepicker').pickadate();

            $('.mdb-select').material_select();
        });
    </script>

</body>
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
Alfian Firdaus
14Support score
8Questions 7Answers 0Snippets