MDB Pro Date picker

Topic: MDB Pro Date picker

Buzby58 priority asked 3 years ago

I suspect this is probably finger trouble my end - no matter what I try I can't get the datepicker to work (MDB Pro 5) in an html page.

Does anyone have a link to a page that shows the complete set up for a datepicker?

Thanks in advance!

Grant

Arkadiusz Idzikowski staff commented 3 years ago

Please provide more information about your configuration and the code you used when trying to add the component on the page.

Did you follow our installation guide and copied the datepicker code from the documentation?

You can find the datepicker examples here: https://mdbootstrap.com/docs/standard/forms/datepicker/

Buzby58 priority commented 3 years ago

Thanks Arkaduisz - I've been through the examples page, which is straight forward but I still can't get it to work.

I have MDB 5 Standard (default Bootstrap version) - Essential, Annual V1.2.0

I did a manual install and copied the files across.

I have 4 folders - css, img, js & src.

To install a component your instructions refer to a plugin folder which I don't have. (https://mdbootstrap.com/docs/standard/pro/plugins-installation/)

I'm probably missing something here - any chance you could flip me a bare complete date picker page as whatever I do is not working.

Thanks in advance!

Please insert min. 15 characters.

Buzby58 priority commented 3 years ago

I'd also add I'm not seeting the files/directories as listed in your tutorials.

Add comment

Arkadiusz Idzikowski staff answered 3 years ago

0 0 Best answer

Please insert min. 20 characters.

Did you download the MDB-UI-KIT-Pro-Essential-1.2.0 zip file? It should be available in your MDB profile. This is ready to use project with MDB configuration, you just need to copy the code from our documentation and add it to the index.html file.

For example, to render the datepicker component, just paste this code to the body tag:

  <body>
    <div class="form-outline datepicker">
      <input
        type="text"
        class="form-control"
        id="exampleDatepicker1"
      />
      <label for="exampleDatepicker1" class="form-label">Select a date</label>
    </div>
  </body>

You can then open the component by clicking on the calendar icon inside the datepicker input.

The component installation guide you mentioned is only for MDB plugins. Datepicker is available in the main MDB package, you don't need any additional configuration to use it.

Buzby58 priority commented 3 years ago

Thank you - yes I already had. It turns out the code above is different to that posted under the forms datepicker section. Your version works perfectly - thank you.

I have one last query - I can't get this to display correctly https://mdbootstrap.com/snippets/jquery/marta-szymanska/1305307 - there appears to be a background issue and the photo's not displaying - is there un updated version for MDB5?

Thank you for your help - much appreciated!

Michal Szymanski staff commented 3 years ago

This is a jquery snippet (as you can see in the link) so it refers to MDB 4.

You use MDB 5, so it will not work.

You need to use snippets and design blocks of MDB 5 https://mdbootstrap.com/docs/standard/design-blocks/

Add comment