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

Bootstrap datetimepicker isn't showing calendar (or won't format the date correctly)

Currently, my issue is that the calendar isn't showing (tells me the datetimepicker function isn't properly initialized on the controls).
Note that the implementation shown here is based on a different implementation elsewhere on the site which does work.
<link href="/Content/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/Scripts/moment.min.js"></script>
<script src="/Scripts/bootstrap-datetimepicker.min.js"></script>
I've stripped out all the scripts like datatables and knockout as I believe they're superfluous and the list of scripts used is quite extensive.
Full [redacted to remove client information] markup for the page can be found here.
The form is simple, just inputs with .datetimepicker class on them:
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label col-sm-5">Start Date</label>
<div class="col-sm-7 input-group">
<input type="text" class="form-control datetimepicker" id="StartDate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar "></span>
</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-5">End Date</label>
<div class="col-sm-7 input-group">
<input type="text" class="form-control datetimepicker" id="EndDate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar "></span>
</span>
</div>
</div>
</div>
</div>
Right now when I click on either of these inputs they just give me autocomplete options for values which I've entered in the past.
Used to be with things like this you'd initialize the javascript with something like this at the bottom of the page:
$(document).ready(function () {
$("#StartDate").datetimepicker();
$("#EndDate").datetimepicker();
});
This, however, doesn't appear to be necessary in this case as the page on which these datetimepickers work doesn't do it.
If I do initialize the controls this way, the calendar shows, but whether I use the locale option or the format option as indicated in this SO Answer, it never gives the dates the correct format that I need which is yyyy/mm/dd.
Ideally, I want to be able to see the calendar pop-out and have it display dates on the input with the correct format. If anyone can indicate possibly what I'm doing wrong I'd greatly appreciate it.
Here's a fiddle: https://jsfiddle.net/h3809a7r/

I just imported these libraries and its working now
Javascript:
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js
https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js
CSS
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css
JsFiddle Link with your code

Can you please try this
$("#StartDate").datetimepicker({
format: 'YYYY-MM-DD HH:mm',
showClose: true,
showClear: true
});

How to make an array of textbox value using javascript

I am facing problem on this. The value on the textbox can't make an array. It read as string when i check in console. Im trying to check the length of it but it reads in string. It was a multiDatepicker. It seems not correct. Kindly see where did i missed?
$('#datetimepicker1').datepicker({
multidate: true
});
var arrDate = [];
arrDate.push(document.getElementById("txt_date").value);
console.log(arrDate.length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<font color="black">Dates: </font>
</label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" name='txt_date' id='txt_date'/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>

You can use their own API method getDates. See the documentation here
getDates
Arguments: None
Returns a list of localized date objects representing the internal
date objects of the first datepicker in the selection. For use with
multidate pickers.
Use it like this
console.log($('#datetimepicker1').datepicker('getDates'));
Here is a working example

show invalid messages on entering wrong input

I have written a code stuff using bootstrap-datetimepicker which has two datetime picker start and end. Code is working fine but I don't know how to show validation to the date time textfield. say for example in the datetime picker textfield when I enter some invalid date, it should validate and show invalid date. How can we achieve that.
Can anyone please help me on this
My code is as given below
JSFiddle
<div class="container">
<div class="col-sm-6" style="height:75px;">
<div class='col-md-5'>
<div class="form-group">
<div>Start</div>
<div class='input-group date' id='startDate'>
<input type='text' class="form-control" name="startDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div>End</div>
<div class='input-group date' id='endDate'>
<input type='text' class="form-control" name="org_endDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>

Check out the docs regarding options: http://eonasdan.github.io/bootstrap-datetimepicker/Options/
I've never used this plugin but it looks like passing some of these in would allow you to set validation parameters and not have to write too much more code.
Things like:
format (using moment.js notations)
minDate & maxDate
disabledDates
and looks like useStrict might also be helpful depending on what your requirements are.

Yo. validate.js is very easy to implement. It's also very easy to customize.
Simple demo here.
$(document).ready(function(){
$("#form").validate();
});
Read more about Validate.js