I'm currently working on an AngularJS project. In this project, I need to use the Kendo UI components. I found the Kendo / AngularJS Directives here. Unfortunately, I have been unable to get a date picker to work. Currently, I have the following code in a partial that I added to the sample app on the GitHub page:
<div>
<b>Birth Date</b>
<div id="theDate" ng-model="birthDate" kendo-date-picker k-format="MM/dd/yyyy"></div>
<br />
Current Choice: <div>{{birthDate}}</div>
</div>
When the user visits '/birth-date' (I setup a route in app.js), the view appears as desired. This view shows the date picker. However, when I choose a date, that date does not appear in the text field. For the sake of testing, I display the selected date below the date picker. I can see that value getting updated as I choose dates.
What am I doing wrong?
Thank you!
The following seems to work fine for me:
<div ng-controller="MyController">
{{birthday}}
<input kendo-date-picker ng-model="birthday" k-format="MM/dd/yyyy" />
</div>
Here is a live demo: http://jsbin.com/UhAQabi/2
Related
I would like to use Angular Material library in my project for showing the web page in Material design. I'm having input fields directly in a div, instead of having inside a form . How to properly do error validations now ?
Because the examples given on the documentation uses, form tag, which uses form name for showing ng-messages. How to achieve without form ?
You may use the ng-form angular directive (see docs here) to group anything, even outside a html form. Then, you can take advantage from angular FormController.
<div class="form-group" ng-form name="myForm">
<input name="myInput" type="text" class="form-control" ng-model="bindTo" ng-maxlength="5">
<span class="error" ng-show="myForm.myInput.$error.maxlength">Too long!</span>
</div>
Example Plunker
Hope it helps
Trying to bind date to input, but it is not binding:
<body ng-app>
<div ng-controller="MainCtrl">
<input type="date" ng-model="dateString"/>
<br/>{{ dateString }}
<br/><input type="date" ng-model="date1"/>
<br/>{{ date1 }}
</div>
</body>
function MainCtrl($scope, dateFilter) {
$scope.dateString = "2015-08-11T00:00:00";
$scope.date1 = new Date("2015-08-11");
}
http://jsfiddle.net/47fLdefo/
What am i doing wrong?
Your jsfiddle contains error. You forgot to define module. see here. It is working. Another thing you can not bind a string to a date. string has to be converted into date before binding by new Date(yourDateString).
$scope.dateString = "2015-08-11T00:00:00";
Above should be changed by following
$scope.dateString = new Date("2015-08-11T00:00:00");
Edit: I did not notice that your angular version is 1.0.2. input type date is not there. Try to upgrade your angular.
See date is not binding in 1.0.2
I feel a few things need clarifying as the other answers have glossed over it. The issue is not directly module definition (whilst that is an issue in itself).
The issue is support for using inputs with a type of date was not added until v1.3 according to this source however your using v1.0.2.
If you want to use inputs with the native date picker you will need to upgrade your version of Angular.
Also using a type of date the model value must be a date object not a string representation according the the docs: https://docs.angularjs.org/api/ng/input/input%5Bdate%5D
There are other options if you can't upgrade such as BootStraps date picker however.
Standard date field with datepicker-popup from UI Bootstrap.
Setting date programmatically - no problem. But after ANY change it is marked as $invalid and stays $invalid even format is correct and I edit it to previous value (which was correct in the beginning). Why?
<form name="form">
<input name="testDatepicker"
ng-model="testDatepicker"
placeholder="dd-MM-yyyy"
datepicker-popup="dd-MM-yyyy"/>
<div style="color:red;font-weight:bold;"
ng-show="form.testDatepicker.$dirty && form.testDatepicker.$invalid">
Invalid date
</div>
</form>
JSFiddle: http://jsfiddle.net/yoorek/mug2e381/
Apparently there is a bug in UI Bootstrap: https://github.com/angular-ui/bootstrap/issues/3835
Upgrade the version to the latest one. It has at least been resolved in version 0.14.3.
If you read following Angularjs validations, you understand that:
Message will appear if user interacted and did not fill the date manually.
The problem is when date is filled using the datepicker the input is not recognized by Angularjs and still consider $invalid true, so the message remains there which is confusing/problem although date is already filled using datepicker!
<div class="form-group" ng-class="{ 'has-error' : AddForm.Birthdate.$invalid && !AddForm.Birthdate.$pristine }">
<input type="text" required data-provide="datepicker" class="form-control" name="Birthdate" ng-model="Birthdate" />
<span ng-show="AddForm.Birthdate.$invalid && !AddForm.Birthdate.$pristine" class="help-block" >
Birthdate is required.
</span>
</div>
You can either validate it prior to form submit, or else hook a listener on your datepicker to manually set the model property Birthdate value.
It seems bootstrap datepicker is built on top of JQuery datepicker, manually setting the value would be a bad practice you can refer to:
Update Angular model after setting input value with jQuery
a better approach would be to use some built-in angular component such as the ones from:
https://angular-ui.github.io/bootstrap/
http://dalelotts.github.io/angular-bootstrap-datetimepicker/
https://github.com/dalelotts/angular-bootstrap-datetimepicker
I discovered a new way for this problem-
First of all create an id for that input box and then create a function say $scope.assign(), which simply assign the id value to the model of that input.
Something Like this-
$scope.assign = function() {
$scope.modelValue = $('#idName').val();
}
Now use ng-bind="assign()" to your input box.
It worked for me :)
Was facing the issue, and its because of the picker you are using is built on top of Jquery which remains undetectable by the scope on update.
For my new project I have added another library and its pretty awesome.
See the documentation http://dalelotts.github.io/angular-bootstrap-datetimepicker
Providing the piece of code for which I have added a wrapper directive
My Previous Answer was based on work around and because at that time of answer I was pretty new to the angular and now instead of that I will recommend, not to use an library which is built on top of Jquery in Angular project. Instead prefer angular libraries.
Coming on the topic-
For date time picker I found one very good library
https://github.com/indrimuska/angular-moment-picker
You can find more libraries in built in angular, but I found it pretty useful for other validations too like min-date, max-date validation.
Using this library will solve the issue of validation for sure and its pure Angular way.
So I am trying to evaluate AngularJS as I think it is interesting however it is quite different from what I have been using which is BackboneJS. As part of this evaluation I want to take a few page of my existing Backbone application and try to port them over to AngularJS. So I have the following html layout:
<html>
<head>
</head>
<body>
<div class="page-wrapper">
<div class="header-wrap">
<ul>
<li>Ryan Zec</li>
<li>Admin</li>
<li>Logout</li>
</ul>
</div>
<div class="content-wrap">
<form>
<input type="text" name="username" value="" />
<input type="password" name="password" value="" />
<input type="button" value="Login" />
</form>
</div>
<div class="footer-wrap">
<span>Copyright © 2012 - Ryan Zec
</div>
</div>
</body>
</html>
Now in backbone I would have the div with the -wrap classes be empty and to contents for each section one would go in individual templates (and each section could have more than one template that might display in it). There would then be a view associated for each template to would attach to the correct element and display the contents of the template in it.
Now with AngularJS, it is discouraged to do direct DOM manipulation everywhere except in directives. So I am wondering what is the best way to have the same setup in AngularJS that I do with BackboneJS keeping in mind that the content of these sections need to be switched out for different content based on the page/url they are viewing? (I know I can add the ng-directive-name to the div so on initial load, it load correctly but how do I get it to reload to different data when the page is switched in a single page application).
Answer is directives :)
you can either use this -> http://jsfiddle.net/thaqL/
or just download chrome -> go to http://angularjs.org -> press F12 -> check out how they did it
hope it helps.
cheers
I think for the time being the best answer is ngInclude. I think that the AngularJS team wants to make routes more powerful (based on something I remember reading) in the future (like multiple views per route where each should should have a controller for the header, a controller for the footer, and a controller for the main content) but until then ngInclude should hopefully get me by.