NOTE: The process I used in production targeted .NET Core 2.2, but the demonstration here is targeting .NET Core 3.0 (SDK: 3.0.100-preview6-012264)
I'll be using a few tools to aquire and embed the JS tools needed to add a bootstrap-style datepicker to my application:
- LibMan: "a lightweight client-side library acquisition tool."
- CDNJS: "one of the most famous free and public web front-end CDN services"
- bootstrap-datepicker: "a datepicker for twitter bootstrap"
Step 1: Add the library
There is an extremely in-depth walkthrough from Microsoft on how to manage the packages in Visual Studio, so I won't rehash that here. I highly recommend giving the article a read (should take less than ten minutes) to get a handle on what LibMan is actually doing as well as how to add/restore/delete/uninstall/update the client libraries.
Having said that, let's add bootstrap-datepicker to our project.
Including CSS in your development environment
First, find the css includes for the Development environment in the header.
Next, get the path to your new CSS file
Next, Add the link for your local dev file:
Including the CDN content in your non-development environment
This is where (cdnjs.com) earns it's pay. Search for bootstrap-datepicker on the site:
You'll want to double check here that you are referencing the same version you added with LibMan. If you aren't sure, the LibMan config file is created in the root project folder under
libman.json by default.
When you hover over a listed file, a dropdown will appear allowing you to copy text to the clipboard. I've selected "Copy Link Tag" because it includes the Subresource Integrity property.
Now paste that link tag into your header section:
Optionally, you can also add the fallback logic in case CDN ever went down for some reason. If you do this, be sure to reference the minified version of the local CSS file, found as an expansion on the regular CSS file in the webroot folder:
- Add the local development file to development
- Add the CDN content to non-development environments
- Optionally add the fallback and tests
Final Steps: Wiring up the DatePicker
Now it's a simple matter of adding the input tag where we want it and instantiating the datepicker and voila!