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.
Related
I am using the below code to insert a date picker text box.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script>
function MainController($scope) {
$scope.date = new Date();
}
</script>
<body ng-app>
<div ng-controller="MainController">
<input type="date" ng-model="date" value="{{ date | date: 'yyyy/MM/dd' }}" />
</body>
Angular JS Calendar
I would like to if the below is possible to implement;
A. disable weekends selection
B. disable previous dates (starting yesterday)
C. disable 4 days including today (ex. if today is 12 then from 12 to 17 should be disabled - which includes weekends as well that are already disabled)
I have done this using JQuery Datepicker but not able to do it with AngularJS. Please help.
Attached screenshot of Jquery Datepicker.
Here you are relying on browsers' implementation of <input>, which is not very powerful. Using this, you can't grey out specific dates, only ranges using min and max attributes (which makes your B objective achievable).
There are several solutions from the AJS community, including:
ui-date, apparently a copy-paste of jQuery's picker you're used to (read the warnings though, they don't sell it as the best solution)
UI Bootstrap's datepicker seems more powerful and is referred to by ui-date's page - yet I don't see how you'd achieve A and C objectives using its options
the proven md-datepicker, which allows you to achieve B with md-min-date and md-max-date, and to achieve A, B and C with md-date-filter; demos are here (my personal favorite, in case it's not obvious enough ^^)
I have the following code:
<input class="form-control"
uib-datepicker-popup="dd.MM.yyyy"
ng-readonly="!isEditable"
datepicker-append-to-body="true"
ng-model="logicalDepotVo.rtCreationDate"
is-open="isDatepickerOpen"
placeholder="Enter Creation Date"
ng-click="isEditable ? onCreationDateDatepickerClick() : ''"/>
The value does not view value of model, but bind model works as ng-model. When I removed uib-datepicker-popup, all works fine. I tried to remove custom format, play with other attributes, but have no any successful result. Maybe, somebody has an idea what should be done?
Probably this could explain your issue (check you ng-model for correct date format):
ng-model - The date object. Must be a Javascript Date object. You may use the uibDateParser service to assist in string-to-object conversion.
angularjs bootstrap
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 bind value for input of type date..
Here is my AngularJS code that I am trying to bind the value to:
$scope.date = new Date();
$scope.dateString = dateFilter($scope.date,'dd-MM-yyyy');
And html:
<input class="date" type="date" ng-bind="dateString">
What I am trying to do, is I am trying to set default value to todays date. However, when I am loading my page, it just gives me following result:
<input class="date ng-binding" type="date" ng-bind="dateString">08-04-2015</input>
Any help will be more than welcome :)
Thanks,
uksz
You need to be using version 1.3 or higher for date support. you also want to use ng-model instead of ng-bind, because ng-bind is one way only
I want to use ng-pattern to further enforce the date format on an input field using Angular UI datepicker. The problem is when I do this it's always showing invalid.
<p class="input-group">
<input type="text" datepicker-popup="MM/dd/yyyy" is-open="opened" close-text="Close"
ng-model="someDate" class="form-control" placeholder="mm/dd/yyyy"
ng-pattern="/^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/" required />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
If I apply the same ng-pattern to a plain input field (no datepicker), it works as expected.
There seems to be a conflict but I'm not sure what it is. Any ideas?
Update:
Here is a simple plunker to illustrate the issue as requested. After some further digging it does seem to be running the pattern against the underlying Date object. When I use a custom directive that formats the date, however, it runs it against the actual input.
The only documentation I see for ng-pattern is a brief mention here under input. Is there anything else that maybe I'm missing?
As I mentioned in my comment, what is happening is that the datepicker directive is changing the model value from a String to a Date object. When ngPattern tried to validate the Date object it will fail because the string value of a Date is not going to match the pattern that you are using.
What you can do is create your own directive that hooks into the $parsers of the ngModelController to run your pattern check and then call $setValidity() based on what the value is. $parsers is actually built for this type of functionality where you want to run your own custom validation on a ngModel value.
Following these bullets is a directive that will accomplish the functionality that you want. I want to explain the logic in the directive before I show you the code:
In order to add your own $parser you have to add a require for ngModel in your directive definition so that you can access the ngModelController
Because RegExp expects the pattern argument without the beginning and trailing slash, I removed them in the pattern directive argument
datepicker changes the model value from a String to a Date. Since datepicker uses unshift to add it's $parser function to the beginning of the $parsers array, we also need to use unshift to put our $parser before datepicker's $parser.
As you mentioned, the datepicker directive will take any value that it can parse into a date and use that for the model. In order to make sure that only dates which match the pattern are used, I'm returning undefined (as specified in the docs) for dates that don't match the pattern. I'm not doing this check for values that come in as a Date object since that means that it was chosen using the datepicker widget.
As I just alluded to in the previous bullet, I'm not doing the validity check if the value is already a Date object since that means that it was chosen using the datepicker widget and that means that it was a valid date.
directive code
app.directive('awDatepickerPattern',function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope,elem,attrs,ngModelCtrl) {
var dRegex = new RegExp(attrs.awDatepickerPattern);
ngModelCtrl.$parsers.unshift(function(value) {
if (typeof value === 'string') {
var isValid = dRegex.test(value);
ngModelCtrl.$setValidity('date',isValid);
if (!isValid) {
return undefined;
}
}
return value;
});
}
};
});
html - make sure that you don't forget to remove the beginning and trailing slash in the regex definition:
aw-datepicker-pattern="^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$"
And here is an updated plunker with my code.
So why again didn't ng-pattern work?
In case you didn't notice the root cause for why ng-pattern doesn't work when used with the datepicker directive is because the datepicker directive adds it's own ngModelController $parser to the beginning of the $parsers array by using unshift, which changes the model value from a String to a Date.
It seems that an alternative solution to the other workarounds posted here is to upgrade to AngularJS 1.4.5, released 2015-08-28:
https://github.com/angular/angular.js/blob/master/CHANGELOG.md#145-permanent-internship-2015-08-28
The above directive plunker only works when the date is required. I fixed it by modifying the directive as follows:
ngModelCtrl.$setValidity('datep',isValid);
Since the date picker runs after this directive it sets 'date' back to valid.