Unintended Reset of Bootstrap Datepicker when using angularjs - angularjs

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.

Related

ExtJs Checkbox Bind Issue

A checkbox in ExtJs Form Panel is not binding properly , i.e when the value is changed from checked(value is 1) to unchecked (value is 0) the value in model for the respective field is still checked(1). This issue occurs in version 6.2.0.981, but the issue is not reproducible in latest version 6.2.1.167. Here is the fiddle for the same, toggle between the versions and check the issue. please let us know if there are any workaround for this issue in 6.2.0.981 version. Also in release notes of 6.2.1.167 its told that "EXTJS-21886 - Checkboxes don't return the correct value" is fixed, but how to have this fix in previous versions?
CheckBox Bind issue Fiddle
You can fix this by adding
uncheckedValue: 0
to your checkbox config. Excerpt from the docs:
By default this is undefined, which results in nothing being submitted for the checkbox field when the form is submitted
The bug was that nothing was submitted during model update as well, and since nothing was provided, the value of the model was not updated.
In ExtJS 6.6 I was still trying to figure this out and it wasn't as straight forward as I'd hoped (Having the checkbox bind to the model and pass 1 for true and 0 for false to the binding). I wanted to avoid having a formula with a middle man binding in the model because I'd have to have a formula for every checkbox and that seemed silly.. Extending the combo box class and overriding getValue method like below. The accepted answer worked ok for unchecked but I was still getting true on checked.
Ext.define('Components.BinaryCheckBox', {
extend: 'Ext.form.field.Checkbox',
xtype: 'binary-checkbox',
getValue: function () {
if (this.value) {
return 1;
} else {
return 0;
}
},
});

'null' is shown in Angular UI Bootstrap's datepicker input field on Internet Explorer 9

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 ?

uib-datepicker-popup calendar with null/NaN if input initially null

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

Angular UI Bootstrap Datepicker is-open

I've been working on this for a while now, and am not sure where to go from here.
I am using Jade for my templates inside my app, and am trying to use the UI Bootstrap date picker as well. In UI Bootstrap 0.10.x everything was working fine, but in 0.13.3 I can't get the is-open attribute on the datepicker to work properly. Here is the jade template excerpt:
input(type="text", ng-model="item.exp_date", datepicker-popup="{{datepicker.format}}", min-date="{{datepicker.minDate}}", is-open="{{datepicker.opened}}", close-text="{{datepicker.closeText}}").form-control
span.input-group-btn
button(type="button", ng-click="openDatepicker($event)").btn.btn-default
i.glyphicon.glyphicon-calendar
You can see that for several attributes I'm using angular expressions to get preset values (i.e. datepicker-popup="{{datepicker.format}}". However, that expression does not work when I try to do the same thing with is-open. All the others work fine, and if I just put is-open="true" in for the attribute, the datepicker at least shows up on page load. The problem is you can never open it again.
Here's the pertinent controller code:
$scope.datepicker = {
format: 'MM-dd-yyyy',
minDate: new Date(),
closeText: "Close",
showWeeks: false,
yearRange: 50,
opened: false
}
$scope.openDatepicker = function($event) {
$scope.datepicker.opened = true;
}
and the error in the browser that pops up:
Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{datepicker.opened}}] starting at [{datepicker.opened}}].
http://errors.angularjs.org/1.4.5/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Bdatepicker.opened%7D%7D&p4=%7Bdatepicker.opened%7D%7D
at REGEX_STRING_REGEXP (http://localhost:3030/vendor/angular/angular.js:68:12)
at Object.AST.throwError (http://localhost:3030/vendor/angular/angular.js:12967:11)
at Object.AST.object (http://localhost:3030/vendor/angular/angular.js:12954:16)
at Object.AST.primary (http://localhost:3030/vendor/angular/angular.js:12862:22)
at Object.AST.unary (http://localhost:3030/vendor/angular/angular.js:12850:19)
at Object.AST.multiplicative (http://localhost:3030/vendor/angular/angular.js:12837:21)
at Object.AST.additive (http://localhost:3030/vendor/angular/angular.js:12828:21)
at Object.AST.relational (http://localhost:3030/vendor/angular/angular.js:12819:21)
at Object.AST.equality (http://localhost:3030/vendor/angular/angular.js:12810:21)
at Object.AST.logicalAND (http://localhost:3030/vendor/angular/angular.js:12802:21) <div ui-view="locations" class="ng-scope">
Like I said, the is-open attribute is the only one having this issue. If you have any suggestions for fixing the issue or a work around I'd love to hear it. Thanks!
Of course right after I posted the question, I figured out the problem. Apparently for that attribute, the {{ }} is unnecessary. All the other attributes need the curly braces, but that one doesn't. It must be because it assumes you will be adding in a variable to toggle the visibility.
Whatever the reason, I figured it out and got it working again. I'll leave this up in case anyone else gets as stuck as I did and can't get it working again.
For the atribute of angularjs (whatever) the {{ }} is not necesary, in this atribute you are in angularjs, and not needed call to angularjs.

ExtJS 4 ComboBox AutoComplete

I have an extjs combobox used for auto-complete having following configuration:
xtype:'combo',
displayField: 'name',
valueField:'id',
store: storeVar,
queryMode: 'remote',
minChars:2,
hideTrigger:true,
forceSelection:true,
typeAhead:true
There are two issues being faced by me:
a. If a user chooses a value from the list returned from server, but later wants to remove that value and keep combo-box empty, then also the old values re-appears on blur, not allowing combo-box to remain empty. How can I allow empty value in this combo-box in such a case? I understand it could be due to forceSelection:true, but then I need to keep it true as otherwise user can type any random value.
b. When the server returns an empty list, I want to display a message - No Values Found. I tried doing this, by putting this value in the displayField entity, i.e., {id:'', name:'No Value Found'}. But then in this case, the user is able to choose this value and send it to server which is not what is expected. Thus, how can I display the message for empty list?
Could someone please throw light on this?
For the issue related to forceSelection in the question above, following is the hack created which can serve the expected purpose:
Ext.override(Ext.form.field.ComboBox,{
assertValue: function() {
var me = this,
value = me.getRawValue(),
rec;
if (me.multiSelect) {
// For multiselect, check that the current displayed value matches the current
// selection, if it does not then revert to the most recent selection.
if (value !== me.getDisplayValue()) {
me.setValue(me.lastSelection);
}
} else {
// For single-select, match the displayed value to a record and select it,
// if it does not match a record then revert to the most recent selection.
rec = me.findRecordByDisplay(value);
if (rec) {
me.select(rec);
} else {
if(!value){
me.setValue('');
}else{
me.setValue(me.lastSelection);
}
}
}
me.collapse();
}
});
This needs to be included after library files of extjs have been included.
For the other issue of message to be shown at No Values Found - emptyText - works fine as suggested by Varun.
Hope this helps somone looking for something similar.
I've done this for Ext JS 3.3.1. I don't know if they apply to Ext JS 4, though I guess they should.
For the first problem, set autoSelect : false. autoSelect is by default set to true. This will work only if allowBlank : true is set. From the docs
true to select the first result gathered by the data store (defaults
to true). A false value would require a manual selection from the
dropdown list to set the components value unless the value of
(typeAheadDelay) were true.
For the second problem, use listEmptyText. From the docs
The empty text to display in the data view if no items are found.
(defaults to '')
Cheers.

Resources