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.
Related
<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.
I have a problem. I use a date picker in my html page which I want to get value of input date using jquery. I used this :
var birthday_date = $("#birthday_date").val();
but it's not working. I checked the inspect code then realise when I used date picker, the input tag (which used for date) becomes to this :
<input id="textbox1"
name="birthday_date"
data-targetselector="#textbox1"
class="form-control"
data-mddatetimepicker="true"
placeholder="year/month/day"
data-placement="top"
maxlength="10"
data-mdpdatetimepicker=""
data-trigger="click"
data-enabletimepicker="false"
data-mdformat="yyyy/MM/dd"
data-mdpdatetimepickerselecteddatetime="
{"Year":2011,"Month":8,"Day":2,"Hour":9,"Minute":13,"Second":14}"
data-original-title=""
title=""
data-mdpdatetimepickershowing="true"
aria-describedby="popover30621"
type="text">
the value of the date is this part:
mdpdatetimepickerselecteddatetime="{"Year":2011,"Month":8,"Day":2,"Hour":9,"Minute":13,"Second":14}"
the time is not matter, I just wanna date , google gave me nothing and I have no idea how can I get the value like this, any help? or something to help me?
If you are using datepicker, you can access the value like this:
var date = $('#textbox1').datepicker('getDate');
I am populating a hidden field with a UTC date/time value from a database. I am then using some jQuery and the moment library to convert the UTC date to local time and set the default date of a eonasdan-datetimepicker. I am also using the dp.change event of eonasdan-datetimepicker to convert dates that are picked via the widget back to UTC to bind back to the database via the hidden field. Here is my javascript - this works, but I do not like it.
$(".datepicker").each(function (index) {
var utcDateTime = moment.utc($("#" + $(this).data("utc-target")).val(), "MM/DD/YYYY h:mm A");
var localDateTime = moment.utc(utcDateTime).local().format("MM/DD/YYYY h:mm A");
$(this).find(">:first-child").val(localDateTime);
}).datetimepicker({
useCurrent: false,
}).on("dp.change", function (e) {
$("#" + $(this).data("utc-target")).val(moment.utc(e.date).format("MM/DD/YYYY h:mm A"));
});
HTML:
<label for="PublishedField">Date/Time Published</label>
<div class="input-group date datepicker" data-utc-target="PublishedUtcField">
<input name="PublishedField" type="text" id="PublishedField" class="form-control" />
<span class="input-group-addon"><span class="fa fa-calendar"> </span></span>
</div>
<input type="hidden" name="PublishedUtcField" id="PublishedUtcField" value="4/10/2015 5:16:00 PM" />
While this works, I'm not a fan of the each loop to set the initial value of the datetimepicker. I feel as though it would be cleaner to set it via the defaultDate property, but I am unable to set that property using an anonymous function. I think a dp.initialize or dp.setup event would be a nice solution, but the library does not support something like that, as far as I can tell. This could also be done using some kind of placeholder functionality, but I cannot find any similar scenarios in the docs or on GitHub.
Anybody know of a better way to do this? Is this kind of scenario supported somehow in a way I'm just not seeing or aware of? Am I missing something obvious?
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
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.