Add bootstrap date picker - having trouble

Add bootstrap date picker - having trouble
0

#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.


#2

You are adding conflicting versions of JQuery and Bootstrap. Some are in your HTML and some are in the Codepen settings. You need to choose one location or the other. If using Codepen, put them all in the Codepen settings.


#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.


#4

Put all the .css external links in between the <head> and </head> tags. Don’t forget to add the external Bootstrap 3 css file before the datePicker css file.

At the bottom of the body is where all the external JavaScript file links should go. The order is important. Bootstrap depends on JQuery, so JQuery must appear first. The dataPicker js file depends on the Bootstrap js file, so Bootstrap should appear first.


#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.


#6

OK, it seems now you have decided to put them all in the Codepen settings (which is fine). The problem is. When you add the external libraries, the order is important (like I said in the previous reply). JQuery must appear first, then BootStrap, and then the dataPicker.js.

You have two problems currently. The JQuery is after the Bootstrap (problem #1) and you still have the dataPicker.js file referenced in your HTML section. Put that CDN link as a third external library link in the Codepen settings and remove the reference from the HTML and you will be fine.


#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?


#8

You can always look at the browser’s console (Ctrl+Shft+I in Chrome) and see errors such as this. You were getting errors indicating the JQuery was being used before it was loaded. If you don’t get errors, but think a library is “out of order”, then you can always review the library documentation which should specify any needed libraries in order to work.