Develop Reference

Angular 6 doesn't work with Bootstrap 3 Datepicker

I'm developing an Angular 6 application.
I'm starting to create a component with a simple datepicker.
I am obliged to use this plugin: https://eonasdan.github.io/bootstrap-datetimepicker/
Even if in the file "angular.json" I put the right dependencies .css and .js (
the css works perfectly; these are the scripts .js):
"scripts": [
"src/jquery/jquery-3.1.1.min.js",
"src/bootstrap/js/bootstrap.min.js",
"src/bootstrap-datetimepicker/js/moment.min.js",
"src/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"
].
My template html of my component is this:
<div class="form-group">
<label>Date</label>
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control field-8">
<span class="input-group-addon">
<span>today</span>
</span>
</div>
</div>
<script type="text/javascript">
$('#datetimepicker1').datetimepicker({ format: 'DD/MM/YYYY' });
</script>
But if I click on the button the datepicker doesn't appear! (with a normal html page, everything works perfectly!). How can I resolve this problem?
Thanks!

I prefer, please do not use JQuery element with Angular 2+, you can find same plugins/component for Angular 2+.
If you want to continue with this, add this $('#datetimepicker1').datetimepicker({ format: 'DD/MM/YYYY' }); in ngAfterViewInit method in component.ts file.
If it will not work then add this $('#datetimepicker1').datetimepicker({ format: 'DD/MM/YYYY' }); with in timeout.
ngAfterViewInit will execute once View part is loaded in Angular 2+.
I am using Primeng components in my project.

Bootstrap datepicker doesn't close

I have read that this bug was fixed but doesn't really seem so. I have a boostrap modal appearing when I create an new employee in my website. And I am using the following to create a datepicker for the date of birth of the new employee.
<div class="input-group date insertInfo" data-provide="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
and then after the load of my js scripts (first I load bootstrap and then bootstrap-datepicker.js) I use:
<script type="text/javascript">
$(function () {
$('.datepicker').datepicker({
format: 'mm-dd-yyyy'
});
});
</script>
Unfortunately what happens is that I can select the date on the drop down calendar shown by the datepicker, but once selected I cannot close it anymore. Can you maybe help me with this issue? Thanks in advance

You must do the following:
Correct your class reference
Enable autoclose
Override button
When you setup the datepicker, you are referencing a non-existant class ('.datepicker'). Besides that, you need to include the 'autoclose' field and customize the behaviour of the button to make it both open and close the calendar.
HTML
<div class="input-group date insertInfo" data-provide="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon close-button">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
JS
// Setup datepicker
$('.date').datepicker({
format: 'mm-dd-yyyy',
autoclose: true
});
// Unbind default events
$('.close-button').unbind();
// Specify new behaviour
$('.close-button').click(function() {
if ($('.datepicker').is(":visible")) {
$('.date').datepicker('hide');
} else {
$('.date').datepicker('show');
}
});
If you want to see a working version: JSFIDDLE

After selecting the date from the drop down calendar you can just click anywhere outside the calendar to close it but if you want the calendar to be closed on selecting the date then do the following
$(function () {
$('.date').datepicker({
format: 'mm-dd-yyyy',
autoclose: true
})
});

$('.datepicker').datepicker({
format: 'mm/dd/yyyy',
autoclose: true
});
You will need to EXPLICITLY add autoclose: true, otherwise, its default value is false.

Bootstrap datepicker has autoclose option set on false by default.
You should set autoclose option on true.
Check out the reference: https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#quick-reference

Datapicker binding with angular and bootstrap

I tried to make an datapicker and a time picker for a website, I found the solution on this site. I use angular and I don't know how can I do to take the value from the input. I tried with ng-model, but didn't work.
Here is the html code:
<div class="container">
<div class="row">
<div class='col-sm-6'>
<input type='text' class="form-control" id='datetimepicker4' />
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker();
});
</script>
</div>
How can I solve this issue?
Thanks.

I'd recommend looking into Bootstrap UI. It's a collection of Boostrap UI elements, converted into Angular.js directives. You'll find that using Angular.js Directives will have much better data-binding and support and then using the equivalent jQuery/Javascript plugins.
One of the Bootstrap UI components included in the link is the 'ui.bootstrap.datepicker Directive'. To give you an example of what this directive looks like, and what an Angular-friendly datepicker looks like:
<uib-datepicker ng-model="date" min-date="minDate"></uib-datepicker>

You should use a directive for DOM manipulation.
app.directive('datetimepicker', function() {
return {
restrict: 'A',
link: function(scope, element) {
$(element).datetimepicker();
}
}
});

How to integrate the Bootstrap datepicker

I am currently trying to integrate the bootstrap datepicker, but for some reason it is not working at all. The datepicker is simply not showing like it should.
I have created a jsfiddle here: http://jsfiddle.net/4hmuff8x/
It contains the js code of both the datepicker and bootstrap as well as the css for these.
To explain what I am doing, the following html code is the input where I want the datepicker:
<div class="col-md-10 col-md-offset-1 spacer-below-20">
<label>The date</label>
<div class="input-group">
<input class="datepicker" type="text" name="date">
</div>
</div>
Of course I have written a bit of js, which should "link" the input tag to the datepicker:
<script>
$(function(){
$('.datepicker').datepicker({
format: 'dd.mm.yyyy'
});
});
</script>
I really can't figure out why it is not working. I hope some of you can help me out.
Any help will be greatly appreciated.

In the given fiddle , you are calling the below function before loading the js file into DOM.
$('.datepicker').datepicker({
format: 'dd.mm.yyyy'
});
call the script after loading the script or on
$(document).ready(function(){
//code to call
})
https://jsfiddle.net/santoshj/4hmuff8x/2/

bootstrap 3 datepicker (eonasdan version) provides a datetime object with getDate(). not a string

I am using the following bootstrap 3 datepicker.
http://eonasdan.github.io/bootstrap-datetimepicker/
it works fine but there is an issue . during the change event
the output thrown out is a js object. i want a string. is taht possible.
there is another question asked along the same lines. but current version of datepicker has been updated and the old code does not run in jsfiddle.
html code is as follows:
<div class="form-group">
<div class='input-group date' id='datetimepicker5' data-date-format="YYYY/MM/DD">
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
my jquery code is as follows ;
$(function () {
$('#datetimepicker5').datetimepicker({
pickTime: false,
useCurrent: true,
showToday: true,
language : 'en'
});
$('#datetimepicker5').data('DateTimePicker').show();
});
//.... on change event
$('#datetimepicker5').on('dp.change', function() {
var t3= $('#datetimepicker5').data("DateTimePicker").getDate();
alert (t3.format('YYYY-MM-DD)); // this is the new change and works perfect
});
any help is really appreciated

If I interpret the installation instruction correctly, Eonasdan already has moment.js as a dependency. This answer from a related question provides some sample code on using moment.js to format a date in JavaScript.
If for some reason moment.js is not available, you can fall back to the native JavaScript functions. See this answer from the same question as I previously referred to.