Jquery compare two String from different elements - javascript

I want to compare a select option with text content. can it be achieved. though the strings are same, they don't match while comparing.
<div id="dateRange">
<p>27 Nov 2016_26 Dec 2016</p>
</div>
and Select option be like:
<select id="dateRangeSelect" onchange="showHideForms(this);"><option value="27 Nov 2016_26 Dec 2016" selected>nov-dec</option></select>
in Jquery I am comparing:
$("#dateRangeSelect").val() and $("#dateRange").text()
though they look same in console output, they dont match in if condition
can some one comment on what might be wrong.

Try to compare not the $("#dateRange").text(), because it returns also the p tag as a text. So change it into $("#dateRange p").text()
console.log($("#dateRangeSelect").val());
console.log($("#dateRange p").text());
console.log($("#dateRangeSelect").val() === $("#dateRange p").text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dateRange">
<p>27 Nov 2016_26 Dec 2016</p>
</div>
<select id="dateRangeSelect" onchange="showHideForms(this);"><option value="27 Nov 2016_26 Dec 2016" selected>nov-dec</option></select>

Need to compare the text inside p tag with the value. Also use .trim() to remove any white space
($("#dateRangeSelect").val()=== $("#dateRange p").text().trim())

use Date parse for comparing dates like this
Date.parse($("#dateRangeSelect").val()) === Date.parse($("#dateRange").text())

Trim worked.. thank you it was the extra space

Related

Am I using 'this' correctly? jQuery

I am working on a click event - where it hides any users that are not the same value as the one clicked on. This is a snippet of the relevant HTML.
<div class="main">
<section class="tweets">
<div class="tweet">
<p class="time">Sun Mar 15 2020 20:04:53 GMT-0700 (Pacific Daylight Time)</p>
<p class="users" data="sharksforcheap">#sharksforcheap: </p>
<p class="message">last night i formulated a life #sxsw</p></div>
When I manually input the value of the users value in my :contains it works fine. I'll click on sharksforcheap for example and it will hide every other users that are not of that.
$('.tweets').on('click', '.users', function(){
var user = $(this).data('users');
$('.tweet').not(':contains(sharksforcheap)').hide();
});
However, I want to obviously make it work for any users that I click on as hard-coding it for each user is not feasible. So I made a var called user and referenced it to this which should hold the data of my users. However, this doesn't work.
$('.tweets').on('click', '.users', function(){
var user = $(this).data('users');
$('.tweet').not(':contains('+ user + ')').hide();
});
Am I using this incorrectly in this context?
This is how you need to specify data-users attribute to get its value with .data("users"):
<p class="users" data-users="sharksforcheap">#sharksforcheap: </p>
But it seems that what you need is easier achieved with
$('.tweet').not($(this).closest('.tweet')).hide();

Click a aria-label element using xpath

I am unable to click a button using Xpath and Selenium, in this case the aria-label has a unique date which make it perfect to distinguish among some other buttons from a calendar.
This is the HTML code for the button that display the day 5 and the
price for that day.
<button type="button" class="CalendarDay__button" aria-label="Choose sunday, february 4 2018 as your check-in date. It's available." tabindex="0"><div class="calendar-day"><div class="day">4</div><div class="flybondi font-p fare-price"><span>$728*</span></div></div></button>
<button type="button" class="CalendarDay__button" aria-label="Choose monday, february 5 2018 as your check-in date. It's available." tabindex="0"><div class="calendar-day"><div class="day">5</div><div class="flybondi font-p fare-price"><span>$728*</span></div></div></button>
#Let say I want to click february 5 2018, I tried
dtd0_button = driver.find_element_by_xpath("//button[contains(#class, 'CalendarDay__button') and (#aria-label, 'Choose monday, February 5 2018 as your check-in date. It's available') ]")
dtd0_button.Click()
what is wrong with this approach and I receive the following message 'WebElement' object has no attribute 'Click' if I can Click for any date in the calendar on the web page.
There are a couple of errors with your xpath, which make it invalid:
First of all, you have to state contains before each condition:
"//button[contains(#attribute1, \"content1\") and contains(#attribute2, \"content2\")]"
The ' inside your xpath isn't escaped. Try the following:
"//button[contains(#class,\"CalendarDay__button\") and contains(#aria-label,\"Choose monday, february 5 2018 as your check-in date. It's available.\")]"
Hope it helps. Good luck!

Format input values to hour and minute format (hh:mm)

I have one input field for time entry , need to enter hour and minute (HH:mm Format) .So how can input values automatically formatting . Eg: input values automatically formatting with HH:mm format (11:30).Any help would be appreciated.
You can use uib-timepicker directive for this purpose.It is easy to use and lot more customizable like you can switch between 12/24H etc. The doc explains it pretty clearly.
<div uib-timepicker ng-model="mytime" ng-change="changed()"
hour-step="hstep" minute-step="mstep" show-meridian="ismeridian">
</div>
you just write{{"HH:mm"}} in $scope
value = {{a.value | date: "HH:mm"}}

AngularStrap data-start-date not allowing date selection

I've got this angular datepicker
<input type="text" bs-datepicker data-start-date="01/10/13" data-end-date="29/04/14" placeholder="Earliest date" id="BoundaryFrom" name="BoundaryFrom" ng-model="chartData.boundary.min" data-date-format="d M yyyy" />
(At the moment I've put in hard coded start and end dates just to test the functionality out. Later I will put in an Angular expression)
Now, this part data-start-date="01/10/13" data-end-date="29/04/14" correctly only displays the dates between 1st October 2013 and 29 April 2014 in the calendar control but the problem is none of those dates is selectable. I can still type in the textbox though. Why are they not selectable?
It seems that the the start date and the end date should be more specific, as well as the options being data-min-date and data-max-date. Your start and end date code should be data-min-date="10/01/2013" data-max-date="04/29/2014". The full line will be
<input type="text" bs-datepicker data-min-date="10/01/2013" data-max-date="04/29/2014" placeholder="Earliest date" id="BoundaryFrom" name="BoundaryFrom" ng-model="chartData.boundary.min" data-date-format="d M yyyy" />
Also, I think the format of the date for that would be "mm/dd/yyyy" instead of "dd/mm/yyyy" like you originally did.
Here is a plunker of working code. The calendar only allows selected dates between 1st October 2013 and 29 April 2014. I hope this helps!!!
edit: fixed a typo. Also, an upvote or accepted answer would be awesome :)

Working with Jquery timeago plugin

I am working with Timeago plugin.
What can I do in order to us this kind of timestamp 2012-03-14 22:17:48?
Also
Javascript new Date() gives me Thu Mar 14 2012 23:24:51 GMT-0600 (MDT) which is my correct time.
I have the following for Timeage:
<abbr class="timeago" title="2012-03-14T22:17:48Z"></abbr>
Yet it is telling me it was posted "a day ago", which is actually about an hour and 7 minutes... What could be going wrong?
I used easy date it works great
add script easydate-0.2.4.js
then include
<abbr class="easydate">
#Model.LastseenDate
</abbr>
If you use Livestamp.js, you can do something like this:
<abbr class="livestamp"></abbr>
<script>
$('.livestamp').livestamp(new Date('2012-03-14 22:17:48'));
</script>

Categories

Resources