How to integrate the Bootstrap datepicker - javascript

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/

Related

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.

Combodate/moment.js DD-MM-YYYY dropdown - style issue

I am using combodate and moment.js to have a dropdown DD-MM-YYYY. It's perfectly functional and inserts data into my tables but only shows as unstyled small dropdown boxes unlike the demo.
I have tried styling it in bootstrap and css but it changes nothing and only seems to create issues. I've tried on multiple browsers with the same result and no errors. I have tested my jQuery and its working fine. I am running this locally, My code is below:
$(document).ready(function() {
$(function() {
$('#date').combodate();
});
});
<script src="./js/combodate.js"></script>
<script src="./js/moment.min.js"></script>
<input type="btn btn-drowpdown" method="post" name="date" id="date" data-format="YYYY-MM-DD" data-template="D-MMM-YYYY" value="09-01-2013">
I am still new to coding especially javascript/jQuery and its probably something very small I've overlooked. Any help is greatly appreciated.
I have got it working, but had to come up with a different approach.
I copied the sample code on JSFiddle from Combodate Github's page and altered it a bit.
<h3>Combodate</h3>
<div class="form-inline">
<div style="margin: 50px;" class="input-group">
<input type="text" id="date" data-format="DD-MM-YYYY" data-template="D MMM YYYY" />
</div>
</div>
I added a <div> layer to accommodate form-inline and input-group style classes for this component, otherwise the three generated combos would be shown on separate lines.
$(function(){
$('#date').combodate({
value: new Date(),
minYear: 2012,
maxYear: moment().format('YYYY'),
customClass: 'form-control'
});
});
And then I added customClass to Combodate's init properties to style all three combos accordingly.
I don't know what OP is expecting as result, then I tried to guess it.
Hope it helps.
The sample is published in JSFiddle: https://jsfiddle.net/flaviocysne/4g5p46zd/

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();
}
}
});

jQuery datepicker not working in AngularJS

I am trying to implement jQuery datepicker in AngularJS.I followed the url https://github.com/angular-ui/ui-date and did the same what was given. But I don't know where I'm lagging. I couldn't able to see the datepicker. I can see only the text box . Is there any other steps I should follow to implement jQuery datepicker in AngularJS other than this?
HTML :
<div class="to-show">
<div ng-controller="DatepickerDemoCtrl">
<small>Date</small>
<div class="row">
<div class="col-md-12">
<input ui-date="dateOptions" name="DateOfBirth">
</div>
</div>
Controller :
myApp.controller('DatepickerDemoCtrl', function ($scope) {
$scope.dateOptions = {
changeYear: true,
changeMonth: true,
yearRange: '1900:-0'
};
});
I have added the script files and CSS file as given
Could anyone please help me to resolve this?
Have you added the "ng-app" attribute to your page?

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.

Categories

Resources