We Keep Coding

Datepicker not working / showing - Bootstrap 5

I am trying to add a timepicker to my page using bootstrap 5, for some reason the calendar is not loading so I can not pick any date. I do not know if I have done something wrong or the plugin is not compatible with the latest version of bootstrap.
If you click 'launch demo modal' you will see the date input field and datepicker is not working there.
This is the code for the input date field:
<div class="col-12">
<label for="date" class="col-sm-1 col-form-label">Date</label>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control">
<span class="input-group-append">
<span class="input-group-text bg-white d-block">
<i class="fa fa-calendar"></i>
</span>
</span>
</div>
</div>
JS (truncated):
<script type="text/javascript">
$(document).ready(function () {
$('#datepicker').datepicker();
...
});
</script>
I also tried using $('.datepicker').datepicker(); according to the bootstrap-datepicker docs but nothing changed.

Demo page
Stackoverflow source
You should put bootstrap-datepicker.min.js after jquery.js. It somehow make errors because of that.
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

Why add additional JS for datepicker fields?
You can simply make the input field of type date to get a native browser date selector.
Example:
<input type="date" class="form-control" name="date-field" />
Support for date (along with time) fields can be found on Can I Use.

Include below CSS and js in your file
Reference: https://cdnjs.com/libraries/bootstrap-datepicker
<!-- Bootstrap datepicker CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"/>
<!-- Bootstrap datepicker JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
For custom styling please have a look at the below link
Bootstrap Datepicker - Custom Styles

Launch jQuery Calculator By Clicking input-group-addon

I need to launch a jQuery calculator (http://keith-wood.name/calculator.html) when clicking the calculator icon to the right of the input field. The referenced calculator is great and has great documentation, but I guess I need someone smarter than me to figure out how to launch it when clicking the "fa-calculator" icon to the right of a field.
I've setup my form input field as follows. The calculator allows the use of a button to launch it, but it simply creates a button next to the field, which isn't what I'm after.
Thank you!
<div class="input-group">
<span class="input-group-addon">A</span>
<input name="a" id="a" class="c form-control input-mini" type="text">
<span class="input-group-addon"><i class="fa fa-calculator"></i></span>
</div>
I'm launching the calculator as below, and it works fine when an operator (+-*/) is typed. But, I also need the calculator to launch when the input-group-addon is clicked.
$('#a').calculator({showOn:'operator'});

You can show the calculator by yourself when the user clicks on .input-group-addon, like this:
$('.input-group-addon').on('click', function() {
$('#basicCalculator').calculator('show');
});
http://keith-wood.name/calculatorRef.html#show
$('#basicCalculator').calculator({
showOn: 'operator',
});
$('.input-group-addon').on('click', function() {
$('#basicCalculator').calculator('show');
});
<link href="https://cdn.jsdelivr.net/npm/jquery.calculator#2.0.1/jquery.calculator.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.calculator#2.0.1/jquery.plugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.calculator#2.0.1/jquery.calculator.min.js"></script>
<input type="text" id="basicCalculator">
<span class="input-group-addon"><i class="fa fa-calculator"></i></span>
https://jsbin.com/tukuyep/edit?html,js,output

How to Display year only Calendar?

I am using Predefined bootstrap calendar in my page. Its working Properly, but for few text box I need to display year only calendar.
My Codes are
<!-- bootstrap datepicker -->
<link rel="stylesheet" href="~/Content/adminlte/components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
<!-- bootstrap datepicker -->
<script src="~/Content/adminlte/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script>
$(function () {
$('#Date').datepicker({
autoclose: true
})
})</script>
Design
<label>Date</label>
<div class="input-group date">
<input type="text" class="form-control pull-right" id="Date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
</div>
My datpicker with text box image as follows
Its working fine to pickup a date.
But for few text box I need year only option as shown in image below
If I use code from some other stackoverflow answers or from this link code , it affect my date picker design and it also change the option for all text boxes to choose normal date also... Kindly help.. TIA.

use this config options:
$("#Date").datepicker({
autoclose: true,
format: "yyyy",
viewMode: "years",
minViewMode: "years"
});

Look if you go to jquery page and searched for calender.
They will tell you the properties for calender format and how to use them and thus you copy and paste thrm in your bootstrap calender since it will be the same.
Regards.

JQuery UI Datepicker not functioning

I am running into an issue where I feel as though I have everything set up correctly; but, no matter what, the JQuery UI Datepicker will not show up.
I have the following set up in my header (Angular project, header is always loaded no matter the route):
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
As well as this
<script type="text/javascript">
$(function() {
var nativeDateInputIsSupported = Modernizr.inputtypes.date;
if (!nativeDateInputIsSupported) {
$("input[type='date']").datepicker();
}
});
</script>
However when I am in Firefox and click on the following, nothing happens
<tr ng-repeat="revenue in runway.revenues">
<!-- Other table elements go here -->
<td>
<input type="date" id="date" max="{{maxDate}}" class="form-control" ng-model="revenue.date" placeholder="YYYY-MM-DD" required/> </td>
<td>
It also does not show up here
<input type="date" class="form-control" ng-model="user.startofbusiness" name="startofbusiness" id="startofbusiness" required>
I've checked many different StackOverflow threads but even when I follow the methodologies put forth by them, I can't get it to cooperate.
Any tips would be greatly appreciated!

As it turns out, this was implemented correctly, and is actually working. The issue was with regards to having used ng-repeat to generate the table's information dynamically. I am addressing this by writing a custom directive to handle the datepicker.

JQuery Date Picker Not Showing on Refresh

From what I can see including examples such as this one
jQuery Datepicker - refresh pickable days based on selected option
This code should work.
Here is where I am calling my external jquery scripts
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
I will note in case it matters I am using a bootstrap theme but do not have boot strap datepicker loaded.
When I load the page the date picker loads fine using the code below. (I will note I was using a jquery change event but switched my code to more closely match the above answer in case it was something small I was missing
$(function(ready){
$(function() {
$('#datepicker').datepicker({
format: "mm/dd/yy",
minDate: "+2W",
maxDate: "+6W"
});
});
});
HTML
<input type="radio" onchange="loadDatePicker()" tabindex="7" class="change" id="radio_1" name="freq" value="1"> Monthly <input type="radio" onchange="loadDatePicker()" tabindex="8" id="radio_2" class="change" name="freq" value="2"> Bi-Weekly
<input class="form-control" tabindex="9" onkeyup="slashfunc(this.id)" onchange="datefunc(this.id)" type="text" id="datepicker" value="{{date}}">
The outputted HTML is below:
<input class="form-control hasDatepicker" tabindex="9" onkeyup="slashfunc(this.id)" onchange="datefunc(this.id)" type="text" id="datepicker" value="">
Then I click my radio buttons and the following code is called
function loadDatePicker(){
console.log("test")
$('#datepicker').datepicker("destroy");
if($("input[type='radio'][name='freq']:checked").val() == 1){
$('#datepicker').datepicker({
format: "mm/dd/yy",
minDate: "+2W",
maxDate: "+6W"
});
}else if($("input[type='radio'][name='freq']:checked").val() == 2){
$('#datepicker').datepicker({
format: "mm/dd/yy",
minDate: "+2W",
maxDate: "+2W10D"
});
}
$('#datepicker').datepicker("refresh");
}
I can see the input change for a second but it quickly goes back
<input class="form-control hasDatepicker" tabindex="9" onkeyup="slashfunc(this.id)" onchange="datefunc(this.id)" type="text" id="datepicker" value="">
However, now the datepicker no longer comes up when the input for the datepicker is clicked.

I finally solved this.
It was an external piece of code modifying the DOM.
Part of a chat script I am working on for the same solution included the following lines of code which caused it. (I commented out lines until I found which ones were breaking it)
jQuery(document).ready(function($) {
$("body").append('<div id="chat" title="Basic chat"><div id="chats">Please Enter your Name: <input id="username" type="text" ></div></div>');
$("body").append('<div id="chat2" title="Basic chat"><div id="chatc"> </div><div id="chate"><input id="chatb" type="text" ></div></div>');
});
For some reason the system objected to this line being between where the date picker was initially declared, and where it was modified.
I moved the entire chat code library above the date picker code and above the jquery-ui library and it all started working as if by magic.