how to use bootstrap timepicker with angularjs - javascript

I am using Eonasdan datetimepicker. This is my code
<div class="form-group">
<div class='input-group date' id='datetimepicker'>
<input type='text' ng-model="dtime" name="time" class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
And this js for timepicker
<script type="text/javascript">
(function () {
$('#datetimepicker').datetimepicker({
format: 'LT',
enabledHours: [9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
});
})();
</script>
But in my controller I am not able to use $scope.dtime. It is giving undefined as its value.

There is a feature rich library that seamlessly integrates Bootstrap and AngularJS
https://angular-ui.github.io/bootstrap/#/datepicker
Your don't need to write directives from scratch.
Always use Angular first approach.
I hope this will help you.

if you want to use time picker from bootstrap you might want to wrap it a directive. By default you won't be getting the selected date in $scope since the value of input is updated externally by a javascript code. As a proof on concept you can refer to below link.
http://plnkr.co/edit/BEkkfwbhP7bYMtleQOzC?p=preview
In this example $scope.hello is set as Hello hence printing "Hello World" in UI. Value of hello is bind with input in UI and on click of button you can change the value but same will not be reflected in scope and you will still see "Hello World" printed.
Alternatively if you type something in input box then the same will be reflected in UI.
I would suggest to refer to this earlier thread where pretty much same problem is discussed
How to wrap the datetimepicker js into AngularJS directive

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/

After selecting a date and try to console log it it shows undefined

<div class='col-sm-6'>
<input [(ngModel)]="date" id="date" name="date" class="form-control" required/>
</div>
$(function () {
$('#date').datetimepicker({
format: 'DD/MM/YYYY hh:mm'
});
});
I'm using angular js after I choose a date and try to console.log the value it shows Undefined but when I modify it and console.log the value it shows the string inside the input
First of all, [(ngModel)] is used in Angular 2, not AngularJS. In Angular 2 you have to use the command ng-model.
Second, ng-model binds the date to a $scope variable called date. If you want to access the date in a controller, use $scope.date inside of your controller.
Third, you should never use JQuery to get variables from your view. Mixing up JavaScript frameworks like JQuery and AngularJS will might cause problems. It is also very messy code style.

datetimepicker - Passing date value to angular controller

First off i just want to say i have just started with Angular so all this is really new to me. I don't even know if what i am setting up is done in the right way.
What i am trying to do is to Pass a date value after i have chosen it in the datetimepicker back to my angular controller so that i can process it.
the problem i have is that when i choose the date (i can clearly see what i have chosen through a alert poping up displaying it on.change) i can't pass the value through either ng-model attribute in the input tag nor with ng-click after storing the date value in a variable.
i want the date to be passed to a $scope.chosenDate = ''; as a string, or something like that, in the Angular Controller.
I am Using the: DateTimePicker Bootstrap 3 - minimal setup version:
DateTimePicker Bootstrap 3
Here is the datetimepicker:
<div class="col-lg-12 col-md-6">
<lable class="lfInputLable">From</lable>
<div class="form-group" style="margin-bottom: 5px !important;">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
var dateToPass;
$(document).ready(function dateFunction() {
$('#datetimepicker1').datetimepicker({
format: 'YYYY-MM-DD hh:mm'
});
$('#datetimepicker1').on("dp.change", function () {
var selectedDate1 = $("#datetimepicker1").data('date').toString();
var dateToPass = selectedDate1.toString();
alert("Date is set to: " + selectedDate1);
alert("The Date To Pass: " + dateToPass)
});
});
</script>
1) You are doing wrong way. Select any angular js supported date picker
https://github.com/720kb/angular-datepicker
2) Angular js support two way binding. please read more about two way binding. and then you are good to start with variables in angular js
http://www.w3schools.com/angular/angular_databinding.asp
So i got this to work but i got to use another Datetimepicker.
I used the: dalelotts/angular-bootstrap-datetimepicker
Worked like Magic!
You can access the data by adding model variable.
<input type='text' class="form-control" ng-model="data.date" />
in your controller, you can access it through $scope.data.date.

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