Remove table row if mapped td equals something - javascript

Hi I have an events list that I want to show only upcoming events.
I want to remove past events table rows if date is less than todays date.
But I cannot get the associated row to remove?
Thanks
var date = jQuery('tr.Entries').find('td.event-date > a').text();
var dates = jQuery('tr.Entries').find('td.event-date > a').map(function() {
return jQuery(this).text();
}).get();
var currentDate = new Date();
currentDate = ("0" + currentDate.getDate()).slice(-2) + "/" + ("0" + (currentDate.getMonth() + 1)).slice(-2) + "/" + currentDate.getFullYear();
jQuery.each(dates, function(index, value) {
if (value < currentDate) {
console.log("true");
if (date === value) {
console.log("true");
jQuery(date).parent().remove(); //how to map table date to the row and delete the row?
}
}
});

I want to remove past events if date is less than todays date.
Do it in the initial filter itself
var currentDate = new Date();
currentDate = ( "0" + currentDate.getDate() ).slice(-2) + "/" + ( "0" + ( currentDate.getMonth() + 1 ) ).slice(-2) + "/" + currentDate.getFullYear();
jQuery( 'tr.Entries' ).find( 'td.event-date > a' ).each( function() {
var date = jQuery( this ).text();
if ( date < currentDate )
{
jQuery( this ).closest( ".event-date " ).remove(); //remove the parent which has lesser date `a`
}
});

Related

how to make condition in ajax with date if null not display default format 1970/01/01?

i just want to if the data date null from my database not showing the default.
.done(function(dt) {
if (dt != null) {
console.log(dt)
table.rows().remove().draw();
$.each(dt, function(i, item) {
var d = new Date(item.date);
var day = d.getDate();
var month = d.getMonth() + 1;
var year = d.getFullYear();
var d_date= day + "/" + month + "/" + year;
table.row.add([
item.Name,
d_date,
item.Attendance,
"<button type='button' class='btn btn-info' onclick='showDetail(" + item.NIK + ");' >Detail</button>"
]).draw();
})
}
})
and its the result.
You can just add an if condition:
.done(function(dt) {
if (dt != null) {
console.log(dt)
table.rows().remove().draw();
$.each(dt, function(i, item) {
var d = ""
var day = ""
var month = ""
var year = ""
var d_date= ""
if (item.date) {
d = new Date(item.date);
day = d.getDate();
month = d.getMonth() + 1;
year = d.getFullYear();
d_date = day + "/" + month + "/" + year;
}
table.row.add([
item.Name,
d_date,
item.Attendance,
"<button type='button' class='btn btn-info' onclick='showDetail(" + item.NIK + ");' >Detail</button>"
]).draw();
})
}
})

Increment/Decrement date in datepicker on mousewheel up/down respectively

I have a datepicker. I want to increment the date by 1 day as mouse wheel up is fired and decrement the date by 1 day as mouse wheel down is fired (upto the minimum possible date).
Below is my code snippet:
HTML
<input type="text" id="txtFromDate" class="calender"/>
JS
$(document).ready(function(){
$("#txtFromDate").datepicker({
minDate: new Date()
});
$("#txtFromDate").datepicker("setDate", new Date()); });
$('.calender').bind('mousewheel DOMMouseScroll', function (event) {
$id = $(this).attr('id');
$minDate = $('#' + $id).datepicker("option", "minDate");
$minDate = ($minDate.getMonth() + 1) + "/" + $minDate.getDate() + "/" + $minDate.getFullYear();
$datePickerDate = $('#' + $id).datepicker("getDate");
$datePickerDate = ($datePickerDate.getMonth() + 1) + "/" + $datePickerDate.getDate() + "/" + $datePickerDate.getFullYear();
var days = parseInt("1", 10);
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
$datePickerDate = new Date($datePickerDate);
$datePickerDate = $datePickerDate.setDate($datePickerDate.getDate() + days);
}
else {
if ($datePickerDate >= $minDate && $('#' + $id ).val() != "") {
$datePickerDate = new Date($datePickerDate);
$datePickerDate = $datePickerDate.setDate($datePickerDate.getDate() - days);
}
}
alert($datePickerDate);
$('#' + $id).val($datePickerDate);
$('#' + $id).datepicker("setDate", $datePickerDate);
});
But the $datePickerDate value is coming to be as 1464028200000.
Here is the Non-Working Demo
What am I doing wrong?

How can I get javascript to write dates in my input boxes?

I made this fiddle http://jsfiddle.net/cyrtx7qw/1/ and I cant figure out how to make these two dates write on page load. I need them to check if the boxes are empty and then I want to write the today's date and today-7 respectively.
if ($('#datePickersAppearance').is(':empty')) {
var today = new Date();
var curr_date = today.getDate();
var curr_month = today.getMonth();
curr_month++;
var curr_year = today.getFullYear();
document.getElementById("to").innerHTML = curr_date + "." + curr_month + "." + curr_year;
today.setDate(today.getDate() - 7);
var new_date = today.getDate();
var new_month = today.getMonth();
new_month++;
var new_year = today.getFullYear();
document.getElementById("from").innerHTML = new_date + "." + new_month + "." + new_year;
}
Also, is there a way keep another date after page reload in case I change the default ones? I need the if statement to not trigger then...
filddle
if ($('#datePickersAppearance').is(':empty'))
to
if ($('.datePickersAppearance').val() == '')
document.getElementById("from").innerHTML
should be
document.getElementById("from").value
The biggest problem is that <input> elements do not have a .innerHTML property. It is instead .value.
Your jQuery was traded for JavaScript.
Code was truncated for readability.
Use this instead:
(function loadDates(element){
var from = document.getElementById('from')
var to = document.getElementById('to')
if(!from.value.length && !to.value.length ){
var my_date = new Date()
to.value = my_date.getDate() + "." + my_date.getMonth() + "." + my_date.getFullYear()
// Redefine date object
my_date.setDate(my_date.getDate() - 7)
from.value = my_date.getDate() + "." + my_date.getMonth() + "." + my_date.getFullYear()
}//endif
})();
Updated, you can use sessionStorage to save your dates for page reloads. Also .blur() event handler is used to save data for sessionStorage, so that it's available when the page loads :-) Some other event handlers like .change() could be use as well. Fiddle
var today = new Date();
var curr_date = today.getDate();
var curr_month = today.getMonth();
curr_month++;
var curr_year = today.getFullYear();
var toDate = "";
//check if there's a to Date in sessionStorage
if (sessionStorage.getItem("toDate")) {
toDate = sessionStorage.getItem("toDate");
sessionStorage.setItem("toDate", toDate);
} else {
toDate = curr_date + "." + curr_month + "." + curr_year;
sessionStorage.setItem("toDate", toDate);
}
document.getElementById("to").value = toDate;
today.setDate(today.getDate() - 7);
var new_date = today.getDate();
var new_month = today.getMonth();
new_month++;
var new_year = today.getFullYear();
var fromDate = "";
//check if there's a from Date in sessionStorage
if (sessionStorage.getItem("fromDate")) {
console.log("if");
fromDate = sessionStorage.getItem("fromDate");
sessionStorage.setItem("fromDate", fromDate);
} else {
// actually else part of the code never runs because there's toDate in sessionStorage.
console.log("else");
fromDate = new_date + "." + new_month + "." + new_year;
sessionStorage.setItem("fromDate", fromDate);
}
document.getElementById("from").value = fromDate;
$("#from").blur(function() {
//check that there is data before saving into sessionStorage
if (this.value.length >= 8)
sessionStorage.setItem("fromDate", this.value)
});
$("#to").blur(function() {
//check that there is data before saving into sessionStorage
if (this.value.length >= 8)
sessionStorage.setItem("toDate", this.value)
})

Datepicker ajax call beforeShow; does not work

I have a page that shows me available dates in a database. It works well, but I have to refresh the page to get it to work. If I don't, the datepicker class just acts like a text box. Also, I need it to make an ajax call before it shows.
So to sum up, I go to '/tasks/new'. The page loads correctly. I click in the datepicker field and no calendar. No errors in the console. I refresh the page and it works. What do I need to do? My initial thought was that it needs to wait until the page is loaded, but that didn't seem to work (unless I did that wrong).
Here is the relevant code:
html
<input class="datepicker" id="task_start_date" name="task[start_date]" type="text">
tasks.js.coffee
full_days =[]
partial_days=[]
getDays = (date) ->
mmddyyyy = ("0" + (date.getMonth() + 1)).slice(-2) + "-" + ("0" + date.getDate()).slice(-2) + "-" + date.getFullYear()
jqxhr = $.get("/getdates/"+mmddyyyy, (data) ->
full_days = data['full']
partial_days = data['partial']
formatDays
return
)
formatDays = (date) ->
mmddyyyy = ("0" + (date.getMonth() + 1)).slice(-2) + "-" + ("0" + date.getDate()).slice(-2) + "-" + date.getFullYear()
if $.inArray(mmddyyyy, full_days) isnt -1
[
true
"full-day"
"Available"
]
else
if $.inArray(mmddyyyy, partial_days) isnt -1
[
true
"partial-day"
"Available"
]
else
[
false
""
"unAvailable"
]
# manipulate the json to make an array
availableHours = (day) ->
hours =[]
for index, hour_obj of day
hours.push hour_obj['hour']
return hours
$ ->
$('.datepicker').datepicker(
dateFormat: 'mm-dd-yy'
beforeShow: -> getDays
beforeShowDay: formatDays
onChangeMonthYear: (year, month, inst) ->
target = "#{month}-01-#{year}"
jqxhr = $.get("/getdates/"+target, (data) ->
full_days = data['full']
partial_days = data['partial']
formatDays
return
)
onSelect: (selectedDay) ->
box_id = $(this).attr('id')
box_id = "\##{(box_id.split '_')[1]}_hour"
new_list_items =[]
jqxhr2 = $.get('/gethours/'+selectedDay, (data)->
hours = availableHours(data)
for k,hour of hours
new_list_items.push '<option>'+hour+'</option>'
$(box_id).html('').append(new_list_items)
)
)
I found a way to fix my issues. It was all about when I called the functions and when I put the inital $ ->:
$ ->
full_days = []
partial_days = []
getDays = (date) ->
if (typeof date != 'string')
date = new Date()
date = ("0" + (date.getMonth() + 1)).slice(-2) + "-" + ("0" + date.getDate()).slice(-2) + "-" + date.getFullYear()
jqxhr = $.get("/getdates/" + date, (data) ->
full_days = data['full']
partial_days = data['partial']
formatDays
)
return
getDays()
formatDays = (date) ->
mmddyyyy = ("0" + (date.getMonth() + 1)).slice(-2) + "-" + ("0" + date.getDate()).slice(-2) + "-" + date.getFullYear()
if $.inArray(mmddyyyy, full_days) isnt -1
[
true
"full-day"
"Available"
]
else
if $.inArray(mmddyyyy, partial_days) isnt -1
[
true
"partial-day"
"Available"
]
else
[
false
""
"unAvailable"
]
# manipulate the json to make an array
availableHours = (day) ->
hours = []
for index, hour_obj of day
hours.push hour_obj['hour']
return hours
showdatepicker = ->
$('.datepicker').datepicker(
dateFormat: 'mm-dd-yy'
beforeShowDay: formatDays
onChangeMonthYear: (year, month, inst)->
target = "#{month}-01-#{year}"
getDays target
onSelect: (selectedDay) ->
getDays()
box_id = $(this).attr('id')
box_id = "\##{(box_id.split '_')[1]}_hour"
new_list_items = []
jqxhr2 = $.get('/gethours/' + selectedDay, (data)->
hours = availableHours(data)
for k,hour of hours
new_list_items.push '<option>' + hour + '</option>'
$(box_id).html('').append(new_list_items)
)
)
showdatepicker()

Switching a function value to current date instead of an exact date

How would I modify the function below to assign a value of whatever the current date is instead of 4/11/2013?
<script type="text/javascript">
$('#FormsPageID table tr:nth-child(12) td:nth-child(2) div span span input')
.on('focus', function(){
var $this = $(this);
if($this.val() == '4/11/2013'){
$this.val('');
}
})
.on('blur', function(){
var $this = $(this);
if($this.val() == ''){
$this.val('4/11/2013');
}
});
</script>
This would work
var date = new Date();
var strDate = (date.getMonth() + 1) + "/" + date.getDate() + "/" +date.getFullYear()
Building off Parthik's answer, you can make that a function, call it inside the .val()
function getCurrentDate() {
var date = new Date();
var strDate = (date.getMonth() + 1) + "/" + date.getDate() + "/" +date.getFullYear()
return strDate;
}
And in your code, change:
$this.val('4/11/2013');
To
$this.val(getCurrentDate());

Categories