Problem with calendar script - javascript

Calendar displays some weird dates. Rhe month date is supposed to start at friday but starts on tuesday: http://img515.imageshack.us/img515/2927/cal.jpg.
<SCRIPT LANGUAGE="JavaScript">
monthnames = new Array("January","Februrary","March","April","May","June","July","August","September","October","November","December");
var linkcount=0;
function addlink(month, day, href)
{
var entry = new Array(3);
entry[0] = month;
entry[1] = day;
entry[2] = href;
this[linkcount++] = entry;
}
Array.prototype.addlink = addlink;
linkdays = new Array();
monthdays = new Array(12);
monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();
thisday=todayDate.getDay();
thismonth=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
if (((thisyear % 4 == 0) && !(thisyear % 100 == 0)) || (thisyear % 400 == 0))
{
monthdays[0]++;
}
startspaces=thisdate;
while (startspaces > 7)
{
startspaces-=7;
startspaces = thisday - startspaces + 1;
}
while (startspaces < 0) {
startspaces += 7;
}
document.write("<table border=1 bgcolor=white ");
document.write("bordercolor=black><font color=black>");
document.write("<tr><td colspan=7><center><strong>" + monthnames[thismonth] + " " + thisyear + "</strong></center></font></td></tr>"); document.write("<tr>");
document.write("<td align=center>Su</td>");
document.write("<td align=center>M</td>");
document.write("<td align=center>Tu</td>");
document.write("<td align=center>W</td>");
document.write("<td align=center>Th</td>");
document.write("<td align=center>F</td>");
document.write("<td align=center>Sa</td>");
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++)
{
document.write("<td> </td>");
}
count=1;
while (count <= monthdays[thismonth])
{
for (b = startspaces;b<7;b++)
{
linktrue=false;
document.write("<td>");
for (c=0;c<linkdays.length;c++)
{
if (linkdays[c] != null)
{
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][2]==count))
{
document.write("<a href=\"" + linkdays[c][2] + "\">"); linktrue=true;
}
}
}
if (count==thisdate)
{
document.write("<font color='FF0000'><strong>");
}
if (count <= monthdays[thismonth])
{ document.write(count);
}
else { document.write(" ");
}
if (count==thisdate)
{ document.write("</strong></font>");
}
if (linktrue) { document.write("</a>");
}
document.write("</td>"); count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table></p>");
</SCRIPT>
I can't seem to follow the code because I'm just new with javascript and programming, got this code from here: http://www.planet-source-code.com/vb/scripts/ShowCode.asp?txtCodeId=2608&lngWId=2

The calculations in this code are just plain wrong. I suggest you don't bother fixing it. Instead, use a reliable calendar that is widely used like the jQuery UI datepicker

Related

Can't get a background image on my HTML/JS page

Here is the code, i can't get an image of a cake on the body, or the entired html. I've tried HTML like body background, I've tried style , and I've tried js, nothing works. Funny thing, I've tested the image on other pages, loads fine. I've also tried modifying the background color using html, css, js, they all work fine. But the damn image won't load. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Age Calculator</title>
</head>
<body>
<style>
#myDiv {
background-image: url('images/cake.png');
background-size: cover;
}
</style>
<div id="myDiv">
<script>
//document.body.style.backgroundImage = "url('images/cake.jpg')";
//document.getElementById("myDiv").style.backgroundImage = "url('images/cake.jpg')";
let birthYear = prompt("Enter Your Birth Year");
let birthMonth = prompt("Enter Your Birth Month (As A Number)");
let birthDay = prompt("Enter Your Birth Day");
let date = new Date();
let currentYear = date.getFullYear();
let currentMonth = date.getMonth() + 1;
let currentDay = date.getDate();
let yearAge = currentYear - birthYear;
let monthAge = currentMonth - birthMonth;
let dayAge = currentDay - birthDay;
let monthPluralizer = "";
let dayPluralizer = "";
if (monthAge === 1) {
monthPluralizer = "Month";
} else {
monthPluralizer = "Months";
}
if (dayAge === 1) {
dayPluralizer = "Day";
} else {
dayPluralizer = "Days";
}
if (currentMonth < birthMonth) {
monthAge = monthAge + 12;
yearAge = yearAge - 1;
}
if (currentDay < birthDay) {
monthAge = monthAge - 1;
if (currentMonth === 1 || 3 || 5 || 7 || 8 || 10 || 12) {
dayAge = dayAge + 31;
} else if (currentMonth === 4 || 6 || 9 || 11) {
dayAge = dayAge + 30;
} else if (currentMonth === 2) {
dayAge = dayAge + 28;
}
}
if (currentMonth == birthMonth && currentDay < birthDay) {
monthAge = monthAge + 12;
yearAge = yearAge - 1;
}
document.write("<p>Your Birth Date Is " + birthMonth + "/" + birthDay + "/" + birthYear + "</p><br>");
document.write("<p>Today's Date Is " + currentMonth + "/" + currentDay + "/" + currentYear + "</p><br>");
document.write("<p>You Are " + yearAge + " Years, " + monthAge + " " + monthPluralizer + " & " + dayAge +
" " + dayPluralizer + " Old.</p><br>");
if (birthMonth == 0 && birthDay == 0 && birthYear == 0 ) {
document.write("<p>Hello Jesus!<p>")
} else if (birthMonth === null && birthDay === null && birthYear === null ) {
document.write("<p>Hello Jesus!<p>")
}
</script>
</div>
</body>
</html>
Your image path is wrong.
Try This:
#myDiv {
background-image: url('./images/cake.png');
background-size: cover;
}
If don't work let me know
You can read more about the HTML Paths here and see another post like yours in this question here
Your image path is not correct and you should change the path. you can see how to define the path in here

Separate numbers with div

I'm working on a simple table which the data is being generated using loop, I have problem with generating the random numbers What I want is to generated saparately using div ex. <td>09897</td> to <td><div>0</div><div>0</div><div>8</div><div>9</div><div>7</div></td> I manage to generate the numbers somehow, but dont know how to separate them.
Hope you help me.
Thanks
var dataNum = 30;
for (let t = 1; t <= dataNum; t++) {
$('table tbody').append('<tr>');
for (var j = 0; j < 2; j++) {
if (j == 0) {
$('table tbody').append('<td>' + todayDate() + '-' + deci(t) + '</td>');
} else if (j == 1) {
$('table tbody').append('<td>' + (Math.floor(Math.random() * 10000) + 90000) + '</td>');
}
}
$('table tbody').append('</tr>');
}
function todayDate() {
var d = new Date(),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('');
}
function deci(number) {
var num = null;
if (number < 10) {
num = '000' + number;
} else if (number > 9 && number < 100) {
num = '00' + number;
} else if (number > 99 && number < 1000) {
num = '0' + number;
} else {
num = number;
}
return num;
}
table th, table td{
width: 150px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Num</th>
<th>Random</th>
</tr>
</thead>
<tbody></tbody>
</table>
Use this function to convert your generated number to desired html and then insert it in your td tag (convert("09897", "div")):
function convert(num, tag){return "<"+tag+">"+(num+"").split("").join("</"+tag+"><"+tag+">")+"</"+tag+">"}
So (Math.floor(Math.random() * 10000) + 90000) gives you the random number. Now you need each of the digit (which would be available via .toString().split("")), and then for every digit you need to wrap <div> around it - which can be done via .map(t => "<div>" + t + "</div>"). Then you can join those strings using .join("").
var dataNum = 30;
for (let t = 1; t <= dataNum; t++) {
$('table tbody').append('<tr>');
for (var j = 0; j < 9; j++) {
if (j == 0) {
$('table tbody').append('<td>' + todayDate() + '-' + deci(t) + '</td>');
} else if (j == 1) {
$('table tbody').append('<td>' +
(Math.floor(Math.random() * 10000) + 90000)
.toString()
.split("")
.map(t => "<div>" + t + "</div>")
.join("") +
'</td>');
}
}
$('table tbody').append('</tr>');
}
function todayDate() {
var d = new Date(),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('');
}
function deci(number) {
var num = null;
if (number < 10) {
num = '000' + number;
} else if (number > 9 && number < 100) {
num = '00' + number;
} else if (number > 99 && number < 1000) {
num = '0' + number;
} else {
num = number;
}
return num;
}
table th,
table td {
width: 150px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Num</th>
<th>Random</th>
</tr>
</thead>
<tbody></tbody>
</table>
References:
String#split - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split
Array#join - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join
Array#map - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
var x=90987;
x=x.toString();
for(var y=0; y<x.length; y++)
{
console.log(x[y]);
}

Ignore Sundays from jQuery date range picker

I'm using the following jQuery date range picker library : http://longbill.github.io/jquery-date-range-picker/
I would like to remove / hide all Sundays from all date range pickers while keeping a normal behavior on the date range pickers.
I tried to do something with beforeShowDay option :
beforeShowDay: function(t) {
var valid = t.getDay() !== 0; //disable sunday
var _class = '';
// var _tooltip = valid ? '' : 'weekends are disabled';
return [valid, _class];
}
but it only "disables" all Sundays whereas I want to remove / hide them:
Here's the fiddle I'm working on : https://jsfiddle.net/maximelafarie/dnbd01do/11/
EDIT:
Updated fiddle with #Swanand code: https://jsfiddle.net/maximelafarie/dnbd01do/18/
You could do it with just a little CSS but it does leave a gap:
.week-name th:nth-child(7),
.month1 tbody tr td:nth-child(7) {
display: none;
}
Hope this helps a little.
You need do changes in two functions in your daterangepicker.js file:
createMonthHTML()
function createMonthHTML(d) { var days = [];
d.setDate(1);
var lastMonth = new Date(d.getTime() - 86400000);
var now = new Date();
var dayOfWeek = d.getDay();
if ((dayOfWeek === 0) && (opt.startOfWeek === 'monday')) {
// add one week
dayOfWeek = 7;
}
var today, valid;
if (dayOfWeek > 0) {
for (var i = dayOfWeek; i > 0; i--) {
var day = new Date(d.getTime() - 86400000 * i);
valid = isValidTime(day.getTime());
if (opt.startDate && compare_day(day, opt.startDate) < 0) valid = false;
if (opt.endDate && compare_day(day, opt.endDate) > 0) valid = false;
days.push({
date: day,
type: 'lastMonth',
day: day.getDate(),
time: day.getTime(),
valid: valid
});
}
}
var toMonth = d.getMonth();
for (var i = 0; i < 40; i++) {
today = moment(d).add(i, 'days').toDate();
valid = isValidTime(today.getTime());
if (opt.startDate && compare_day(today, opt.startDate) < 0) valid = false;
if (opt.endDate && compare_day(today, opt.endDate) > 0) valid = false;
days.push({
date: today,
type: today.getMonth() == toMonth ? 'toMonth' : 'nextMonth',
day: today.getDate(),
time: today.getTime(),
valid: valid
});
}
var html = [];
for (var week = 0; week < 6; week++) {
if (days[week * 7].type == 'nextMonth') break;
html.push('<tr>');
for (var day = 0; day < 7; day++) {
var _day = (opt.startOfWeek == 'monday') ? day + 1 : day;
today = days[week * 7 + _day];
var highlightToday = moment(today.time).format('L') == moment(now).format('L');
today.extraClass = '';
today.tooltip = '';
if (today.valid && opt.beforeShowDay && typeof opt.beforeShowDay == 'function') {
var _r = opt.beforeShowDay(moment(today.time).toDate());
today.valid = _r[0];
today.extraClass = _r[1] || '';
today.tooltip = _r[2] || '';
if (today.tooltip !== '') today.extraClass += ' has-tooltip ';
}
var todayDivAttr = {
time: today.time,
'data-tooltip': today.tooltip,
'class': 'day ' + today.type + ' ' + today.extraClass + ' ' + (today.valid ? 'valid' : 'invalid') + ' ' + (highlightToday ? 'real-today' : '')
};
if (day === 0 && opt.showWeekNumbers) {
html.push('<td><div class="week-number" data-start-time="' + today.time + '">' + opt.getWeekNumber(today.date) + '</div></td>');
}
if(day == 0){
html.push('<td class="hideSunday"' + attributesCallbacks({}, opt.dayTdAttrs, today) + '><div ' + attributesCallbacks(todayDivAttr, opt.dayDivAttrs, today) + '>' + showDayHTML(today.time, today.day) + '</div></td>');
}else{
html.push('<td ' + attributesCallbacks({}, opt.dayTdAttrs, today) + '><div ' + attributesCallbacks(todayDivAttr, opt.dayDivAttrs, today) + '>' + showDayHTML(today.time, today.day) + '</div></td>');
}
}
html.push('</tr>');
}
return html.join('');
}
In this function i have added class hideSunday while pushing the element.
The 2nd function is getWeekHead():
function getWeekHead() {
var prepend = opt.showWeekNumbers ? '<th>' + translate('week-number') + '</th>' : '';
if (opt.startOfWeek == 'monday') {
return prepend + '<th>' + translate('week-1') + '</th>' +
'<th>' + translate('week-2') + '</th>' +
'<th>' + translate('week-3') + '</th>' +
'<th>' + translate('week-4') + '</th>' +
'<th>' + translate('week-5') + '</th>' +
'<th>' + translate('week-6') + '</th>' +
'<th class="hideSunday">' + translate('week-7') + '</th>';
} else {
return prepend + '<th class="hideSunday">' + translate('week-7') + '</th>' +
'<th>' + translate('week-1') + '</th>' +
'<th>' + translate('week-2') + '</th>' +
'<th>' + translate('week-3') + '</th>' +
'<th>' + translate('week-4') + '</th>' +
'<th>' + translate('week-5') + '</th>' +
'<th>' + translate('week-6') + '</th>';
}
}
In this file, I have added class to week-7 header.
CSS:
.hideSunday{display:none;}
Please note, I have not checked all the scenario but it will do trick for you.
I finally ended up by letting the Sundays appear (but completely disabling them).
These questions inspired me :
Moment.js - Get all mondays between a date range
Moment.js: Date between dates
So I created a function as follows which returns an array that contains the "sundays" (or whatever day you provide as dayNumber parameter) in the date range you selected:
function getDayInRange(dayNumber, startDate, endDate, inclusiveNextDay) {
var start = moment(startDate),
end = moment(endDate),
arr = [];
// Get "next" given day where 1 is monday and 7 is sunday
let tmp = start.clone().day(dayNumber);
if (!!inclusiveNextDay && tmp.isAfter(start, 'd')) {
arr.push(tmp.format('YYYY-MM-DD'));
}
while (tmp.isBefore(end)) {
tmp.add(7, 'days');
arr.push(tmp.format('YYYY-MM-DD'));
}
// If last day matches the given dayNumber, add it.
if (end.isoWeekday() === dayNumber) {
arr.push(end.format('YYYY-MM-DD'));
}
return arr;
}
Then I call this function in my code like that:
$('#daterange-2')
.dateRangePicker(configObject2)
.bind('datepicker-change', function(event, obj) {
var sundays = getDayInRange(7, moment(obj.date1), moment(obj.date1).add(selectedDatesCount, 'd'));
console.log(sundays);
$('#daterange-2')
.data('dateRangePicker')
.setDateRange(obj.value, moment(obj.date1)
.add(selectedDatesCount + sundays.length, 'd')
.format('YYYY-MM-DD'), true);
});
This way, I retrieve the amount of sundays in the date range I selected. For example, if there's two sundays in my selection (with sundays.length), I know I have to set two additional workdays to the user selection (in the second date range picker).
Here's the working result:
With the above screenshot, you can see the user selected 4 workdays (5 with sunday but we don't count it). Then he click on the second calendar and the 4 workdays automatically apply.
Here's the result if the period apply over a sunday (we add one supplementary day and Xfor X sundays in the period):
Finally, here's the working fiddle: https://jsfiddle.net/maximelafarie/dnbd01do/21/
I want to thank any person that helped me. The question was hard to explain and to understand.
You can also do it by setting a custom css class and use it in beforeShowDay like below
.hideSunDay{
display:none;
}
beforeShowDay: function(t) {
var valid = t.getDay() !== 0; //disable sunday
var _class = t.getDay() !== 0 ? '' : 'hideSunDay';
// var _tooltip = valid ? '' : 'weekends are disabled';
return [valid, _class];
}
But it only hides the sundays beginning from current day.
Here is a working fiddle
https://jsfiddle.net/dnbd01do/16/

Primefaces how to sort the year dropdownlist p:calendar component

Does the p:calendar component in Primefaces support sorting the year dropdownlist? By default, it is sorted by ascending, but how about if I want to sort it by descending? I've tried to implement it by using javascript but unfortunately the sort was gone after I selected an option in the dropdownlist.
You can use yearrange attribute. But you need to change/override something to make it works.
I see Primefaces calendar which is using datepicker and datepicker just support yearrange ascending. So I think you can do like that.
<p:calendar yearrange="2027:2017"... />
And override something that datapicker can support new yearrange, like (just my short sample)
$.datepicker._generateMonthYearHeader = function(inst, drawMonth, drawYear, minDate, maxDate,
secondary, monthNames, monthNamesShort) {
var inMinYear, inMaxYear, month, years, thisYear, determineYear, year, endYear,
changeMonth = this._get(inst, "changeMonth"),
changeYear = this._get(inst, "changeYear"),
showMonthAfterYear = this._get(inst, "showMonthAfterYear"),
html = "<div class='ui-datepicker-title'>",
monthHtml = "";
// month selection
if (secondary || !changeMonth) {
monthHtml += "<span class='ui-datepicker-month'>" + monthNames[drawMonth] + "</span>";
} else {
inMinYear = (minDate && minDate.getFullYear() === drawYear);
inMaxYear = (maxDate && maxDate.getFullYear() === drawYear);
monthHtml += "<select class='ui-datepicker-month' data-handler='selectMonth' data-event='change'>";
for (month = 0; month < 12; month++) {
if ((!inMinYear || month >= minDate.getMonth()) && (!inMaxYear || month <= maxDate.getMonth())) {
monthHtml += "<option value='" + month + "'" +
(month === drawMonth ? " selected='selected'" : "") +
">" + monthNamesShort[month] + "</option>";
}
}
monthHtml += "</select>";
}
if (!showMonthAfterYear) {
html += monthHtml + (secondary || !(changeMonth && changeYear) ? " " : "");
}
// year selection
if (!inst.yearshtml) {
inst.yearshtml = "";
if (secondary || !changeYear) {
html += "<span class='ui-datepicker-year'>" + drawYear + "</span>";
} else {
// determine range of years to display
years = this._get(inst, "yearRange").split(":");
thisYear = new Date().getFullYear();
determineYear = function(value) {
var year = (value.match(/c[+\-].*/) ? drawYear + parseInt(value.substring(1), 10) :
(value.match(/[+\-].*/) ? thisYear + parseInt(value, 10) :
parseInt(value, 10)));
return (isNaN(year) ? thisYear : year);
};
year = determineYear(years[0]);
endYear = Math.max(year, determineYear(years[1] || ""));
year = (minDate ? Math.max(year, minDate.getFullYear()) : year);
endYear = (maxDate ? Math.min(endYear, maxDate.getFullYear()) : endYear);
inst.yearshtml += "<select class='ui-datepicker-year' data-handler='selectYear' data-event='change'>";
var startYear = determineYear(years[0]);
var absoluteEndYear = determineYear(years[1]);
if (startYear <= absoluteEndYear) {
for (; year <= endYear; year++) {
inst.yearshtml += "<option value='" + year + "'" +
(year === drawYear ? " selected='selected'" : "") +
">" + year + "</option>";
}
} else {
for (; startYear >= absoluteEndYear; startYear--) {
inst.yearshtml += "<option value='" + startYear + "'" +
(startYear === drawYear ? " selected='selected'" : "") +
">" + startYear + "</option>";
}
}
inst.yearshtml += "</select>";
html += inst.yearshtml;
inst.yearshtml = null;
}
}
html += this._get(inst, "yearSuffix");
if (showMonthAfterYear) {
html += (secondary || !(changeMonth && changeYear) ? " " : "") + monthHtml;
}
html += "</div>";
return html;}
Or you can write or extends more p:calendar component.
Hope that helps.

jQuery: changing each <p> in each <div> depending on if/else result

In my HTML I have a gallery in which each gallery item has the following format:
<div class="gallery-img">
<a href="#" target="_blank">
<img src="#" />
</a>
<p class="imgDescription">November 20th</p>
<span class="hidden">20141120</span>
</div>
I'm currently attempting to build a function which will allocate a differing string to each .imgDescription depending on what the difference is between the hidden <span> and an external today variable which holds the current date. Here's the JS/jQuery:
today = yyyy+mm+dd;
$('.gallery-img').each(function() {
var itemRelease = $('.gallery-img span');
var timeToRelease = itemRelease - today;
if(timeToRelease < -1) {
$('.imgDescription').val(timeToRelease + " " + "days ago.");
} else if(timeToRelease > +1) {
$(this).val("In" + " " + timeToRelease + " " + "days");
} else if(timeToRelease === -1) {
$(this).val("Released yesterday");
} else if(timeToRelease === 1) {
$(this).val("Releases tomorrow");
} else if(timeToRelease === 0) {
$(this).val("Releases today!");
}
});
How would I go about in getting jQuery to compare each <div>'s <span> value and then inserting the resulting case into the respective .imgDescription?
The contents of the today variable are defined earlier in the code.
I used if/else rather than a switch, as a previous thread indicated a switch would be 30x slower.
Completely stuck on this! Help would be greatly appreciated :)
You should compare each of .gallery-img
// wrap in document ready
$(function() {
var today = new Date();
var dd = today.getDate();
var mm = (today.getMonth()+1) * 100; //January is 0! *100 to form single number
var yyyy = today.getFullYear() * 10000; // *10000 to form single number
today = yyyy+mm+dd;
var todayString = today.toString();
$('.gallery-img').each(function() {
var $this = $(this);
var itemRelease = $this.find('span');
var imgDescription = $this.find('.imgDescription');
var timeToRelease = campareDate(toDate(todayString), toDate(itemRelease.text()));
console.log(timeToRelease);
if(timeToRelease > 1) {
imgDescription.text(timeToRelease + " " + "days ago.");
} else if(timeToRelease < -1) {
imgDescription.text("In" + " " + -timeToRelease + " " + "days");
} else if(timeToRelease === 1) {
imgDescription.text("Released yesterday");
} else if(timeToRelease === -1) {
imgDescription.text("Releases tomorrow");
} else if(timeToRelease === 0) {
imgDescription.text("Releases today!");
}
});
});
function toDate(str) {
return new Date(str.substr(0,4) + '-' + str.substr(4, 2) + '-' + str.substr(6, 2));
}
function campareDate(date1, date2) {
return Math.floor((date1 - date2) / (86400 * 1000));
}
Demo:
http://jsfiddle.net/70nzrgxy/1/
Your code is a bit of a mess. So i fixed a few bugs here and there.
<div class="gallery-img">
<a href="#" target="_blank">
<img src="#" />
</a>
<p class="imgDescription" release-date="2014-11-20">November 20th</p>
</div>
Removed span, i guess You don't need this since is hidden.
$('.gallery-img').each(function() {
var itemRelease = $(this).find('p').attr('release-date');
var itemReleaseDate = new Date(itemRelease);
var timeToRelease = dateDiff(today,itemReleaseDate);
if(timeToRelease < -1) {
$(this).find('p').text(timeToRelease + " " + "days ago.");
} else if(timeToRelease > 1) {
$(this).find('p').text("In" + " " + timeToRelease + " " + "days");
} else if(timeToRelease === -1) {
$(this).find('p').text("Released yesterday");
} else if(timeToRelease === 1) {
$(this).find('p').text("Releases tomorrow");
} else if(timeToRelease === 0) {
$(this).find('p').text("Releases today!");
}
});
Added a timediff function. If you have a questions, go ahead and ask.
http://jsfiddle.net/b3rfe4ty/
You want to output your strings to your .imgDescription?
$('.gallery-img').each(function() {
// do what you need...
$(this).find('.imgDescription').html("Description you want");
}

Categories