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
Related
I'm using
<ion-radio>
<div>Item 1</div>
</ion-radio>
I tried to apply some css to the existing classes, but unfortunately nothing worked. Any help will be appreciated. Thanks in advance. Color is not applying for unchecked radio button icons.
You should be able to get it to work using the color attribute like so:
<ion-radio color="secondary"></ion-radio>
If not, you can style the CSS manually like in the codepen here: http://codepen.io/anon/pen/YVvZqp
If you are using ionic v4 than use this style to change radio button checked color
--> Radio in popup
.custom-popover {
ion-radio {
--color-checked: #75D154;
}
}
and if you are using simple radio group than paste this style to change the color of radio button
--> Radio Button
ion-radio {`enter code here`
--color-checked: #75D154;
}
I used seiyria angular-bootstrap-slider for range slider,but initially when page loads the tooltip is at wrong position.when it is placed in normal page it is working fine,but in modal it is intially at wrong position,but when I click it will be set.So how to slove this issue.
HTMl:
<button class="btn btn-default" value="modal"
onclick="confirmChangeMaxHours();"><i
class="glyphicon glyphicon-cog"></i> Adjust Value
Here is the link:
Codepen
I found this suggestion in some site:
setTimeout(function() {
slider.slider("relayout");
}, 500);
But,where I have to give setTimeout function,I tried to give but it is showing error like Slider is not defined.
Thanks in Advance.
add this css into your code
.tooltip{
margin-left:-32px!important
}
In my implementation the modal was over the tooltip. So, to fix it, I put the tooltip over all elements by adding a big z-index to all tooltips.
.tooltip.tooltip-top,
.tooltip.tooltip-bottom,
.tooltip.tooltip-left,
.tooltip.tooltip-right {
z-index: 100000;
}
I find it extremely difficult to make an animation in angular, comparing to jquery. There are so many versions of angular animation fadein and fadeout that I found them from blogs/ tutorials/ etc, some of them are on older version of angular. Angular's seems to be very inconsistent when a newer version of it comes out to replace the old ones. I can't see any standard way of doing it. Hence I don't know where to start.
I just to fade in a form or a html doc when the button is clicked.
html,
<button ng-click="loadInclude" >Load Include Form</button>
<div ng-include="'form.php'" ng-if="readyToLoadForm===true"></div>
angular,
var app = angular.module("myapp", ['ngAnimate']);
app.controller("FormController",function($scope) {
$scope.readyToLoadForm = false;
$scope.loadInclude = function(e) {
$scope.readyToLoadForm = true;
};
}
);
any ideas?
you can use a ng-show or ng-hide in this case
<div ng-show="readyToLoadForm" class="animate-show animate-hide">TEST HERE</div>
when using angular-animate.js angular will add and remove several classes to this item when showing and hiding. based on that classes we can set a css animation to the element.
here is a simple plunker
for ng-include animation
ng-leave .ng-leave-active .ng-enter-active classes add to the element. there is a little desc about classes added when animating. and that desc is from ngAnimate
here is the ng-enter demo Plunker
here is the reference for how the classes assigned to the element when animation elements in angularjs
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.
I am somewhat new to using Angular and AngularStrap directives. I need to use the tab directive with static markup like the example:
<div data-fade="1" bs-tabs>
<div data-title="'Home'"><p>Static tab content A</p></div>
<div data-title="'Profile'"><p>Static tab content B</p></div>
</div>
On another part of the page I would like to display a div only when the first tab is selected. The div is not part of the tabs, but is in the same overall controller. How can I show/hide this div based on the selected tab?
Something like this?
<div ng-show="???? active tab stuff here ????">Home tab is selected</div>
Thanks for any help.
As shown in the example on the AngularStrap page the active tap is stored in
tabs.activeTab
So you can use this property to conditionally show display something else like so
<div ng-show="tabs.activeTab == 0">The first tab is active</div>
UPDATE
Even with non object tabs you can just bind a model against the bs-tabs to store the active ID like so:
<div data-fade="1" ng-model="tabs.activeTab" bs-tabs>
Here is an updated plnkr. (Click on the 3rd tab and see the 'Test' text appear)
I found somewhat of a hack to resolve this issue for now. This does not seem like the best approach, so if someone has a better idea, please share.
I realized that the bsTabs directive is creating data-toggle attributes for each tab. By watching the data-toggle shown event, I am able to recognize the tab change and display the div. The controller code looks like this:
$scope.HomeTabSelected = true;
function watchTab() {
$('a[data-toggle="tab"]').on('shown', function (e) {
$scope.$apply($scope.HomeTabSelected = (e.target.innerHTML == "Home"));
})
}
setTimeout(watchTab, 2000); // setTimeout necessary to allow directive to render
and the HTML div uses ng-show.
<div ng-show="HomeTabSelected">Home tab is selected</div>