how to select date from calendar pop up? There's a text field which is in disabled mode. When you click on the calendar icon at the corner of the text field the calendar pops up which displays the current date. I need to select the date which is two years back. How do i go about doing that in selenium java?
below is the html code:
<div class="datepicker datepicker-dropdown dropdown-menu" style="display: block; top: 429.1px; left: 234.5px;">
<div class="datepicker-days" style="display: block;">
<table class=" table-condensed">
<thead>
<tr>
<th class="prev" style="visibility: visible;">
<i class="icon-arrow-left"></i>
</th>
<th class="switch" colspan="5">February 2009</th>
<th class="next" style="visibility: visible;">
<i class="icon-arrow-right"></i>
</th>
</tr>
<tr>
<th class="dow">Su</th>
<th class="dow">Mo</th>
<th class="dow">Tu</th>
<th class="dow">We</th>
<th class="dow">Th</th>
<th class="dow">Fr</th>
<th class="dow">Sa</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
</tbody>
<tfoot>
</table>
</div>
<div class="datepicker-months" style="display: none;">
<table class="table-condensed">
<thead>
<tbody>
<tr>
<td colspan="7">
<span class="month">Jan</span>
<span class="month">Feb</span>
<span class="month">Mar</span>
<span class="month">Apr</span>
<span class="month">May</span>
<span class="month">Jun</span>
<span class="month">Jul</span>
<span class="month">Aug</span>
<span class="month">Sep</span>
<span class="month">Oct</span>
<span class="month">Nov</span>
<span class="month">Dec</span>
</td>
</tr>
</tbody>
<tfoot>
</table>
</div>
<div class="datepicker-years" style="display: none;">
</div>
use try catch statement
In try u can search for the element to be present in the page (any unique element related to the date to be selected)
In catch block you can click on the back button .
so in this case it will keep clicking on back/previous button in the calender to go to the previuos year .
Related
I had a page working fine with st-table in angularjs (1.8.x).
Ref: Smart Table Website or on Git Hub.
Because the page was becoming too big (HTML), as a quick fix I put the sections into diff HTML files and then used ng-include on main page. But since then the st-search stopped working.
Check the code:
<table class="table table-condense table-striped table-bordered" ng-hide="vmModelMg.currentModel.exclusionParts.length==0" st-safe-src="vmModelMg.currentModel.exclusionParts" st-table="dispExclPartsList">
<thead style="overflow-y:scroll;">
<tr>
<th colspan="2" style="width: 30%; padding-right: 10px;border-right:none;">
<a class="btn btn-primary pull-left" ng-click="vmModelMg.refreshExclusionPartsManual()">Refresh</a>
</th>
<th colspan="3" style="width: 35%;border-right:none;border-left:none;">
Show only Active? :
<!--'{{vmModelMg.isActiveModelFilterExPt}}'-->
<input type="checkbox" st-search="isActive" value="{{vmModelMg.isActiveModelFilterExPt}}" ng-model="vmModelMg.isActiveModelFilterExPt" ng-true-value="true" ng-false-value="" />
</th>
<th style="width: 35%;border-left:none;">
<a class="btn btn-primary pull-right" ng-click="vmModelMg.addNewExclusionPart()">Add new Exclusion Part</a>
</th>
</tr>
<tr>
<th style="width: 10%;"></th>
<th st-sort="partCode" style="width: 15%;">Part Code</th>
<th style="width: 15%;">Transmission Type</th>
<th st-sort="isActive" style="width: 15%;">Is Active?</th>
<th style="width: 45%;">Notes</th>
</tr>
</thead>
<tbody style="overflow-y:scroll;max-height:300px;">
<tr ng-show="dispExclPartsList.length==0">
<td colspan="5" style="width:100%;">
<div class="alert alert-info">
No Exclusion Parts found.
</div>
</td>
</tr>
<tr ng-repeat="exclPartRec in dispExclPartsList">
... td values here ...
</tr>
</tbody>
</table>
I included this using code below:
<ng-include src="'/Scripts/app/Views/manageModels.exclusionParts.html'"></ng-include>
Can someone please advise why if I paste this code in main page it works & if in the ngInclude it doesn't. Now, when I say it doesn't it doesn't show records when tab is loaded. If I click on "Show Active only" checkbox, the filter starts working. But, if same code is on single page, it shows records as soon as I load the tab.
When refreshing the table data with search input field, it displays table data with the last search input field value.
How can I remove the filter on the click of the refresh/clear button and get the original data?
Please find the page view GUI
$scope.Refresh = function () {
$scope.searchall="";
$scope.DataLoad();
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
<button type="button" class="btn-sm btn-default" ng-click="Refresh()">Refresh</button>
<div>
<select autocomplete="off" style="width: 60px;" ng-model="CountPerPage"
ng- options="x for x in CountPerPageOptionValues">
<option value="">All</option>
</select>
</div>
<table ng-show="DataLoaded" st-table="Collection" class="table table-striped animate-show" st-safe-src="data" >
<thead>
<tr>
<th st-sort="Id">ID</th>
<th st-sort="Name">Name</th>
<th st-sort="Timestamp" style="min-width:68px;">Timestamp</th>
<th st-sort="Message" style="min-width:136px;">Message</th>
</tr>
<tr>
<th>
<input ng-model="searchall" ng-show="!nomsg" st-search="Name" placeholder="search for Name" class="input-sm form-control" style="width:140px" type="search" />
</th>
</tr>
</thead>
<tbody data-ng-hide="isLoading" data-ng-animate="'fade'">
*emphasized text*<tr ng-repeat="latestData in Collection">
<td>{{latestData .Id}}</td>
<td>{{latestData .Name}}</td>
<td>{{latestData .Timestamp | date:'dd MMM yyyy hh:mm:ss a'}}</td>
<td>
{{latestData.Message}}
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-pagination="" st-items-by-page="CountPerPage" st-displayed-pages="7"></div>
</td>
</tr>
</tfoot>
</table>
I'm trying to do a table with ng-repeat. This is my code
<table class="tab2" >
<thead>
<tr>
<th>Currency: USD '000s</th>
<th ng-repeat="s in periodosCF">{{s.periodo | date:"yyyy"}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in nombreFilasCF" class="{{n.fondo}}">
<td style="width: 32%;"><div class="bordeTab">
<div class="{{n.color}}First" >
{{n.nombre}}
</div> <br>
</div>
</td>
<td ng-repeat="dato in datosCF" ng-if="n.nombre == dato.nombre">
<div class="{{n.color}}" >
{{dato.valor}}
</div><br>
</td>
</tr>
</tbody>
</table>
Once it enter to this ng-repeat="dato in datosCF", I do and if to print a value, but if the if returns me false I need to print this "-".
It sounds like you want to include all rows, but the content of the row is different based on some condition. If that's the case, you can try moving the conditional logic into the body of your <td> element, and having two divs with contradictory ng-if expressions:
<table class="tab2" >
<thead>
<tr>
<th>Currency: USD '000s</th>
<th ng-repeat="s in periodosCF">{{s.periodo | date:"yyyy"}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in nombreFilasCF" ng-class="n.fondo">
<td style="width: 32%;"><div class="bordeTab">
<div ng-class="n.color + 'First'">
{{n.nombre}}
</div> <br>
</div>
</td>
<td ng-repeat="dato in datosCF">
<div ng-if="n.nombre === dato.nombre" ng-class="n.color">
{{dato.valor}}
</div>
<div ng-if="n.nombre !== dato.nombre">
-
</div><br>
</td>
</tr>
</tbody>
</table>
I also changed your interpolated class attributes to ng-class.
Below is the html I have used to show data in the table, its working fine.
Now I want to convert it to jQuery Datatables.
HTML:-
<table cellpadding="3" class="table table-bordered">
<thead>
<tr class="success">
<th style="cursor: pointer;" ng-click="sort('DOB')"><b>DOB</b> <span class="glyphicon sort-icon" ng-show="sortKey=='DOB'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
<th style="cursor: pointer;" ng-click="sort('StateName')"><b>State</b> <span class="glyphicon sort-icon" ng-show="sortKey=='StateName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
<th style="cursor: pointer;" ng-click="sort('FileId')"><b>Image</b> <span class="glyphicon sort-icon" ng-show="sortKey=='FileId'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
<th><b>Actions</b></th>
</tr>
</thead>
<tbody>
<tr dir-paginate="employee in employees|orderBy:sortKey:reverse|filter:search|itemsPerPage:5" ng-model="search">
<td>{{employee.DOB | date:'MM/dd/yyyy' }}
<td>{{employee.StateName}}
</td>
<td>
<img ng-src="UploadedFiles/{{employee.FilePath}}" class="img-circle" style="max-width: 50px" alt='Employee Image Missing' />
</td>
</tr>
</tbody>
</table>
I am using ng-repeat from AngularJS in a table.
When I click on a row, there is data that appears just below this row.
The problem is that when I click on another row while one is already expanded, both are expanded.
I would like to close the first one and expand the second one.
HTML
<div id="accordion">
<table class="table table-striped">
<thead>
<tr>
<th class="col-md-10">Name</th>
<th class="col-md-1">Collateral</th>
<th class="col-md-1"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="pack in packages | filter:search" id="row">
<td data-toggle="collapse" data-target="#collapse{{$index}}" data-parent="#accordion" ng-click="expand(pack)">{{pack.name}}</td>
<td><button class="btn btn-info"><span class="glyphicon glyphicon-open-file"></span></button></td>
<td><input type="radio" ng-model="$parent.selectedPackage" ng-value="pack" /></td>
</tr>
<tr ng-repeat-end>
<td colspan="3">
<div class="collapse" id="collapse{{$index}}">
<table class="table">
<tbody>
<tr>
<td>{{indication}}</td>
</tr>
<tr ng-repeat="bb in bananas">
<td>{{bb.name}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
first you don't need of unique id for it... Just try with https://github.com/angular-ui/bootstrap/tree/master/src/collapse or in your case maybe: https://github.com/angular-ui/bootstrap/tree/master/src/accordion
Good Luck.