Add bootstrap date picker - having trouble

1

Hey guys,

I’m trying to have a date input have a calendar pop-up to enter the data. After doing some reading Bootstrap Datepicker plugin keeps coming up as a recommendation. Here is a tutorial I followed. My pen link.

I am a new coder/developer with minimal experience. I have never added a plugin to a pen so I think that might be part of the problem. I added the 2 links for the plugin to the HTML section. I added Bootstrap 3 and JQuery through the javascript add-on section of settings.

Any info is much appreciated.
Thanks for taking the time to read this.

3

Hi,

Thanks for the continued help.

In my html I add this to the top of my page:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css"/>

I am under the impression that these are the plug-in files. Are you saying that they are the JQuery and Bootstrap files?

I removed those lines of code and ran the Pen again and still did not have the calendar pop-up work.

5

Hello again,

I have put the css file in between head tags. I only have the 1. Should there be others?

You’ve said to add the Bootstrap 3 css file before the datePicker. I think I am not understanding something. I thought I don’t have to add this is in the code because its added in the settings under the javascript tab. Is that correct or do I need another Bootstrap css file? If so why is this one different?

I am thinking the only .js file I need is the datePicker file because I’ve added JQuery and Bootstrap in the settings. Is this correct? I did have this:

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

but I’ve removed it because I have it in the settings. It was there for the PDF generator and that still works with that line removed.

It seems like I’m missing some very basic knowledge of how a webpage needs to be structured. If that is the case, please let me know.

7

What a mess!!!

Ok, got it. I didn’t realize I could put that link in the settings. It works now!

Moving forward I guess it will be important to learn how to add those links to the code properly. What would you call that? plug-in structure? Is that what I should be reading up on to learn this?