Could jquery selector select all element with subnode match some condition? - javascript

For example, I have a table with id tbBookList, and for each row (<tr>), the 4th column (<td>) shows a date. I want to remove the all the row with the Date before this year (such as 2016); The Date format is yyyy-MM-dd such as 2016-01-24.
I google it but I found I'm hard to describe my question.
The fast way I know is that I can select all row with $("#tbBookList>tr") then I can loop it. However, I want to know if there is a better way such as using jquery selector to do that.

You can just use filter():
$('#tbBookList tr').filter(function() {
var cell = $(this).find('td').eq(3);
var date = cell.text();
var year = date.split('-').shift();
return year < 2016;
}).remove();

No matter what you do a loop of all the rows has to occur.
For something like this I would use filter() to do the loop rather than each but that is personal preference
$("#tbBookList>tr").filter(function(){
var date = $(this).find('td').eq(2).text();
return SomeTestOfDateValue // boolean
}).remove();

Related

How do I populate several elements on a page (that have the same class) with the same data?

I understand how to display the current year and pass it through an ID, but the ID, of course, will only display once. I need to be able to display it multiple times throughout the site.
How do I accomplish this?
//get year
var yyyy = new Date().getFullYear();
currYear.innerHTML = yyyy;
//trying to display as a class
document.getElementsByClassName('thisYear')[0] = yyyy;
<span id="currYear"></span>
<span class="thisYear"><span>
From what i understand, you are trying to add the current year to multiple element in your HTML ? Currently, you are only assigning it to the first one ( [0] ).
You could parse each element with the class thisYear and add the current year to them.
//get year
var yyyy = new Date().getFullYear();
//trying to display as a class
//the document.getElementByClassName returns a htmlCollection. not an array directly.
//https://stackoverflow.com/a/3871602/5784924
Array.from(document.getElementsByClassName('thisYear')).forEach(function(element) {
element.innerHTML = yyyy;
});
<div class="thisYear">this year</div><br>
<div class="thisYear">this year</div><br>
<div class="notThisYear"> not this year</div><br>
<div class="notThisYear">not this year</div><br>
<div class="thisYear"></div>
P.S. this answer reflect only what was asked by OP. If you wish see something more up to date and browser compliant, please see Scott Marcus' answer.
document.getElementsByClassName('thisYear')[0] = yyyy; attempts to set the DOM element returned from the call to the year, rather than some property of the DOM element to the year.
To make your code work, the "quick fix" is to add .innerHTML to your line:
document.getElementsByClassName('thisYear')[0].innerHTML = yyyy;
However, .getElementsByClassName() (along with similar APIs from the
1990s, like getElementsByTagName(), getElementsByName() and
others) should no longer be used. I've written about this and the idea
of adding an index to the end of a method that returns a node list
here.
Instead, use the modern, standards-compliant .querySelector() and .querySelectorAll() and then you'll need to loop through the collection and modify the elements individually.
See the additional comments inline:
//get year
var yyyy = new Date().getFullYear();
// .querySelectorAll returns a node list, which is not an actual Array implementation.
// IE doesn't support calling .forEach on node lists, so if you need to support IE
// you'll need to convert the node list into an aray in order to call .forEach and you'll
// need to do it in a way that IE understands (not Array.from()):
// Array.prototype.slice.call(document.querySelectorAll('.thisYear')).forEach(function(element) {
// But, if you are not concerned with IE, you can call .forEach() directly on the node list
document.querySelectorAll('.thisYear').forEach(function(element) {
// When the content you wish to update doesn't contain any HTML, don't use .innerHTML
// which has performance and potential security implications, use .textContent instead
element.textContent = yyyy;
});
div { margin-bottom:1em; }
<div class="thisYear">this year</div>
<div class="thisYear">this year</div>
<div class="notThisYear"> not this year</div>
<div class="notThisYear">not this year</div>
<div class="thisYear"></div>
I guess you're trying to assign the current date to multiple elements witht the same class, if so. Please take a look at this example below.
var items = document.getElementById( 'items' ),
divs = document.getElementsByClassName( 'count' );
[].slice.call( divs ).forEach(function ( div ) {
div.innerHTML = items.innerHTML;
});
Source:
Replace innerHTML of all divs with same class

FullCalendar disable select day if is not allowed in selectAllow callback

In the FullCalendar plugin, I need allow selection of days until a day or between dates. I put an example to explain better.
https://codepen.io/stefanmalex/pen/Jjjjgmp
I have an array with disallowed days:
var disallowedDays = ['2019-10-17', '2019-10-23', '2019-10-26']
I added the 'selectAllow' callback:
selectAllow: function (selectInfo) {
if (disallowedDays.includes(selectInfo.startStr)) {
return false;
}
return true;
}
This works perfectly if you select day per day, allows selection of all days less disallowed days in array.
PROBLEM: When you select multiple days, it allows select disallowed days. (Example: select from '2019-10-15' to '2019-10-26').
What I need, example:
If the selection starts on '2019-10-11', it has to allows you to select until '2019-10-16' because next day ('2019-10-17') is disallowed.
I let the example on codepen. https://codepen.io/stefanmalex/pen/Jjjjgmp
ADyson has recognized it correctly.
The program logic needs to be changed.
In the selectAllow you were checking the array with startStr, so basically it will be checking with start date of selection only, not the whole selection.
So, if you tried to select 14 oct to 18 oct, you needed to check / compare the disallowed dates with in this range.
So, it is needed to loop through the disallowedDays array to check each date within the tried selection, like the following loop:
for(var i=0;i<disallowedDays.length;i++) {
var dd = new Date(disallowedDays[i]);
if(dd.getTime() >= startDate.getTime() && dd.getTime() <= endDate.getTime()){
return true;
}
}
Following this logic, check here the solution you might be expecting

Check checkbox based on multiple table cell criteria

I have an html table full of data, the first column contains an input checkbox and a name. I want to check this checkbox when two criteria are met:
the name is "Complete"
the date sent matches a string passed in "m/d/yyyy" i.e. "9/20/2016" (no leading zeros)
I can already do the first using getElementByTagName("input") and checking if it is a checkbox and that the name is Complete
function checkAllComplete()
{
var allRows = document.getElementsByTagName("input");
for (var i=0; i < allRows.length; i++) {
if (allRows[i].type == "checkbox" && allRows[i].name == "complete")
{
allRows[i].checked = true;
}
}
}
The date in the cell is "9/20/2016 4:02:03 PM". I also have the regex I want to use to get it into m/d/yyyy:
var myRe = new RegExp("^([1-9]|1[012])\/([1-9]|[12][0-9]|3[01])\/(19|20)[0-9]{2}", "g");
But I'm having trouble getting the corresponding td and it's text. I tried a getElementsByClassName but since there are other input items the counts are off. I tried using class name for the checkboxes but then I cannot check them.
I've assigned a class to all the tds, the first column with the checkbox is "actionClass" and the one with the date string is "dateSentClass"
I'm open to javascript or jquery as a solution.
edit: here's the fiddle with a sample table structure https://jsfiddle.net/trueimage/4u87euz5/2/
To get the checkboxes, you can use:
document.querySelectorAll('input[type=checkbox]');
or:
jQuery('input[type=checkbox]');
You can use the following to get an array of the tds:
document.querySelectorAll('td.yourClass');
and then you can call either innerHTML or textContent to get the contents of the td as a string.
You can also use:
jQuery('td.yourClass');
and call .text() on each element to get the contents of the td.
It sounds like you are trying to get the text of a td.dateSentCell cell that exists in the same row as the cell containing the input that is represented by allRows[i]. If that's correct, you can use this jQuery:
var dateText = $('td.dateSentCell', $(allRows[i]).parent().parent()).text();

Full Calendar - How to add leading zeros to the days in Month View of Full Calendar

I want to add leading Zeros to these single digit days in FullCalendar month view.
What I want is :
Means, 3 as 03, 4 as 04 and so on..
Years later I could not find an option to set the day-number format to one with a leading zero, i did it the same way but without JavaScript in Fullcalendar 5.4.0:
The classname in my case was .fc-daygrid-day-number, I think thats implements the type of the initialized view, whats in my case initialized with: {initialView: 'dayGridMonth'}
Array.prototype.forEach.call(
document.querySelectorAll('.fc-daygrid-day-number'),
function(el) {
if (el.innerText.length === 1) {
el.innerText = '0' + el.innerText;
}
}
)
There doesn't appear to be an option for this in the fullCalendar options curently. Without modifying the fullCalendar source, the best I could come up with is this. If you look at the rendered calendar HTML, you'll see that each day number is wrapped in a <td> with the CSS class fc-day-number. So we can modify the contents of the <td>. Put this code directly after your calendar initialisation code:
$('.fc-day-number').each(function() {
var day = $(this).html(); //get the contents of the td
//for any fields where the content is one character long, add a leading zero
if (day.length == 1)
{
$(this).html("0" + day);
}
});
I had the same problem with React and find this question equivalent. Then I come up with this solution at Fullcalendar 5.6.0:
I used a prop called "dayCellContent" and passed a function to return the formatted string.
<FullCalendar
plugins={[dayGridPlugin]}
initialView="dayGridMonth"
dayCellContent={({ dayNumberText }) => (("00" + dayNumberText).substring(dayNumberText.length))}
/>

manipulating date object with javascript

i have been tinkering with the date object.
I want to add a dynamic amount of days to a day and then get the resulting date as a variable and post it to a form.
var startDate = $('#StartDate').datepicker("getDate");
var change = $('#numnights').val();
alert(change);
var endDate = new Date(startDate.getFullYear(), startDate.getMonth(),startDate.getDate() + change);
does everything correctly except the last part. it doesnt add the days onto the day
take this scenario:
startdate = 2011-03-01
change = 1
alert change = 1
endDate = 2011-03-11 *it should be 2011-03-02*
thank you to all the quick replies.
converting change variable to an integer did the trick. thank you.
parseInt(change)
just to extend on this: is there a way to assign a variable a type, such as var charge(int)?
You may have fallen victim to string concatenation.
Try changing your last parameter in the Date constructor to: startDate.getDate() + parseInt(change)
See this example for future reference.
convert change to a number before adding it. it looks like you're getting a string concatenation operation rather than the addition you're expectingin your code.
I believe you are concatenating instead of using the mathematical operator. Try this instead,
var endDate = new Date(startDate.getFullYear(), startDate.getMonth(),startDate.getDate() + (+change));
It looks like you are not adding the ending day, you are concatinating it so '1' + '1' = '11'
use parseInt() to make sure you are working with integers
example
var change = parseInt($('selector').val());
Also, with this solution, you could easily end up with a day out of range if you are say on a start date of the 29th of the month and get a change of 5

Categories