Forgive me as I'm a bit novice to JS, just know enough to manipulate.
For those familiar with Isotope ( http://isotope.metafizzy.co/docs/sorting.html ), I have a button at the top of a page to sort by date. Isotope finds the element
<span class="date"> 01/04/2012 </span>
with this:
$container.isotope({
getSortData : {
date : function ( $elem ) {
return $elem.find('.date').text();
}});
Which works fine, but I need to flip (descend) the date order
Isotope has a function:
$('#container').isotope({
sortBy : 'date',
sortAscending : false
});
But I can't get it to work - that just makes the default set sort by date, rather than sorting when I click. I think this is just a question of syntax... how/where can I put sortAscending: false ??
Thanks...
EDIT Viewing some source from Demos, I see that:
<a href="#sortAscending=false">
Can be done, but I'm already sorting by passing this:
<a href="#sortBy=date">
Which finds a the span from earlier with the date info...
Here is how I did it, jsFiddle
$container.isotope({
itemSelector: '.element',
getSortData: {
date: function ($elem) {
return Date.parse($elem.find('.date').text());
}
}
});
It doesn't seem to matter what format the date is in, and works ascending and descending.
The parse() method parses a date string and returns the number of milliseconds between the date string and midnight of January 1, 1970.
Basically it turns your date strings into nice solid numbers which are easy to compare.
Heres what I did to sort by date.
If your date is in the format of '01/01/2012' then you need to convert it to a javascript date object.
getSortData: {
date: function ($elem) {
var dateStr = $elem.find('.date').text(),
dateArray = dateStr.split('/'),
year = dateArray[2],
month = dateArray[0],
day = dateArray[1];
return new Date(year, month, day);
}
}
then you do your usual
$('#container').isotope({ sortBy: 'date' });
Related
I am using Pikaday datepicker. All works well but for some complicated date manipulation I need to add/remove multiple dates.
<code>
var start_date = new Pikaday({
disableDayFn: function(date) {
var enabled_dates = ["06/11/2019","06/17/2019","06/24/2019"]; // dates I want to enable.
var disabled_dates = ["06/15/2019", "06/22/2019"]; // dates I want to disable.
if ((date.getDay() === 1 || date.getDay() === 2 || ($.inArray(moment(date).format("MM/DD/YYYY"), disabled_dates) === 0)) && $.inArray(moment(date).format("MM/DD/YYYY"), enabled_dates) === -1) {
return date;
}
},
format: 'MM/DD/YYYY',
field: document.getElementById('start_date'),
});
</code>
In this example above:
[this works fine] I am using an enabled_dates array to enable multiple dates I need to display on calendar.
[this works fine] I am removing ALL mondays and tuesdays using the actual day value '1' and '2' example: date.getDay() === x
[not working] when I try pass multiple dates in an array the first date is removed but the subsequent dates are not actioned.
In this example all good except for the date "06/22/2019" not removed as appears only removes the first date in array not subsequent
Fiddle demo:
http://jsfiddle.net/netfast/k36nhacz/18/
Main question: How to set closest available date?
Hi all, i'm using bootstrap-datetimepicker.
I've disabled some days from calendar and sometimes current date in range.
So it disables successfully but I want to preset default date into the input value, if I use defaultDate: 'moment' it sets current date (which is disabled).
How to set closest available date?
Does exist any lifehack to resolve it?
Or should I make it manually?
This is how it works now:
var $datesDisabled = [];
$.each($dates, function (key, value) {
$datesDisabled.push(moment(value))
});
// PARAMS TO DATETIMEPICKER
var $params = {
locale: 'en',
format: 'DD/MM/YYYY',
disabledDates: $datesDisabled,
};
// CHECK IF CURRENT DATE IS IN DISABLED ARRAY
if ($.inArray(moment().format('MM/DD/YYYY'), $dates) === -1) {
// IF NOT PRESET CURRENT DATE
$params.defaultDate = 'moment';
} else {
// DO NOT PRESET
$params.useCurrent = false;
}
$('.datetimepicker').datetimepicker($params);
According to the library documentation, you're not supposed to use defaultDate: 'moment'. They do mention the following:
Accepts: date, moment, string
But it means you can provide a Date object, a moment() object or a date string. The string "moment" is none of those, so it probably defaults to today.
However, you can configure the defaultDate like this:
// Using a date string
$('#my-date-picker').datetimepicker({
defaultDate: '2016-08-20'
});
// Using a Date object
$('#my-date-picker').datetimepicker({
defaultDate: new Date('2016-08-20')
});
// Using a moment.js object
$('#my-date-picker').datetimepicker({
defaultDate: moment('2016-08-20')
});
But if you want to have the defaultDate the closest date according to your disabled dates, you'll have to calculate it by yourself. For such a functionality you could create a recursive function that recalls itself with the given date minus or plus 1 until it finds one that is not disabled.
For example:
var disabled = [
new Date('2016-01-03'),
new Date('2016-01-04'),
new Date('2016-01-05'),
new Date('2016-01-08')
];
function getClosest(date, disabled, direction) {
if(!containsDate(disabled, date)) {
return date;
} else {
var prev = getClosest(date.clone().add(direction || -1, 'days'), disabled, direction || -1),
next = getClosest(date.clone().add(direction || 1, 'days'), disabled, direction || 1);
if (Math.abs(date.diff(prev, 'days')) > Math.abs(date.diff(next, 'days'))) {
return next;
} else {
return prev;
}
}
}
function containsDate(dates, given) {
return dates.some(function(date) {
return given.isSame(date, 'day');
});
}
console.log(getClosest(moment('2016-01-02'), disabled).toDate());
console.log(getClosest(moment('2016-01-03'), disabled).toDate());
console.log(getClosest(moment('2016-01-04'), disabled).toDate());
console.log(getClosest(moment('2016-01-05'), disabled).toDate());
console.log(getClosest(moment('2016-01-06'), disabled).toDate());
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
I try to sort dates like "Di, 29.03.2016" but this doesnt work because the Sorter doesnt have a AddParser for this format.
I know that the numbers should replace like dd/mm/yyyy,
but how should i replace "Di, " ?
Since I can't tell what language you're targeting ("Di" is the abbreviation for December in several languages), I think it might be easiest to use a date library like sugar or datejs to parse those dates for you.
Make sure to set the locale before the following code.
Sugar (demo):
Date.setLocale('es'); // Spanish
$.tablesorter.addParser({
id: 'sugar',
is: function() {
return false;
},
format: function(s) {
var date = Date.create ? Date.create(s) : s ? new Date(s) : s;
return date instanceof Date && isFinite(date) ? date.getTime() : s;
},
type: 'numeric'
});
DateJS (demo):
// make sure to load the desired locale file
// full list: https://github.com/datejs/Datejs/tree/master/build
$.tablesorter.addParser({
id: 'datejs',
is: function() {
return false;
},
format: function(s) {
var date = Date.parse ? Date.parse(s) : s ? new Date(s) : s;
return date instanceof Date && isFinite(date) ? date.getTime() : s;
},
type: 'numeric'
});
Note: The above two demos are using my fork of tablesorter & copied from this file, but these parsers will work in the original tablesorter (v2.0.5).
Note 2: There is also a parser for jQuery Globalize (demo), but it is a bit more complicated to set up and use, so I didn't include it here; and the globalize parser may not work properly with the original version of tablesorter.
I've been using tablesorter a lot in my website like this
$(".tablesorter").tablesorter({
widgets: ['zebra'],
dateFormat: 'uk',
});
But i've a problem with date in the format : MM/YYYY (it's when I don't have the day I prefer showing 12/2005 than 00/12/2005).
This format does not work with tablesorter dateFormat uk. How to make it working ?
And the difficulty is that I can have in the same table differents formats like this :
Date - Title
11/2005 - Movie 1
12/11/2005 - Movie 2
2006 - Movie 3
Thank you.
You could add a custom parser:
$.tablesorter.addParser({
id: 'rough-date',
is: function() {
// return false so this parser is not auto detected
return false;
},
format: function(s) {
// format to look like an ISO 8601 date (2005-11-12).
// Month-only dates will be formatted 2005-11.
return s.split('/').reverse().join('-');
},
type: 'text' // sort as strings
});
And then use it like this (where 0 is the column number that contains the date):
$(".tablesorter").tablesorter({
headers: {
0: {
sorter:'rough-date'
}
}
});
Here's a JSFiddle.
I have been trying to find a clear explanation for a significant amount of time now but I just can't seem to understand how this method works. Below is the official documentation from the Jquery UI API. It may be clear to others but I find it a bit vague. I simply want to take an array of dates and disable them. I am able to make all dates not selectable but not the ones I want.
beforeShowDayType: Function( Date date )
Default: null
A function that takes a date as a parameter and must return an array with:
[0]: true/false indicating whether or not this date is selectable
[1]: a CSS class name to add to the date's cell or "" for the default presentation
[2]: an optional popup tooltip for this date
The function is called for each day in the datepicker before it is displayed.
This is my (incomplete) code so far.
$(document).ready(function() {
var array = ["2014-01-03","2014-01-13","2014-01-23"];
$('#fromDate').datepicker({
dateFormat: "yy-mm-dd",
beforeShowDay: function(date) {
{
return [false, "", "Booked out"];
} else {
return [true, "", "available"];
}
}
});
});
Try this:
beforeShowDay: function(date) {
if($.inArray($.datepicker.formatDate('yy-mm-dd', date ), array) > -1)
{
return [false,"","Booked out"];
}
else
{
return [true,'',"available"];
}
}