Main panel, select and date picker

Step 1 - sections

First, let's begin with a bit of theory.

There are plenty of different ways of keeping order in a project.

I prefer to keep it strictly structured. That means:

1. We divide the document into 3 main parts: header (for navigation), main (for content) and footer (for additional information and links).

2. The content within the main we divide into sections, which we use for big blocks of code.

3. Within a section, we use divs to divide a code into smaller blocks of code.

The schema looks like this:

core layout ( header, main, footer) > section > div

Now let's divide main into 4 sections:

HTML



<!--Main layout-->
<main>
  <div class="container-fluid">

      <!--Section: Modals-->
      <section>



      </section>
      <!--Section: Modals-->

      <!--Section: Main panel-->
      <section class="mb-5">



      </section>
      <!--Section: Main panel-->

      <!--Section: Table-->
      <section class="mb-5">



      </section>
      <!--Section: Table-->

      <!--Section: Accordion-->
      <section class="mb-5">



      </section>
      <!--Section: Accordion-->

  </div>
</main>
<!--Main layout-->

Note: We've also added container-fluid to provide a proper construction for any grids we'll use in the further steps.

Step 2 - main panel

The main panel is an element dedicated for charts and their settings.

However, before we use any specific components, we have to prepare the panel itself.

We'll change the main panel section into a card. Add these classes to the element:

HTML



<!--Section: Main panel-->
<section class="card card-cascade narrower mb-5">

Then add a grid with a single row and two columns within:

HTML



<!--Section: Main panel-->
<section class="card card-cascade narrower mb-5">

  <!--Grid row-->
  <div class="row">

  <!--Grid column-->
  <div class="col-md-5">



  </div>
  <!--Grid column-->

  <!--Grid column-->
  <div class="col-md-7">



  </div>
  <!--Grid column-->

  </div>
  <!--Grid row-->

</section>
<!--Section: Main panel-->

Within the first column we'll add a cascading header and body with another grid inside:

HTML



<!--Grid column-->
<div class="col-md-5">

  <!--Panel Header-->
  <div class="view view-cascade py-3 gradient-card-header info-color-dark">
      <h5 class="mb-0">Sales</h5>
  </div>
  <!--/Panel Header-->

  <!--Panel content-->
  <div class="card-body">

      <!--Grid row-->
      <div class="row">

          <!--Grid column-->
          <div class="col-md-6 mb-4">



          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-md-6 mb-4 text-center">



          </div>
          <!--Grid column-->

      </div>
      <!--Grid row-->

  </div>
  <!--Panel content-->

</div>
<!--Grid column-->

Step 3 - select

To the first column of card-body add the following code:

HTML



<!--Date select-->
<p class="lead">
  <span class="badge info-color-dark p-2">Date range</span>
</p>
<select class="mdb-select colorful-select dropdown-info">
  <option value="" disabled>Choose time period</option>
  <option value="1">Today</option>
  <option value="2">Yesterday</option>
  <option value="3">Last 7 days</option>
  <option value="3">Last 30 days</option>
  <option value="3">Last week</option>
  <option value="3">Last month</option>
</select>

After saving the file you will notice nothing has happened. That's because we have to initialize the select.

In the script section, below the SideNav initialization, paste the code ( it is similar to the SideNav initialization):

JavaScript



// Material Select Initialization
$(document).ready(function () {
$('.mdb-select').material_select();
});

Now it works!

To learn more about MDB Select have a look at our Select documentation.

Step 4 - datepicker

Select allows the user to choose a predefined date range.

We'll use Datepickers to let the user choose completely custom dates (which is useful if predefined ranges don't suit him).

Below the Select place the following code:

HTML



<!--Date pickers-->
<p class="lead my-4">
  <span class="badge info-color-dark p-2">Custom date</span>
</p>
<div class="md-form">
  <input placeholder="Selected date" type="text" id="from" class="form-control datepicker">
  <label for="from">From</label>
</div>
<div class="md-form">
  <input placeholder="Selected date" type="text" id="to" class="form-control datepicker">
  <label for="to">To</label>
</div>

Datepickers have to be initialized as well. Below Select initialization, paste this code:

JavaScript



// Data Picker Initialization
$('.datepicker').pickadate();

Save the file and you will notice datepickers work as expected.

Datepicker is a component with plenty of options. To learn more have a look at ouur Datepicker documentation.

You can also check its twin component - Timepicker .

Rate this lesson

Previous lesson Live preview Next lesson

Spread the word:

Do you need help? Use our support forum

About the author

1. Navigation and full-page background image 2. Masks and flexbox 3. Flexbox advanced options 4. Sections, icons and typography 5. Hover effect, waves effect and shadows 6. Carousel (slider / gallery) 7. Contact section and inputs / forms 8. Google Maps 9. Footer advanced options 10. Navbar advanced options

Main panel, select and date picker

Michal Szymanski

Introduction

Corporate website

Landing page

Admin dashboard

Gulp & customization

Portfolio