Datepicker not working / showing - Bootstrap 5 - javascript

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

Related

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 insert JavaScript source code directly into an HTML file?

I have two calendars in HTML that when you click on two dates, it shows the days between the two dates. This works perfectly for me since I just used jQuery code I found online, but the people I will be handing this HTML file to do not have any access to the links of my source code. They also don't have any access to any local shared drive where I can download the scripts and save it there.
Is there any way for me to directly add jQuery codes to the HTML file itself so that the people who will be using it will not need access to anything to use it properly? Sorry, I am only learning HTML/jQuery as I'm doing it and cannot find any solutions to my problem.
I already tried downloading the flies of the source codes to a share drive, it works perfectly but others do not have access to it. They are not allowed to save anything on their own desktops either.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<label>DATE TODAY:</label>
<div class="input-group date" id="initialDate">
<input type='text' name="initialDate" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<label>EXPECTED DATE:</label>
<div class='input-group date' id='finalDate'>
<input type='text' name="finalDate" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<br><label>Days between: </label> <span id="days"></span>
function CalculateDayends() {
var initialDate = $("#initialDate").data('date');
var finalDate = $("#finalDate").data('date');
var diff = Math.floor((Date.parse(initialDate)- Date.parse(finalDate)) / 86400000);
$("#days").text(diff);
}
$("#finalDate").on('dp.change', function() {
CalculateDayends();
});
$('#initialDate').datetimepicker({
format: 'YYYY-MM-DD'
});
$('#finalDate').datetimepicker({
format: 'YYYY-MM-DD'
});
<script>your js code goes here</script>

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.

how to use jquery ui only datepicker with datemonth?

I'm using jquery ui datepicker but I'm not using another components of jquery ui (tab,accordion,autocomplete and other..) just datepicker that's why I choose custom download..everything is okey my datepicker is work very well but my month picker is not working I'm Monthpicker plugin for month my plugin give me a error but if I'm using full jquery ui with all components my monthPicker is working but I have to use only with datepicker
please click to see my demo
<div class="example">
<h1>This is example datepicker</h1>
<input type="text" placeholder="Chekin" id="checkin">
</div>
<div class="project">
<h1>And this is the project monthPicker</h1>
<input type="text" id="noIconDemo" />
</div>
It says in the alert that you need both Button and Datepicker, and you say you only have Datepicker. You should try downloading a custom build with both plugins.
https://jqueryui.com/download/#!version=1.12.1&components=100001011000000000011110000000000000000000000000

bootstrap datepicker from eternicode not selecting date

I'm working on this input right now using bootstrap 3.0 and bootstrap-datepicker from eternicode.
The problem is that I'm having by default the input to be disabled, because I do not want the user to be modifying the date by his hand.
I'm assigning an input addon with a glyphicon of a calendar to show the datepicker. The problem though is that whenever I select a date, the input doesn't receive the date. I've been going through the docs and there's a way to do it, but it is with Bootstrap 2.3.2 only.
Here is my code, does anybody know how can I transfer the selected date from the datepicker into my disabled input?
Help will be much appreciated!
html
<div class="form-group">
<label class="control-label" for="fechaTandas">Fecha</label>
<div class="input-group">
<span class="input-group-addon date" id="trigger-datepicker"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" name="fechaTandas" disabled="disabled" id="fechaTandas" placeholder="seleccione una fecha">
</div>
js
//JS to trigger the datepicker
$('#trigger-datepicker').datepicker({
format: "yyyy/mm/dd",
language: "es"
});
This is the link to eternicodes datepicker plugin:
http://eternicode.github.io/bootstrap-datepicker
I think you need to handle the DatePicker's change event..
$('#trigger-datepicker').datepicker()
.on("changeDate", function(e){
$('#fechaTandas').prop('disabled',false);
$('#fechaTandas').val(e.format('yyyy/mm/dd'));
$('#fechaTandas').prop('disabled',true);
});
Demo: http://bootply.com/88516

Categories