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?
Related
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/
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`
}
});
i need to quit the zero of the value of mes1 mes2 and mes3 if the result is 010, 011 or 012
but when i use an if and run an alert of the new var the result is undefined
this is the function:
function getImpuestos() {
$.getJSON("https://soa.afip.gob.ar/av/v1/vencimientos/"+$("#cuit").val()+"", function(result){
for (var i = 0; i < result.data.length; i++) {
var fecha = result.data[i].vencimiento;
var periodo = fecha.substr(0,7);
var dt = new Date();
var year = dt.getFullYear();
var mes1 = year + "-0" + (dt.getMonth()+1);
var mes2 = year + "-0" + (dt.getMonth()+2);
var mes3 = year + "-0" + (dt.getMonth()+3);
if(mes1 > 7){
var mes1 = year + "-" + (dt.getMonth()+1);
}else if(mes2 > 7){
var mes2 = year + "-" + (dt.getMonth()+2);
}else if(mes3 > 7){
var mes3 = year + "-" + (dt.getMonth()+3);
}
if(periodo == mes1 || periodo == mes2 || periodo == mes3) {
$(".fa-spinner").css("display", "block");
$("#textobusqueda").css("display", "block");
console.log(result.data[i].idImpuesto);
alert(mes5);
buscarImpuesto(result.data[i].idImpuesto, result.data[i].vencimiento, result.data[i].tipoOperacion, periodo);
}
}
});
}
<label style="color:black" class="control-label">Ingresar CUIT Empresa</label>
<input id="cuit" type="text" class="form-control" onkeyup="searchCliente();">
You can use string.padStart instead of ifs:
var mes1 = year + "-" + (dt.getMonth()+1).padStart(2, "0");
var mes2 = year + "-" + (dt.getMonth()+2).padStart(2, "0");
var mes3 = year + "-" + (dt.getMonth()+3).padStart(2, "0");
And of course change mes5 in alert to something different.
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");
}
In my app i want to navigate through certain dates. On first click i get the date i need, but on second click it stays the same.
var getDate = function() {
var d = new Date();
var month = d.getMonth()+1;
var day = d.getDate();
var yesterday = d.getDate()-1;
var tomorrow = d.getDate()+1;
var output = d.getFullYear() + '/' +
((''+month).length<2 ? '0' : '') + month + '/' +
((''+day).length<2 ? '0' : '') + day;
$('#yesterday, #tomorrow').click(function () {
if (this.id === 'yesterday') {
var output = d.getFullYear() + '/' +
((''+month).length<2 ? '0' : '') + month + '/' +
((''+day).length<2 ? '0' : '') + yesterday;
$("#today_date").text(output);
}
else if (this.id === 'tomorrow') {
var output = d.getFullYear() + '/' +
((''+month).length<2 ? '0' : '') + month + '/' +
((''+day).length<2 ? '0' : '') + tomorrow;
$("#today_date").text(output);
}
});
$("#today_date").text(output);
};
jsfiddle example here http://jsfiddle.net/7LXPq/800/
Every time you click on yesterday and tomorrow you need to update your current d date. Otherwise you are always stuck in today date.
Trying to keep as much as your original code you can refactor it like this:
var getDate = function() {
var d = new Date();
var formatDate = function () {
var month = d.getMonth()+1;
var day = d.getDate();
var output = d.getFullYear() + '/' +
((''+month).length<2 ? '0' : '') + month + '/' +
((''+day).length<2 ? '0' : '') + day;
return output;
};
$('#yesterday, #tomorrow').click(function () {
d = new Date(d);
if (this.id === 'yesterday') {
d.setDate(d.getDate() - 1);
}
else if (this.id === 'tomorrow') {
d.setDate(d.getDate() + 1);
}
$("#today_date").text(formatDate());
});
$("#today_date").text(formatDate());
};
See demo
You can use this code:
var getDate = function() {
var d = new Date();
var output = d.getFullYear() + '/' +
(d.getMonth() + 1 < 10 ? '0' : '') + (d.getMonth()+1) + '/' +
(d.getDate() < 10 ? '0' : '') + d.getDate();
$('#yesterday, #tomorrow').click(function () {
if (this.id === 'yesterday') {
d.setDate(d.getDate()-1);
var output = d.getFullYear() + '/' +
(d.getMonth() + 1 < 10 ? '0' : '') + (d.getMonth()+1) + '/' +
(d.getDate() < 10 ? '0' : '') + d.getDate();
$("#today_date").text(output);
}
else if (this.id === 'tomorrow') {
d.setDate(d.getDate()+1);
var output = d.getFullYear() + '/' +
(d.getMonth() + 1 < 10 ? '0' : '') + (d.getMonth()+1) + '/' +
(d.getDate() < 10 ? '0' : '') + d.getDate();
$("#today_date").text(output);
}
});
$("#today_date").text(output);
};
if you need the current date to be kept, you can just make a copy of the d variable before using it