I'm using the datepicker in the Angular bootstrap collection. (http://angular-ui.github.io/bootstrap/).
I know that you can disable individual dates in the datepicker, but I need to disable the whole datepicker, as shown in this blog post (which uses jQuery).
How would you disable the whole datepicker using Angular?
It seems there is no way of doing this directly. But there are some workarounds which were discussed in https://github.com/angular-ui/bootstrap/issues/1113
Instead you can make a scope variable that will indicate if datepicker is disabled and if yes, then hide datepiker at all and show the model of datepicker in a fancy container.
Other way is to set date-disabled to true, disable input and set show-button-bar to false.
But again...those are workarounds ... you may try to make them look prettier by wraping to the custom directive like datepicker-disable if you want. Or wrap jquery datepicker you like into angular directive, which will be a bit more work.
If I understand what you are asking correctly, I had the same problem. This is what I did to disable and enable the entire datepicker in Angular. I know you already have your answer but I figured I would share anyways.
Here is my HTML/bootstrap (which I got from the website you added at the top http://angular-ui.github.io/bootstrap/ almost half way down the page): All I did was add ng-disabled="disabled" to the input and button tags. disable is just a $scope variable that gets set to true or false when some event happens in my app
<div class="col-md-6, nonFields" style="margin-top:6px;">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="MM/dd/yyyy" is-open="opened1" ng-model="dtClosed" ng-required="true" close-text="Close" ng-disabled="disabled"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'opened1', 'opened2', 'opened3')" ng-disabled="disabled"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
In my angular js code I set $scope.disabled to true at the top
$scope.disabled = true;
Then when the user clicks a button and with the correct input I pretty much set $scope.disabled to false
$scope.shortCodeClick = function(){
$scope.disabled = false;
};
and the entire datepicker becomes enabled. With this you can obviously customize what you want to do with whatever event and flip the datepicker back and forth from enabled to disabled and back. Hope this helps.
See the code, it watch the ngDisabled attribute value, because the control can be disabled conditionally
scope.$watch(attr.ngDisabled, function (newVal) {
if(newVal === true)
$(elm).datepicker("disable");
else
$(elm).datepicker("enable");
});
For complete article and demo see the link and many more like how to use start and end date validation
I found well working solution here: look at bradrisse comment
Using this CSS:
.disabled-picker { cursor: not-allowed; } .disabled-picker:before { content: "";
z-index: 1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.8); }
And the HTML:
<div ng-class="{'disabled-picker': anyBoolHere }">
<datetimepicker ng-model="data.date"></datetimepicker>
Does the trick.
Related
Hello I want my tooltip to appears whenever input[submit] is disabled. Disabling input works very well it is disabled when inputs[text] are invalid but tooltips doesn't shows.
Here is my code:
<input type="submit"
form="loginData"
ng-disabled="loginData.login.$invalid || loginData.password.$invalid"
class="btn btn-primary btn-md"
ng-click="$ctrl.login()"
value="Zaloguj"
uib-tooltip="Wypełnij formularz!"
tooltip-placement="top"
tooltip-trigger="'mouseenter'"
tooltip-append-to-body="true"
tooltip-enable="loginData.login.$invalid || loginData.password.$invalid" />
tooltip-enable directive should make tooltip enabled when input login or password are invalid but it doesn't work, please quick help!
EDIT:
I was working with google chrome so I didn't realize that this solution actually works in others browsers (mozilla for sure). But still it doesn't work with newest google chrome so it is not satisfactory enough.
Summarizing the new question is how to walk around that issue in google chrome?
HTML elements with disabled attribute do not fire events.
But don't worry, you can use a simple div/span with uib-tooltip directive as wrapper of the disabled input/button.
In your case you want to show the tooltip only when is disabed, so try the following... (PLUNKER)
HTML
<span uib-tooltip="Demo tooltip"
tooltip-enable="isBtnDisabled"
ng-class="{'my-tooltip': isDisabled}">
<input type="submit" ng-disabled="isDisabled" class="btn btn-info" value="My btn">
</span>
CSS
.my-tooltip {
display: inline-block;
}
.my-tooltip input {
position: relative;
z-index: -1;
}
I have an ng-click in in a bootstrap popover that doesnt seem to work. when I move it out of the popup into the page it seems to work. Also the ng-model value doesnt seem to update either.
<div id="popover-content" class="hide">
<input type="text" placeholder="Quote ID" ng-model="selectedItems.quote.label">
<button type="button" ng-click="newQuote()">New quote</button>
</div>
Is this because the popover is created in the dom and angular does not know it exists? Any ideas how I can get it to work? Thanks
EDIT:
Here is the newQuote
$scope.newQuote = function() {
$scope.selectedItems.quote = angular.copy(defaultQuote);
$scope.solution.quotes.push($scope.selectedItems.quote);
$scope.selectedItems.quote.label = 'New Quote';
$scope.addMessage('Quote created successfully', 2);
};
EDIT 2
Here is a plunker showing the issue - the alert is not displayed when ng-click="newQuote()" is fired
http://plnkr.co/edit/ANH98vlflPK9c5qA3ohO?p=preview
You should create a Directive to make angular works with Bootstrap Popover. You can take a look in your Developer console when using Bootstrap Popover. It actually does not reuse the DOM that you predefined - ie :
<input type="text" placeholder="Quote ID" ng-model="selectedItems.quote.label">
<button type="button" ng-click="newQuote()">New quote</button>
But add in a new piece of DOM - ie
<div class="popover fade bottom in" role="tooltip" id="popover770410" style="top: 30px; left: 0px; display: block;">
<div class="arrow" style="left: 15.9420289855072%;">
</div><h3 class="popover-title">New quote</h3><div class="popover-content">
<input type="text" placeholder="Quote ID" ng-model="selectedItems.quote.label" class="ng-pristine ng-untouched ng-valid">
<button type="button" ng-click="newQuote()">New quote</button>
</div>
</div>
Therefore Angular will not understand new piece of DOM because it has not compiled yet - ie : You cannot use ng-click as well as ng-modal. One way to work around this is to create a directive and compile your html content before passing that piece of DOM to Bootstrap Popover.
I have created this fiddle to demonstrate this idea.
As you can see :
I have compile you content and bind it to current scope
$compile(content)(scope);
Before passing that piece of DOM to popover
var options = {
content: compileContent,
html: true,
title: title
};
$(elem).popover(options);
With this way to can let Angular understand new piece of DOM added and do its work correspondingly.
Furthermore, actually there quite some directives that works with Bootstrap Popover that you can take a look at instead of creating new directives
AgularUI Bootstrap
Angular Strap
Reference :
http://tech.pro/tutorial/1360/bootstrap-popover-using-angularjs-compile-service
twitter bootstrap popover doesn't work with angularjs
I'm wondering if any knows how to disable the month/year navigation button on the Angular UI datepicker (http://angular-ui.github.io/bootstrap/#/datepicker).
We want to disable the ability for users to click on the "Month/Year" text in between the navigation arrows and can't figure it out.
Our current config options look like this:
$scope.dateOptions = {
'year-format': "'yyyy'",
'starting-day': 0,
'show-weeks': false
};
Our html looks like this:
<span datepicker-popup="shortDate" ng-model="currentDate" is-open="isDatePickerOpen" datepicker-options="dateOptions" show-button-bar="false" ng-click="openDatePicker($event)"></span>
Has anyone figured this out?
You can use the max-mode property and set it to day and will disable that button.
<datepicker max-mode="day" ng-model="dt"></datepicker>
Have a look here: http://plnkr.co/edit/5I8QQiI3dLvOpyDjd2fk?p=preview
How about just using css to remove the buttons from the ui?
.date-picker-button { display: none; }
Note: I do not know which selector to use, its just an example. You'll have to inspect the element to see what the actual selector is
I want to hide only clear button from datepicker directive in angular js.
Currently there are three buttons at the bottom of the angular js datePicker directive(Today, clear and Close), Is there any way to make visibility of these buttons configurable, such that i can hide one of the buttons out of it.
The Date picker which i am using is using ui-bootstrap library.
Currently there is now way to hide individual buttons in the datepicker button bar via options on the directive. You can override the template and remove the clear button, but that is a global patch and doesn't offer hiding/showing based on a condition. You could create a class that targets the button you want to hide as this plunk
.datepicker-noclear [ng-click="select(null)"] {
display: none;
}
demonstrates although that is a fragile workaround.
I would suggest submitting a feature request to add the option of which buttons are available in the button bar.
Easy, replace the template:
<script type="text/ng-template" id="template/datepicker/popup.html">
<ul class="dropdown-menu" ng-if="isOpen" style="display: block" ng-style="{top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)" ng-click="$event.stopPropagation()">
<li ng-transclude></li>
<li ng-if="showButtonBar" style="padding:10px 9px 2px">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-info" ng-click="select('today')" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
</span>
<button type="button" class="btn btn-sm btn-success pull-right" ng-click="close()">{{ getText('close') }}</button>
</li>
</ul>
</script>
You hack with css. It worked for me.
.ui-datepicker .btn-group .btn-danger.btn{
display: none;
}
Further to Rob J's solution, if we add a ng-class={"require": "vm.required"} to the parent div of the datepicker input, or simply add a class called require to the div. Then use the magic css to hide or show the clear button depending on the value of vm.required:
.require button[ng-click^="select(null)"] {
display: none;
}
if you want to remove the clear button, it means that the field is required, and as I do not agree with forcing things (like creating a div parent and typing classes), then just set the element for which you active the datepicker as required
[uib-datepicker-popup][required] + [uib-datepicker-popup-wrap] button[ng-click*="select(null"] {
display: none;
}
<input type="text" ng-model="datePicker.date" uib-datepicker-popup="dd MMM yyyy" readonly is-open="datePicker.opened" ng-click="datePicker.opened = true" required />
You can do this css trick to hide the clear button :
.uib-button-bar > .btn-group > .btn-danger {
display: none !important;
}
You can hide it by adding to style.css this :
.uib-clear {
display: none;
}
I am creating a form where the user can configure a recurring event, so there are a large number of controls. At the top is a checkbox to enable/disable the schedule.
How can I disable, but not hide, the entire section based on the checkbox? If it is checked, the user should be able to make modifications to the schedule. If it is not checked, no changes should be allowed.
I'm fairly certain I can use the ng-disabled directive on each control, but I'd like to set some attribute/class on the entire container, rather than on each individual control.
I am using Bootstrap 3, so if there is a class that would provide this functionality, that would be an acceptable solution as well.
Here is the relevant section of the HTML:
<input type="checkbox" ng-model="status" title="Enable/Disable Schedule" /> <b>Schedule the task to run:</b>
<div class="row"> <!-- need a way to disable this row based on the checkbox -->
<span>Every <input type="number" ng-model="interval" />
<select ng-model="frequency"
ng-options="freq as freq.name for freq in frequencies"></select>
</span>
<div>
On these days:
</div>
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button"
class="btn"
ng-model="day.value"
ng-repeat="day in days">{{day.name}}</button>
</div>
</div>
I have tried:
<div class="row" ng-disabled="!status">
It didn't work, and based on the docs, it doesn't look like it is even supposed to, as its intended use is for disabling form controls. I also tried without the !, just to validate that it wouldn't work either.
OK, I found a technique that works for my purposes...
<div class="row" ng-class="{disabled: !status}"> <!-- added ng-class here -->
and
.disabled {
z-index: 1000;
background-color: lightgrey;
opacity: 0.6;
pointer-events: none;
}
This prevents clicks on the page and gives a nice visual indication of the section being "disabled".
It does not prevent me from tabbing through the controls, but it works OK for my purposes.