I use UI Bootstrap 1.3.2, Bootstrap 3.3.6 and Angularjs 1.5.5, but I'm having a problem with uib-datepicker-popup. If the value of the corresponding input field is null/not set, the calendar shows undefined date fields (null, NaN):
Code of input field:
<input type="text" uib-datepicker-popup="dd.MM.yyyy" datepicker-options="datepickerOptions" ng-model="mydto.teilnahmebis" />
The initDate option is ignored - code from controller:
$scope.datepickerOptions = {
minDate : new Date( '2010-01-01' ),
initDate : new Date()
};
The popup works if the input field already has a value. But normally that's not the case. Any idea, how to resolve this issue? Thanks for an answer.
I had the same problem, your ng-model variables is setting with a invalid date data...
check if you are overwriting your default value and set it as null
I think you might have done something wrong.
I have created a plunker code for you, and its working as it should be.
You can go through it.
https://plnkr.co/edit/Yz2shW?p=preview
Related
I'm using Angular UI Datepicker. It's behavior is correct on all tested browsers except IE9. On IE9 when i choose some date, then open datepicker again and click on "Clear" button(native button coming from the directive) then "null" text is shown in datepicker's input field.
I have found a related question about that issue. The problem is that in IE whenever javascript sets the input value to a variable which is null then the input field is filled up with the text "null". So the solution for IE9 is to do
document.getElementById('some_id').value = someVar || ''
instead of
document.getElementById('some_id').value = someVar;
but that solution is not applicable for my case because the value of input is being set in the code of directive and i don't want to change that code because dependency is coming from bower and can be updated in future.
The only thing i can do is to write an angular watcher for datepicker model value setting it to empty string in case when it's value becomes null or undefined, but i don't like that solution as i need to do that for each and every page where datepicker is used.
Any idea ?
I'm trying to use Bootstrap Datepicker from eternicode in combination with angularjs.
see jsfiddle
var app=angular.module('myApp', [])
.controller('dateCtrl', function($scope) {
// Case 1:
$scope.datepick = '';
// Case 2:
//$scope.datepick = '25.04.1986';
$scope.setFirstDate = function() {
$scope.datepick= '13.10.1960';
};
$scope.setAnotherDate = function() {
$scope.datepick = '20.02.1967';
};
});
$(document).ready(function(){
$('.datepicker').datepicker({
autoclose: true,
format: 'dd.mm.yyyy',
clearBtn: true,
todayBtn: 'linked',
todayHighlight: true,
weekStart: '1',
calendarWeeks: true,
keyboardNavigation: false
});
});
Essentially, it works fine. But when I change the date programmatically, BS Datepicker ignores it. This shows, when you initially load the fiddle and follow these steps:
1) Click on 'First me!'
2) Select the input field, without touching the datepicker
3) Tab out, press Esc, or click anywhere but the datepicker (close it without selecting a date)
You'll see, that the input field is now empty.
This does not happen because of an invalid date-format as suggested in this question: Uncomment line 6 in the fiddle and test case 2. Repeat above steps. The datefield now shows '25.04.1986'.
Also, in both cases you can test clicking the datepicker and then repeating steps 1-3. The input field will show the last date selected by the BS Datepicker.
{{datepick}}
shows, that the ng-model is always accurate, so this question is not a duplicate of this or this question. Seeing that angularjs is always aware of the actual date, I don't see how scope.apply would solve my problem.
This tells me: BS Datepicker is keeping track of his own and will only remember the initial date or the dates selected by the datepicker itself. And when closing without picking a new one, it will reset the input field to this remembered value.
So how can I prevent this from happening?
So, I found a workaround for this problem. To keep the Datepicker from resetting the input value, add:
forceParse: false
to your Datepicker options. See updated jsfiddle.
Even though this solves the problem at hand, keep in mind, that the Datepicker will no longer parse/check/correct any inputs.
I do believe this to be a bug and will create an issue at Github.
When using the Angular UI datepicker in the edit view of the form, until I change the date of the input box the date is not getting passed through Angular UI.
Eg : If the existing date value is 16-September-2014
If I just POST the data without clicking on the datepicker the value I get in javascript is
'16-September-2014'
But if I first select the datepicker and change the date the final value I get in javascript is
'2014-09-06 00:00:00'
This is library I am using
http://angular-ui.github.io/bootstrap/
Try this on your code.I am not sure, but it may solve your problem.
$scope.toDay = new Date();
$scope.date = $scope.toDay;
Now bind $scope.date in your HTML/Jade using ng-model.
data-ng-model="date"
date input is not showing the date until the user change it
// showing the date
<p>{{someDate | date}}</p>
// not showing the date. instead showing mm/dd/yyyy.
// but value will change when use change is
<input type="date" ng-model="someDate">
example code in jsbin
it IS working on version 1.3.0-beta.3, but
I need it to work on stable version 1.2.14.
is it possible?
I've created a simple directive to enable standard input[type="date"] form elements to work correctly with AngularJS ~1.2.16.
Please look here for details:
https://github.com/betsol/angular-input-date
And here's the demo:
http://jsfiddle.net/F2LcY/2/
Hope it helps!
I think the answer is you must upgrade to angularjs 1.3 or newer. Details in angular.js/pull/5864. The commit implementing this is pretty large to try to backport to 1.2 IMHO.
Try converting the someDate scope variable from string to Date format and then if you use input type="date" ng-model="someDate" . This solved my problem .
Considering 3 dates : myDate1, myDate2, myDate3.
I'd like to validate that myDate1 < myDate2 < myDate3
Dates are set by the date picker directive found in angular-ui.
Here is a plunker : http://plnkr.co/edit/FTcJNHxuv3RFtBCUw7Ck
I'm having difficulties founding the right way to do that.
I'm using ui-validate but it looks like when a condition is evaluated to false, the model is set to undefined.
Edit : It turns out that model being set to undefined is normal Angular behaviour. However there is a bug in the ui-validate directive. I'll update this post once it's resolved. See : https://github.com/angular-ui/ui-utils/issues/25
Please have a look at this fiddle. http://plnkr.co/edit/p0cq1idV6xTF2LyorQ06?p=preview.
Instead of using ui-validate i used ng-change and an extra scope variable formValid to track the validity of form.