Scott Baldridge
asked on
Javascript change label forcolor based on condition
Hello, given my code below. How can I find the lblmyDate inside of the rptItems repeater and change the forecolor of the label to red If the date is 30 days older than today???
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater ID="rptItems" runat="server">
<ItemTemplate>
<table>
<tr>
<td>
<asp:Label id="lblMyDate" runat="server" Text='<%#Eval("myDate")%>'></asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
<AlternatingItemTemplate>
<table>
<tr>
<td>
<asp:Label id="lblMyDate" runat="server" Text='<%#Eval("myDate")%>'></asp:Label>
</td>
</tr>
</table>
</AlternatingItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
Randy Poole
You would do this on the code behind on each item row
ASKER
I have done it on the itemdatabaound of the repeater. I'm trying to see how to do it in javascript.
Performance wise is it best to do this type of work in javascript or code behind?
Performance wise is it best to do this type of work in javascript or code behind?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I agree and will stick to the code behind. Thanks for your time.
It is best to do this type of thing in js/jquery. This is a great job for momentjs http://momentjs.com/
http://jsbin.com/dedet/1/edit
http://jsbin.com/dedet/1/edit
<!DOCTYPE html>
<html>
<head>
<style>
.red{color:red;}
.black{color:black;}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://jsbin.com/wabico/1.js"></script>
<script>
$(function () {
$('.checkdate').each(function () {
var dateText = $(this).text();
var convertDate = moment(dateText, "M/D/YYYY");
var today = moment();
var days = convertDate.diff(today, 'days');
if (days < -30) {
$(this).removeClass('black').addClass('red');
} else {
$(this).removeClass('red').addClass('black');
}
});
});
</script>
<meta charset="utf-8">
<title>padas</title>
</head>
<body>
<table>
<tr>
<td class="checkdate">
4/1/2014
</td>
</tr>
</table>
<table>
<tr>
<td class="checkdate">
7/1/2014
</td>
</tr>
</table>
</body>
</html>