Below is a div where there is a datetimepicker.
<div class="dropdown" id="cal">
<div class="input-group">
<input type="text" id="date" name="date" class="form-control" data-ng-model="environment.nextRun|date:'medium'">
<span class="input-group-addon"><i data-toggle="dropdown" data-target="#cal" role="button" class="fa fa-clock-o dropdown-toggle"></i></span>
</div>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker data-ng-model="environment.nextRun" data-datetimepicker-config="{ dropdownSelector: '#dropdown' }"></datetimepicker>
</ul>
</div>
I'm trying to disable the date and select only time. I have used disabled-date=true in the tag but it doesn't work. Can anyone please help me disable the date and select only the time of a day? I need it in the format HH:mm
To select time only, use:
data-datetimepicker-config="{ dropdownSelector: '#dropdown1', startView : 'hour', minView: 'minute' }"
time is not a valid value for minView.
Checkout these links might be help full for you.
https://github.com/dalelotts/angular-bootstrap-datetimepicker#before-render
https://github.com/dalelotts/angular-bootstrap-datetimepicker/issues/123
Try this
data-datetimepicker-config="{ dropdownSelector: '#dropdown1', minView: 'time' }"
Related
I have a drop down menu. I want capybara to go through it and find the specific element and click on it. I'm currently trying to do a within clause and having it iterate through the list and find this element: "Cow_poop"
<div class="ant-select-selection ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="7256666c-da5f-48d6-c8fc-a249a4ed0fc9" aria-expanded="false" tabindex="0">
<div class="ant-select-selection__rendered">
<div class="ant-select-selection-selected-value" title="cow_poop" style="display: block; opacity: 1;">cow_poop</div>
<div class="ant-select-search ant-select-search--inline" style="display: none;">
<div class="ant-select-search__field__wrap">
<input autocomplete="off" class="ant-select-search__field" value="">
<span class="ant-select-search__field__mirror"> </span>
</div>
</div>
</div>
<span class="ant-select-arrow" unselectable="on" style="user-select: none;">
<i aria-label="icon: down" class="anticon anticon-down ant-select-arrow-icon">
<svg viewBox="64 64 896 896" focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true">
<path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
</svg>
</i>
</span>
</div>
So in this html tag. I have a dropdown menu and I'm trying to select the value cow_poop. The way I'm currently doing it is this way.
within('ant-select-selection') do
find('cow_poop').click
end
The problem with this method is that it's not working.
. is missing before the class name, it should be
within('.ant-select-selection')
You can also use:
within('.ant-select-selection') do
find('div.ant-select-selection-selected-value', text: 'cow_poop').click
end
Alternative
find (:xpath, "//div[text()='cow_poop']").click
I need some help, i have datepicker on bootstrap and want to find a way to position it. According to be left and mine does not do that at help. Please help me to improve my logic below. Thanks and also want to find a way to make my datepicker be in South African format, 'yy-mm-dd'. Mine shows 'dd-mm-yy', e.g 11/24/2019 it does not make. Please assist, thanks.
<div class = "container">
<div align="left">
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="from"
placeholder="startdate" width="110"/>
<span class="input-group-addon">To</span>
<input type="text" class= "input-sm form-control"
placeholder="enddate" width="110"/>
</div>
</div>
</div><br>
// date functionality
$(document).ready(function(){
$('.input-daterange').datepicker({
dateFormat: "dd.mm.yy",
"orientation":"left"
});
});
Your bootstrap Html should be like this:
<div class = "container">
<div class="row">
<div class="col d-flex">
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="from"
placeholder="startdate" width="110"/>
<span class="input-group-addon">To</span>
<input type="text" class= "input-sm form-control"
placeholder="enddate" width="110"/>
</div>
</div>
</div>
</div>
Then it'll be left aligned.
And for dd-mm-yyyy format your script should be like this.
// date functionality
$(document).ready(function(){
$('.input-daterange').datepicker({
dateFormat: "dd-mm-yy",
"orientation":"left"
});
});
I hope it'll help you
I am using Firebase in a pretty simple chat application. One of the features i'm working on now is the ability to update messages in the chat room, but only if you were the original author. For the editing i have an icon that, when clicked, will do some javascript to hide the message div and display a previously hidden div that has the update form in it. But i only want this to be available if you were the author of the message. Here's what the code looks like:
<li class="message phm pvm pull-left" ng-repeat="(msgId,msg) in room.messages">
<div class="message-current" data-message-id="{{msgId}}">
<span class="message-author pull-left">{{msg.author}}</span>
<span class="message-body pull-left pls">{{msg.body}}</span>
<span class="message-timestamp pull-right prs">
{{msg.timestamp | date:'MMM d, yyyy h:mm a'}}
<a class="message-update-link" href="#" ng-click="showMessageUpdate(msgId)"><span class="glyphicon glyphicon-pencil"></span></a>
</span>
</div>
<div class="message-update hidden" data-message-id="{{msgId}}">
<form class="form-inline" ng-submit="updateMessage(roomId, msgId, '<%= current_user.full_name %>')">
<textarea class="form-control update-message" ng-model="msg.body" ng-trim="false">{{msg.body}}</textarea>
<input class="button button-large button-primary" type="submit" value="Update">
</form>
</div>
</li>
Right now, i can only get it to have updatable message for ALL message or no messages. Basically, the part i am stuck on is the check of whether or not the angularjs value of {{msg.author}} is equal to the rails value of <%= current_user.id %>. Any thoughts on how this can be achieved? Thanks for any help!
SOLVED:
Thanks to Jiten for the step in the right direction. I'm new to learning AngularJS and it's pretty complex. Sometimes you just need to know where to start.
I ended up using a combination of the ngIf directive and the angular.equals function. In my rails view i used ng-if="isAuthor(msg.author, '<%= current_user.full_name %>')" on anything i wanted available to authors of that message only. This will evaluate the response of isAuthor() and only render to the dom if it evaluates to true. The code above now looks like this:
<li class="message phm pvm pull-left" ng-repeat="(msgId,msg) in room.messages">
<div class="message-current" data-message-id="{{msgId}}">
<span class="message-author pull-left">{{msg.author}}</span>
<span class="message-body pull-left pls">{{msg.body}}</span>
<span class="message-timestamp pull-right prs">
{{msg.timestamp | date:'MMM d, yyyy h:mm a'}}
<a ng-if="isAuthor(msg.author, '<%= current_user.full_name %>')" class="message-update-link" href="#" ng-click="showMessageUpdate(msgId)"><span class="glyphicon glyphicon-pencil"></span></a>
</span>
</div>
<div ng-if="isAuthor(msg.author, '<%= current_user.full_name %>')" class="message-update hidden" data-message-id="{{msgId}}">
<form class="form-inline" ng-submit="updateMessage(roomId, msgId, '<%= current_user.full_name %>')">
<textarea class="form-control update-message" ng-model="msg.body" ng-trim="false">{{msg.body}}</textarea>
<input class="button button-large button-primary" type="submit" value="Update">
</form>
</div>
</li>
Here is what isAuthor() looks like in my AngularJS controller:
$scope.isAuthor = function(msgAuthor, currentUser) {
return angular.equals(msgAuthor, currentUser);
}
Pretty simple really!
To compare two objects you can use:
angular.equals({{msg.authorId}}, <%= current_user.full_name %>)
I am working in Listview in jQuery Mobile dynamically. I can't make this design.
Code:
<li data-role="list-divider" role="heading">Category</li>
<li id="305"> <a href="#" class="achk">
<fieldset data-role="controlgroup" style="width:53px;">
<input type="checkbox" name="checkbox_attribute_0" id="checkbox_attribute_0" data-iconpos="notext" /> <label for="checkbox_attribute_0" action="selectAttribute" data="test"></label>
</fieldset>
<label onclick="viewMessage(305, 0);" class="lblImage" data-corners="false">
<fieldset data-role="controlgroup" style="height:0px !important">
<img alt="" src="img/letter.png" />
</fieldset>
</label>
<div onclick="viewMessage(305, 0);" >
<h4>Advanced-customization-Jquery-Mobile-Buttons </h4>
<p>Advanced-customization-Jquery-Mobile-Buttons</p><p>Date : November 15, 2013</p>
</div>
Delete
</a>
</li>
Here is the jsfiddle of the code I have done so far.
Add these lines in your function.
$("#inbox_list").trigger("create");
$("#inbox_list").listview("refresh");
Update Code
$('#dvCount').html(data.count);
//$('input[type=checkbox]').checkboxradio().trigger('create');
$('[data-role="listview"]').html( list ).trigger('create');
$('[data-role="listview"]').listview('refresh');
I need to put an icon next to text field in jquery mobile.
<div data-role="fieldcontain">
<label for="card">Verification Number</label>
<input data-mini="true" type="text" name="card" id="card">
<a href="card.png">
<img src="questionicon.jpg">
</a>
</div>
First of all you have unclosed tags in your html code.
you have to close all the tags for the code working without errors.
the img and input tag are not close.
Here is a working Fiddle Demo for your needs
Have change a little bit your html code:
<div data-role="fieldcontain" id="myfield">
<label for="card">Verification Number</label>
<ul>
<li>
<input type="text" name="card" id="card"/>
</li>
<li>
<a href="#">
<img src="image.jpg" width="20px" height="20px" id="myimage"/>
</a>
</li>
</ul>
</div>