Angular bootstrap datepicker-popup with disabled input - javascript

Why datepicker-popup doesn't work if the input is disabled? And how can I let it work?
Code:
span.input-group
input.form-control(
type="text"
name="accountDate"
ng-model="account.date"
min-date="minDate"
max-date="maxDate"
datepicker-options="dateOptions"
ng-disabled="true"
uib-datepicker-popup="{{format}}"
is-open="date.isOpen"
close-text="Close"
close-on-date-selection="true"
show-button-bar="false"
)
span.input-group-btn
button.btn.btn-default(
type="button"
ng-click="openDatePicker()")
i.glyphicon.glyphicon-calendar
If I remove ng-disabled it works as expected. I tried to replace it with disabled and disabled="disabled"... not working at all.
I need it to be disabled and if I click on the button it should display the date picker...

A disabled input element is unusable and un-clickable. Source.
Try to use ng-readonly instead ng-disabled.

A workaround or hack is to place ng-hide on the div you want to add functionality to and declare a boolean in js file having value of true by default. User clicks on the button and that method should change the value of boolean to false. Hope this helps!

Related

How can I disable react-number-format input

I'd like to disable react-number-format input, but this component doesn't have disabled property.
How can I disable it?
disabled is working fine.
I have placed 2 components, one without the disabled attribute and the other one with the disabled attribute and the result is the desired one.
<NumberFormat
value={111}
thousandSeparator={true}
prefix="$"
className="some"
inputmode="numeric"
/>
<NumberFormat
value={222}
thousandSeparator={true}
prefix="$"
className="some"
inputmode="numeric"
disabled
/>
Check this sandbox

HTML5 Required input, removing and adding on the fly not working

I am trying to remove a required attribute from an input on the fly. The general idea is I have a field that is set to required, this field has custom validation with the pattern attribute. When the user clicks a button I am attempting to remove the required field.
I have put together a fiddle here:
https://jsfiddle.net/paulmatos/t1p1wub3/
HTML:
<form>
<input type="text" oninvalid='this.setCustomValidity("Enter a number in the Specified Range");' oninput="try{setCustomValidity('')}catch(e){}" pattern="[0-9]" required="required" name="password" id="password" />
<input type="text" required="required" name="temp" />
<input type="submit" class="btn btn-primary form-control" value="Submit" />
<div class="btn btn-default removeReq">Remove Required</div>
</form>
Jquery:
$('.removeReq').click(function() {
$('#password').removeAttr('required');
});
The issue I am experiencing has to do with the order of submission.
If you click remove required, and then submit the form you will see that it works as intended.
However, if you do those steps in reverse order, click submit first, then remove and try and submit again, you will notice I am still getting the validation error on the first input.
Is there anyway to get around this with this intended functionality, I am trying to get this to work just with the html5 validation.
I did have a look at the fiddle and the only way I could get the behaviour you wanted was by literally detaching, cloning and reinserting the field. Works tho.
$('.removeReq').click(function() {
var password = $('#password').removeAttr('required oninvalid oninput pattern').detach().clone();
$('form').prepend(password);
});
https://jsfiddle.net/t1p1wub3/2/
Think you are getting this due to the code in the oninvalid handler. Try this.
$('.removeReq').click(function() {
$('#password').removeAttr('required oninvalid');
});
You can try this instead of removeAtt():
$('.removeReq').click(function() {
$('#password').prop('required', false);
});

How to reveal (and hide) button after typing in Angular?

I am quite good in jQuery, but Angular is not (yet!) one of my strongest skills. I have the below JSFiddle in jQuery, but now it turns out I can't use jQuery, so I am forced to use Angular.
http://jsfiddle.net/eAt6Q/1/
What I want to do, is to show a button after typing something in an input field and removing it when the input field is blank (so at the initial state or when backspacing and there is no letter left), just like in the example.
How would I do this? How do I bind a button to a keypress, because I am struggling to find that out.
I have tried something like this:
<input type="text" id="testInput" />
<button ng-if="testInput.length"></button>
<input type="text" id="testInput" />
<button ng-hide="testInput.length"></button>
But this is not working and I know for sure I am doing something wrong.
ng-model is all you need in angular
<input type="text" id="testInput" ng-model="testInput" />
<button ng-show="testInput !== null "></button>
You can use ng-blur for more actions
you can use ng-show or ng-if both to hide the button but ng-if more suitable to hide button from dom
<input type="text" id="testInput" ng-model="testInput" />
<button ng-if="testInput !== null || testInput.length > 0"></button>
or you can also use ng-disabled to disabled the button without hide.

Add onclick event to disabled field

I am using a form a custom generator. The form is specified in a file, this file gets parsed and HTML elements will be generated by JSF 2.x programmatically, for example HtmlInputText by Apache MyFaces.
In our application we have a readonly user role. For those users we try to make all input options disabled. On input fields we are setting the html readonly attribute, for other elements, which have no readonly attribute like select fields, we are setting disabled attribute.
Unfortunately setting disabled=disabled will inactivate all javascript events too. Now, I need to trigger a javascript-function on click at a disabled option-field. How can I do this?
Wrap the disabled element in another element that supports the onclick attribute. A good example of this is the <h:panelGrid/>
<h:panelGrid style="width=20px" onclick="foo.myBar()">
<h:someComponent disabled="true"/>
</h:panelGrid>
I don't think, there is much you can do about it.
though there is one, ugly solution to this.
place position:absolute non-disabled container over your disabled elements i.e.
<select disabled="disabled" >
<option>one</option>
<option>two</option>
<option>three</option>
</select>
<div onclick="alert('s')"
style="width:56px;position:absolute; top:1.7%; left:1.6%;height:18px;" >
</div>
where value of top and left for the container depends on the position of the select
see this fiddle

Disable input text

for some reason I want to disabled an input text and for this I use this sample code :
$('#id').attr('disabled', 'disabled');
Is there any way to disabled an input text without use attribute disabled of input text, I mean for example use css or other ways?
In fact I want an input text act like a disabled one without change it attribute?
With Best Regards.
Try:
<input id="myTxt" type="text" onfocus="this.blur()"/>
Or by JS:
$('#myTxt').focus(function(){
$(this).blur();
});
You can't do it through CSS (unless you do something very complicated like hide the input and put a disabled-looking rectangle in its place). However, this will disable the input without changing the attribute:
$("#id").prop('disabled', true);
try this
<input type="text" disabled="disabled" value="" />

Categories

Resources