I would like to link two date picker components in AngularJS. Basically, I use two input fields to select a date range. As soon as the user selects a start date, the date picker for the end date should be limited and only allow selections after the start date.
However, each date picker is defined by its own controller and I suppose, that they do not share their models due to different scopes.
This is a simplified example:
<div ng-controller="DatepickerDemoCtrl">
<div style="display: inline-block; min-height: 290px;">
<div uib-datepicker ng-model="contract.startDate"
ng-change="options2.minDate = contract.startDate"
datepicker-options="options1"></div>
</div>
</div>
<div ng-controller="DatepickerDemoCtrl">
<div style="display: inline-block; min-height: 290px;">
<div uib-datepicker ng-model="contract.endDate"
datepicker-options="options2"></div>
</div>
</div>
How can I set the options2.minDate property in the first controller, so that the second controller can read it properly? Is there any simple way to do that without introducing too much overhead?
Instantiate the controller only once:
<div ng-controller="DatepickerDemoCtrl">
<div style="display: inline-block; min-height: 290px;">
<div uib-datepicker ng-model="contract.startDate"
ng-change="options2.minDate = contract.startDate"
datepicker-options="options1">
</div>
</div>
̶<̶/̶d̶i̶v̶>̶
̶<̶d̶i̶v̶ ̶n̶g̶-̶c̶o̶n̶t̶r̶o̶l̶l̶e̶r̶=̶"̶D̶a̶t̶e̶p̶i̶c̶k̶e̶r̶D̶e̶m̶o̶C̶t̶r̶l̶"̶>̶
<div style="display: inline-block; min-height: 290px;">
<div uib-datepicker ng-model="contract.endDate"
datepicker-options="options2">
</div>
</div>
</div>
Then the scope will be shared.
I would like to change the style of dates in my month calendar view which have events.
This is the design I'm developing:
So I need to change style of .rbc-date-cell to blue for each date with an event. I have searched high and low for a solution to this, most commonly I find examples for creating a CustomDateCell for dateCellWrapper which will conditionally style cells, here's one example I've tried:
React Big Calendar how to style a single day in the month view
This changes the style of .rbc-day-bg not .rbc-date-cell. The markup on RBC is complex, because the devs made it for events which can stretch over multiple days. This means that the background divs are in a different parent to the datecells. I'd prefer not to traverse/manipulate the DOM to style these cells.
Surely there must be a way to style the datecells? the docs and all answers I've found on SO and github haven't yielded anything so far. Could it be done with eventPropGetter?
EDIT
The HTML is as follows. I've also tried custom slot props and eventPropgetter but have not been able to directly manipulate the rendering of .rbc-date-cell
<div class="rbc-month-row">
<div class="rbc-row-bg">
<div class="rbc-day-bg" style="background-color: lightgreen;"></div>
<div class="rbc-day-bg" style="background-color: lightgreen;"></div>
<div class="rbc-day-bg rbc-today" style="background-color: lightgreen;"></div>
<div class="rbc-day-bg" style="background-color: lightblue;"></div>
<div class="rbc-day-bg" style="background-color: lightblue;"></div>
<div class="rbc-day-bg" style="background-color: lightblue;"></div>
<div class="rbc-day-bg" style="background-color: lightblue;"></div>
</div>
<div class="rbc-row-content">
<div class="rbc-row">
<div class="rbc-date-cell">13</div>
<div class="rbc-date-cell">14</div>
<div class="rbc-date-cell rbc-now rbc-current">15</div>
<div class="rbc-date-cell">16</div>
<div class="rbc-date-cell">17</div>
<div class="rbc-date-cell">18</div>
<div class="rbc-date-cell">19</div>
</div>
</div>
</div>
rbc-event's exist in a different row to the rbc-date-cell, in this markup there are events on the 23rd and 24th. I don't want to traverse the DOM to conditionally style divs as this isn't a very React way of doing things, it should be done before rendering if possible
<div class="rbc-row-content">
<div class="rbc-row ">
<div class="rbc-date-cell">21</div>
<div class="rbc-date-cell">22</div>
<div class="rbc-date-cell">23</div>
<div class="rbc-date-cell">24</div>
<div class="rbc-date-cell">25</div>
<div class="rbc-date-cell">26</div>
<div class="rbc-date-cell">27</div>
</div>
<div class="rbc-row">
<div class="rbc-row-segment" style="flex-basis: 28.5714%; max-width: 28.5714%;"> </div>
<div class="rbc-row-segment" style="flex-basis: 14.2857%; max-width: 14.2857%;"><button class="rbc-event"><div class="rbc-event-content" title="2/2"><p class="event-wrapper">2/2</p></div></button></div>
<div class="rbc-row-segment" style="flex-basis: 14.2857%; max-width: 14.2857%;"><button class="rbc-event"><div class="rbc-event-content" title="1/1"><p class="event-wrapper">1/1</p></div></button></div>
</div>
</div>
checkout this sandbox code https://codesandbox.io/s/73ky8rj2qj
if that's what you want to achieve so the main idea is to override month dateHeader and then with every dateHeader to render check if its date prop is between any event startDate and endDate and render it with the desired style
enter image description here
Here's the application interface and a part of the form is behind the side dashboard of my template
<section class="uRegion #REGION_CSS_CLASSES# clearfix" id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
<div class="uRegionHeading">
<h1>#TITLE#</h1>
<span class="uButtonContainer">
#CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP#
</span>
</div>
<div class="uRegionContent clearfix">
width: 1360px;
height: 1002px;
right: 500px;
#BODY#
</div>
</section>
Switch to theme 42. It is possible that you're using a custom theme.
I am building an application using Ionic (version 1) and would like to hide a div from the controller when the user is scrolling. I am stuck and don't know where to start.
This is my code:
<body ng-app="starter" style="padding-top:150px;">
<div ng-controller="AppCtrl" id="header" >
<div class="bar-aaa">
<div class="myLogo">
<img src="img/images/logo.png" style="display: block;margin-left:auto;margin-right:auto;height:50px;margin-top:10px;margin-bottom:30px;" alt=""/>
</div>
<div class="row" style="padding-bottom: 0px;">
<div class="col col-33" style="border-bottom: 2px solid {{oneLine}};margin-bottom: 0;height: 59px;"><img src="{{one}}" style="display: block;margin-left:auto;margin-right:auto;" alt=""/></div>
<div class="col col-33" style="border-bottom: 2px solid {{twoLine}};margin-bottom: 0;height: 59px;"><img src="{{two}}" style="height:17px;display: block;margin-left:auto;margin-right:auto;" alt=""/></div>
<div class="col col-33" style="border-bottom: 2px solid {{threeLine}};margin-bottom: 0;height: 59px;"><img src="{{three}}" style="height:17px;display: block;margin-left:auto;margin-right:auto;" alt=""/></div>
</div>
</div>
</div>
<span ng-show="loading" style="position: absolute;z-index: 99999;margin-left:-75px;top:150px;left:50%;right:50%;background:rgba(0,0,0,0.5);text-align:center;padding:15px;width:150px;" >
<div>
<ion-spinner icon="spiral"></ion-spinner>
<h5 style="color:#fff;">Processing...</h5>
</div>
</span>
<ion-nav-view></ion-nav-view>
</body>
Your question does not explain which <div> you are trying to hide and what code you have tried to use already, but can you assign a function to the on-scroll directive of the ion-content and do whatever you want to do in that function. So like this:
<ion-content on-scroll="scrollFunction()">
And then in your controller add a function called scrollFunction or preferably something more descriptive.
$scope.getScrollPosition = function() {
// Here you can do whatever you want when someone is scrolling.
}
You could for example update a variable in this function and assigned that variable to the ng-show of the <div> you want to show or hide.
To answer your other question regarding why the getScrollPosition() function keeps returning 0. It is a known issue, you can find similar reports here. I am not entirely sure why this happens, but it seems like Ionic is grabbing the scroll position of a different view causing it to stay 0. You can solve this by assigning a delegate-handler to your <ion-content>, which basically gives you an unique identifier to work with. It would look something like this:
<ion-content delegate-handle="scrollHandler" on-scroll="getScrollPosition()">
And then in your controller, instead of doing the following:
$ionicScrollDelegate.getScrollPosition().top;
You need to do this:
$ionicScrollDelegate.$getByHandle("scrollHandler").getScrollPosition().top;
That should solve the issues you are experiencing.
What would be the best way, to append an element in between elements generated using ng-repeat?
For example:
<div class="block" ng-repeat="position in [1,2,3,4,5,6,7,8,9,10]">{{position+1}}</div>
I would like to put a <br> after every 4th element. My guess would be to create a directive with the link.post. Tell me if I'm on the good track.
Thank you
jsFiddle: http://jsfiddle.net/uPMZU/
I'm not entirely sure what you're trying to achieve with the <br> but if your are trying to stack them in groups of four then you can do something using the $index variable from ng-repeat and a class change.
JSFiddle with this: http://jsfiddle.net/y44Cb/13/
HTML
<div ng-class="{block: ($index +1) % 4}" ng-repeat="position in [1,2,3,4,5,6,7,8,9,10]">
<div class="red-block">{{position+1}}</div>
</div>
CSS
div.red-block {
display: inline-block;
border: 1px solid red;
width: 50px;
height: 50px;
}
div.block {
float: left;
}
You could use ng-repeat-start and ng-repeat-end and then check whether you want to render the break in a function.
<div class="block" ng-repeat-start="position in [1,2,3,4,5,6,7,8,9,10]">
<div class="red-block">{{position+1}}</div>
</div>
with
<br ng-if="includeBreak(position)" ng-repeat-end>
or
<p ng-if="includeBreak(position)" ng-repeat-end></p>
You can use an ng-switch to do what you need
<div class="block" ng-repeat="position in [1,2,3,4,5,6,7,8,9,10]" data-ng-switch on="($index + 1) % 4 == 0 && $index > 0">
{{position+1}}
<br data-ng-switch-when="true">
</div>
jsfiddle: http://jsfiddle.net/7qrne/ if you inspect the "5" div you'll see it has the same with the "9" div, but none of the others.