I'm working on an asp.net app that is utilizing a lot of jQuery UI controls particularly the datepicker.
In my web service I am making a call to the database and retrieving a list of objects and then passing them back to my javascript where I parse them out into an array containing 1 or more objects that look like this:
I need to include some kind of logic in which I can loop through this array of objects and check to see if a javascript Date falls in between the EndDate and StartDate properties of the object so that I can apply a css style for the DatePicker. First question, is there a way to convert the EndDate/StartDate property from this format to a valid javascript Date?
And if so how can I iterate over the array and apply the logic to see if the date falls inside the range?
Any help is greatly appreciated!
Edit: I noticed the image here is kind of hard to see you can more clearly read the properties here:
image link
As requested here is some example code:
function createDateRangesForCalendar() {
$.ajax({
type: "POST",
url: "../Services/BookingService.asmx/GetCalendarDateRanges",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (response) {
dateRanges = $.parseJSON(response.d);
},
error: function (xhr, textStatus, thrownError) {
alert(textStatus);
alert(thrownError);
}
});
}
function markInvalidDates(date) {
var isHoliday = false;
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
isHoliday = checkIsHoliday(date);
if ($.inArray(dmy, invalidDays) == -1) {
for (var i = 0; i < dateRanges.length; i++) {
// if date falls in between start and end date of object[i] return something like: return [true, "holiday", "Holiday Rates Apply - Minimum 14 days"];
// else loop through to the next object and try there
}
if (isHoliday == true) {
return [true, "holiday", "Holiday Rates Apply - Minimum 14 days"];
} else {
return [true, ""];
}
} else {
return [false, "unavailable", "Unavailable"];
}
}
First question, is there a way to convert the EndDate/StartDate property from this format to a valid javascript Date?
The format seems to be this: /Date(MILLISECONDS)/. A valid JS date object can be obtained like this: new Date(s.match(/Date\((\d+)/)[1]).
And if so how can I iterate over the array and apply the logic to see if the date falls inside the range?
var re = /Date\((\d+)/;
for(var i in arr) {
var start = new Date(arr[i].startDate.match(re)[1]),
end = new Date(arr[i].endDate.match(re)[1]);
if(myDate < end && myDate > start)
// do something.
}
The above seems to answer your question, the way I understand it.
StartDate and EndDate seem like valid JSON to me, except for the slashes at end and beginning. Otherwise, a simple eval of the value should produce a JS Date Object on which you can operate.
For your second point, what keeps you from classic looping over the array ? Some code would be much more useful to say more.
Just return your start and end dates as numerics, without the \Date()\ wrappers.
In your loop, create a JavaScript date from your target date, i.e. new Date(1334548800000) then use simple comparisons between your target date and those start and end dates.
While you can loop with $.each(yourArray, function(id,item){ date comparison logic here }); I recommend you look into the Underscore library for a decent set of utilities to manipulate JS objects.
Related
Specific situation.. I'm having an array filled with datetimes I pull in via an api.
Users should be able to select a date from a datepicker (only showing dates available in the array) and afterwards see the corresponding time.
So what I've done..
The original array is obtained via php, so before starting to populate the datepicker with possible dates I create an extra array with dates only.
Since I maintain the key's it's possible to put these 2 arrays next to eachother.
Array looks as following:
["8-8-2017,07:00", "26-8-2017,07:00"];
So far so good...
After a user picks a date I trigger this to be able to start digging for the time corresponding that date.
Now it's getting messy...
$('#datepick').datepicker().on("input change", function(e) {
$("#uur").text('');
var selecteddate = e.target.value;
var searchArr = datesArray;
var ind = searchArr.indexOf(selecteddate.toString());
var result = datesArray.filter(function(item) {
return typeof item == 'string' && item.indexOf(selecteddate.toString()) > -1;
});
var afterComma = result.toString().substr(result.toString().indexOf(",") + 1);
var final = afterComma.replace(":", "u");
$("#uur").text("De warming up party gaat van start rond " + final);
});
The result is that this only works on the last element of the array.
Because I'm splitting based on the comma's. Now I know the easiest way to work arround this would be to change the , that's seperating date and time in another symbol but still I'm wondering why this couldn't be easier.
You convert whole array to string every time. You should change following code:
var afterComma = result.toString().substr(result.toString().indexOf(",") + 1);
To this;
var afterComma = item.toString().substr(item.toString().indexOf(",") + 1);
Edit:
I also missed the loop above
//for every item in result, afterComma will refer to related minute string
for (var item in result) {
var afterComma = item.toString().substr(item.toString().indexOf(",") + 1);
// Do rest here
}
I have a date column and need to be able to both sort and filter on it. The data comes in as strings like 2010-12-23 and can pre-processed as needed. It should be shown as 23.12.2010. Some internationalization will come later.
I wonder what's the proper internal representation:
a string like "23.12.2010" is bad for sorting (it could be done by sorting on function result, but it'd be slow)
a string like "2010-12-23" sorts correctly, can be formatted easily, but filtering for 23.12 does not work (it could be done, but it'd be slow)
Date would probably get sorted correctly, but filtering would be slow
moment could be the solution, no idea
My current idea is to create an object containing both milliseconds and the displayed string, so that all operations can be fast. But I'd bet that someone was that smart before me....
Let's assume that showing dates in the form like 2010-12-23 is unacceptable, otherwise the problem is solved. To summarize, the problem is that I need to
display and filter in the DD.MM.YYYY format
sort according to the numerical value (or equivalently, as if it was in th ISO format).
I think the method you're proposing wouldn't run in to too many performance issues, unless you're going for really old browsers or mobile devices.
I've mocked up an example to do a quick (performance) test. First, I'm defining an object that holds a value optimized for sorting, and a value optimized for display:
var MyDate = function(dateString) {
var date = new Date(dateString);
var displayValue = "{0}.{1}.{2}"
.replace("{0}", prefixZeroIfNeeded(date.getUTCDate()))
.replace("{1}", prefixZeroIfNeeded(date.getUTCMonth() + 1))
.replace("{2}", date.getUTCFullYear());
return {
sortKey: date.getTime(),
displayValue: displayValue
};
};
The prefixZeroIfNeeded method ensures we get the DD.MM format rather than the dd.mm one:
var prefixZeroIfNeeded = function(nr) {
return nr < 10 ? "0" + nr : "" + nr;
};
Then, we need some data to convert:
var data = [];
var myDates = data
.map(MyDate)
.sort(function(date1, date2) {
return date1.sortKey - date2.sortKey;
});
Finally, a quick example of a very basic search function:
var searchMyDates = function(str) {
return myDates.filter(function(myDate) {
return myDate.displayValue.indexOf(str) !== -1;
});
};
Now, we can create some mockup data and check how long it would actually take to A) map and sort the raw strings to the MyDate objects, and B) search for a string in our collection.
Here's how I generated the raw data:
for (var i = 0; i < 10000; i += 1) {
var y = Math.floor(Math.random() * 101) + 1900;
var m = prefixZeroIfNeeded(Math.floor(Math.random() * 13));
var d = prefixZeroIfNeeded(Math.floor(Math.random() * 29));
data.push(y + "-" + d + "-" + m);
}
Using console.time to measure, processing the data on my machine (A) takes around 40ms. Searching for the string .12. takes around 5-10ms.
Concluding: I think you were definitely on the right track and could continue work in the proposed direction. However, in my personal experience, I've learned that whenever I start work on a feature that involves dates and times, moment.js is the way to go. You'll eventually run in to daylight saving time, time zones, you name it and regret you thought it was simple...
Let me know if this is of any help.
Edit: the code in a snippet (check your browser console for output)
var data = [];
var prefixZeroIfNeeded = function(nr) {
return nr < 10 ? "0" + nr : "" + nr;
};
// Generate random data:
for (var i = 0; i < 10000; i += 1) {
var y = Math.floor(Math.random() * 101) + 1900;
var m = prefixZeroIfNeeded(Math.floor(Math.random() * 13));
var d = prefixZeroIfNeeded(Math.floor(Math.random() * 29));
data.push(y + "-" + d + "-" + m);
}
var MyDate = function(dateString) {
var date = new Date(dateString);
var displayValue = "{0}.{1}.{2}"
.replace("{0}", prefixZeroIfNeeded(date.getUTCDate()))
.replace("{1}", prefixZeroIfNeeded(date.getUTCMonth() + 1))
.replace("{2}", date.getUTCFullYear());
return {
sortKey: date.getTime(),
displayValue: displayValue
};
};
console.time("Map and sorting");
var myDates = data
.map(MyDate)
.sort(function(date1, date2) {
return date1.sortKey - date2.sortKey;
});
var searchMyDates = function(str) {
return myDates.filter(function(myDate) {
return myDate.displayValue.indexOf(str) !== -1;
});
};
console.timeEnd("Map and sorting");
console.time("Search");
console.log("Searching for the month 12, %d results.", searchMyDates(".12.").length);
console.timeEnd("Search");
This may help you a bit. I have used the same thing working with React. Here is a link for Moment.js -
http://momentjs.com/docs/#/displaying/format/
If you go under Display -> Format on the right menu bar, you'll see localized formats, you will need to use format L - pre defined format from moment which will show you 09/04/1986 (September 4, 1986); otherwise you can create your own using DD-MM-YYYY format.
For Example, The way I used in React for my exercise is
To define a variable using let:
let deadlineFormated = Moment(this.props.ToDoItem.deadline).format('llll');
Hope this helps for Angular!
Gist: Decouple sorting and filtering. Do sorting on the internal representation and filtering on the presentation.
Sort on internal representation that is in any naturally sortable format. Your raw YYYY-MM-DD date strings would work, so would parsing them into Date objects. The performance difference could be negligible unless you're dealing with lots and lots of rows -- but in that case you would already have other issues with latency and rendering performance.
It's more intuitive if free-text filtering is done on what's displayed (the presentation). So if you're formatting the dates as "May 7, 2016", do a substring match on that. If you're formatting the dates as DD.MM.YYYY, do a substring match on that.
If filtering is driven by actual date selections from controls like a date picker or a select field, you can do the filtering on the internal representation.
Try with this:
Get Unixtimestamp for date (i.e. Numeric format) and use jquery sort.
Please check this example for jquery sort. Regarding example replace your unixtimestamp to value.
<ul id="datelist">
<li value="1360013296">Date 1</li>
<li value="1360013297">Date 2</li>
<li value="1360013298">Date 3</li>
<li value="1360013299">Date 4</li>
</ul>
https://jsfiddle.net/ajaygokhale/bohgoq8o/
To reliably implement sorting converting it into a Date Object is recommended (new Date(str))
If you need to be flexible in formatting moment has formatting support (check moment.format()) as well. Moment has pretty deep locale support as well.
You can always keep it a Date Object as the source of truth and for filtering you could do Date.toString() just at the time of filtering. This returns a string you could then filter with.
the Question:
How can I use the API to return a boolean value if the date is a bank holiday?
I have done some research and found a great, and free API which contains bank holidays, however I am having trouble using it: http://holidayapi.com/
if i was to use this code:
var year = 2016;
var month = 3;
var day = 25;
var isAHoliday = false;
$.getJSON(
"http://holidayapi.com/v1/holidays?country=GB&year=" + year + "&month=" + month + "&day=" + day, function (data) {
console.log(data); //DOES NOT DISPLAY IN CONSOLE
if (data.holidays.length > 0) {
// BANK HOLIDAY
isAHoliday = true;
}
else {
//IS NOT BANK HOLIDAY
//AND NOTHING NEEDS TO BE DONE
}
});
i want to be able to return a true or false value depending on if this returns any data or not, however im doing something wrong as the getJSON request is not being called, please could someone correct me where i have gone wrong?
http://holidayapi.com/v1/holidays?country=GB&year=2016&month=03&day=25 returns {"status":200,"holidays":[{"name":"Good Friday","country":"GB","date":"2016-03-25"}]}
http://holidayapi.com/v1/holidays?country=GB&year=2016&month=03&day=26 returns {"status":200,"holidays":[]}
it appears this is causing an issue: "http://holidayapi.com/v1/holidays?country=GB&year=" + year + "&month=" + month + "&day=" + day; if i pass one of the 2 URL's in above i get the correct result, I am having a play now with this
https://jsfiddle.net/dcxk6ens/
If you simply want to return a true value if the selected date is a holiday, or false if it is not, you could use a function like this:
(Please note that jsfiddle will not execute any AJAX calls to URLs using the "http://" protocol, since it is not secure.)
function isDateAHoliday(y, m, d) {
var jsonURL = "http://holidayapi.com/v1/holidays?country=GB&year=" + y + "&month=" + m + "&day=" + d;
var isAHoliday = false;
$.getJSON(jsonURL, function (data) {
// If the date is a holiday
if (data.holidays.length > 0) {
// Do some things
isAHoliday = true;
}
// Check values
console.log("JSON DATA: ", data);
console.log("Holiday?: " + isAHoliday);
return isAHoliday;
});
}
isDateAHoliday("2016", "3", "25");
If you wanted to return the name and country of the holiday as well, you could substitute isAHoliday = data.holidays[0]; inside of the if statement.
The holidays object must be called as a child of the returned data object:
Since the holidays object is an array you'll also need to use an index to access an item. Assuming there is at least one item returned, you would get the date like so:
var myDate = data.holidays[0].date;
However you should always check that there's at least one object in the array before getting the first one:
if(data.holidays.length > 0){...}
Incidentally, if all you want to do is check if there's a holiday on any particular day then this if statement is all you'll need, since an array length of more than zero means there's at least one holiday.
Edit
A full answer to your question, you could put this inside the .done() method:
var isAHoliday = false;
if(data.holidays.length > 0){
// There's at least one holiday today!
isAHoliday = true;
}
You don't have to declare a local variable, you'll probably use one that's declared elsewhere but that's up to you.
I am developing using fullcalendar.js, and in the week view, when a week is from 2 different months (for example 27 july - 2 august) the fullcalendar week view shows the two months text. I am searching everywhere but there is no solution for this. Maybe stackoverflow users can help me.
That's what I have:
And that's what I need:
I see the date format but is MMMM YYYY, and it returns two months or one automatically and it seems impossible to change this.
In Calendar.defaults (aprox. line 8300 in non-minimized code) object I can notice this:
titleRangeSeparator: ' \u2014 ', // emphasized dash
monthYearFormat: 'MMMM YYYY', // required for en. other languages rely on datepicker computable option
As I explained, monthYearFormat seems to only be one month, but in a specific moment it merges with titleRangeSeparator to become two months.
Do you know how this is solvable?
Thank you.
EDIT
I found the functions that make this complex string, but is used by month and day views that I don't want to change (I need only to week view). The code is the next. How can I modify this code to solve it?
// Date Range Formatting
// -------------------------------------------------------------------------------------------------
// TODO: make it work with timezone offset
// Using a formatting string meant for a single date, generate a range string, like
// "Sep 2 - 9 2013", that intelligently inserts a separator where the dates differ.
// If the dates are the same as far as the format string is concerned, just return a single
// rendering of one date, without any separator.
function formatRange(date1, date2, formatStr, separator, isRTL) {
var localeData;
date1 = fc.moment.parseZone(date1);
date2 = fc.moment.parseZone(date2);
localeData = (date1.localeData || date1.lang).call(date1); // works with moment-pre-2.8
// Expand localized format strings, like "LL" -> "MMMM D YYYY"
formatStr = localeData.longDateFormat(formatStr) || formatStr;
// BTW, this is not important for `formatDate` because it is impossible to put custom tokens
// or non-zero areas in Moment's localized format strings.
separator = separator || ' - ';
return formatRangeWithChunks(
date1,
date2,
getFormatStringChunks(formatStr),
separator,
isRTL
);
}
fc.formatRange = formatRange; // expose
function formatRangeWithChunks(date1, date2, chunks, separator, isRTL) {
var chunkStr; // the rendering of the chunk
var leftI;
var leftStr = '';
var rightI;
var rightStr = '';
var middleI;
var middleStr1 = '';
var middleStr2 = '';
var middleStr = '';
// Start at the leftmost side of the formatting string and continue until you hit a token
// that is not the same between dates.
for (leftI=0; leftI<chunks.length; leftI++) {
chunkStr = formatSimilarChunk(date1, date2, chunks[leftI]);
if (chunkStr === false) {
break;
}
leftStr += chunkStr;
}
// Similarly, start at the rightmost side of the formatting string and move left
for (rightI=chunks.length-1; rightI>leftI; rightI--) {
chunkStr = formatSimilarChunk(date1, date2, chunks[rightI]);
if (chunkStr === false) {
break;
}
rightStr = chunkStr + rightStr;
}
// The area in the middle is different for both of the dates.
// Collect them distinctly so we can jam them together later.
for (middleI=leftI; middleI<=rightI; middleI++) {
middleStr1 += formatDateWithChunk(date1, chunks[middleI]);
middleStr2 += formatDateWithChunk(date2, chunks[middleI]);
}
if (middleStr1 || middleStr2) {
if (isRTL) {
middleStr = middleStr2 + separator + middleStr1;
}
else {
middleStr = middleStr1 + separator + middleStr2;
}
}
return leftStr + middleStr + rightStr;
}
This isn't directly supported unfortunately, but there is still a better way than modifying the FC source (that get's messy with patches and stuff).
There are several render hooks available that we can use to fix the formatting after the fact. viewRender doesn't work because it's called before the title changes. So we can use eventAfterAllRender instead.
eventAfterAllRender:function(){
if(view.name!=="agendaWeek")
return;
var $title = $("#calendar").find(".fc-toolbar h2"); //Make sure this is the right selector
var text = $title.text();
text = text.match(/.*? /)+text.match(/[0-9]+/);
$title.text(text); //replace text
}
JSFiddle - titleFormat hack
Not the most elegant thing in the world, but it should work better than modifying the source. Let me know if there are any issues.
Edit:
Also, if you're having problems with it flashing the wrong dateformat before the correct one, use css the make the title invisible. Then add a class to the element in eventAfterAllRender that makes it visible again.
I wonder to know how to set today's date in json file like we are using in js.
Is there any option to specify Date.today() in json file?
Because, json data has date object which specifies system date whenever we read the json file.
Hope, you will understand what i am trying to say.
Thanks in advance,
-Raja.
Server side can generate JSON dates in ISO format for example "2012-04-30T02:15:12.356Z"
Then client side can parse and load into date object
new Date(Date.parse("2012-04-30T02:15:12.356Z"))
JSON is a structured transport format. It does not have logic in it.
But here are options:
Why not just get the date when you read the file instead?
Have a server generate that JSON that includes the date at which it was generated. However, this is not ideal if you want the current date. By the time you read the file, the date generated by the server is already past.
build a parser that parses a string and make it search for custom markup.
For example, special markup is contained in #{}. Get the command inside, determine the command, and execute replacement.
var jsonString = '{"data1" : "foo","date" : "#{currentdate}"}'
In this case, I'll find #{currentdate}. I should create a function corresponding to this command to replace #{currentdate} into the current date during read (in the format you want)
var parsedString = jsonString.replace(/#\{(\w+)\}/g, function(match, group) {
if (group === 'currentdate') {
return new Date();
}
else if (group === 'anotherCommand') {
return 'anotherValue';
} //and so on
});
and the result is like this:
jsonString = '{"data1" : "foo","date" : "Fri May 04 2012 01:17:07 GMT-0700 (PDT)"}'
I suggest that you consider using the JSON-js (json2.js) parser, because it parses all standard JSON, but also allows you to add custom parse handling logic, called a reviver function, which fits your scenario very well. The basic syntax to invoke the JSON parser with a custom handler looks like this:
var myObject = JSON.parse(myJSONtext, reviverFunction);
Using your example input as a guide, it could be set up to work like this:
var jsonTxt = '[{' +
'"data1": "foo",' +
'"Date": "",' +
'"childs": [{' +
'"data2": "stack",' +
'"Date": ""' +
'}{}{}...]}]'; //and-on-and-on as in your comment
myData = JSON.parse(jsonTxt, function ( key, value ) {
if ( key === 'Date') { return new Date(); }
//any additonal custom logic you may need later...
});
A general introduction to JSON-js is provided at the JSON in JavaScript page, along with some brief intro info about JSON, and the page also includes some usage scenarios.
You can consider leveraging popular library like moment.js http://momentjs.com/
Then you can store date as YYYY-MM-DD in json and let moment handle the parsing:
var dateString = '2012-11-01';
var someday = moment(dateString);
var formattedDate = someday.format('ddd, DD MMM YYYY'); // 'Thu, 01 Nov 2012'
If you want to store the date, I would prefer to store as a String with a format like yyyy/mm/dd hh:mm:ss or something like that, and parse it in a Date object when I want to read it in the language I need.
obj = {
dates : ['2012/04/30 10:14:23', '2012/05/01 05:34:01']
}
I don't understand exactly what you want, with eval methods (it's an ugly practice), you can add a method to puts the actual date in object, and also adds himself at the children and call the method added in the children.
obj = {
data : "foo",
addDate : function() {
this.date = newDate();
if (this.children) {
for (var i = 0; i < this.children.length; i++) {
this.children[i].addDate = this.addDate;
this.children[i].addDate();
}
}
},
children : [{
data : "foo2"
}]
}
PS if you want to store it in a file, then you have to use the eval method (not recommended) storing the methods as a string or evry time you load the file do
jsonLoaded; // this var has the json that you store in a file;
var addDate = function() {
this.date = newDate();
if (this.children) {
for (var i = 0; i < this.children.length; i++) {
this.children[i].addDate = this.addDate;
this.children[i].addDate();
}
}
this.addDate = null; // remove the function we have added
// delete this.addDate; // if is compatible with browser
}
jsonLoaded.addDate = addDate;
jsonLoaded.addDate();
you cannot stringify json objects with functions, because of this, in the second method after add the method addDate, we remove that from the json object (also you can do delete this.addDate, but i don't know if it works in IE)
Wouldn't it be easier just to calculate the current system data whenever you read the file? I may be lacking context here but I don't see the point in storing that in the document.
If you really need to do so you can do as follows
var jsonObject = {"now":"new Date()"};
var date = eval(jsonObject.now);
it will be good to collect all the dates you want to transfer into a
Collection<String> dates = new ArrayList<String>();
Convert this collection to a json object and then at the receving end,convert it back to date. You can use joda date time API for conversions.
I use Gson in java to create json output, but Gson does not allow me to put javascript functions into the json. So this is what I do: Use replacement tags for the places you want to put code(like one of the earlier answers). Then get the text of the json, replace the tags, and then save the text to your json file:
Map<String, String> dynamicDates = new HashMap<>();
dynamicDates.put("d1", "new Date()");
dynamicDates.put("d2", "new Date(2015, 0, 1, 9, 30)");
dynamicDates.put("d3", "new Date(2015, 0, 1, 12, 30)");
JsonObject json = new JsonObject();
JsonObject root = new JsonObject();
JsonObject level_1_A = new JsonObject();
JsonObject level_1_B = new JsonObject();
json.add("root", root);
root.add("level_1_A", level_1_A);
root.add("level_1_B", level_1_B);
level_1_A.addProperty("d1", "${d1}");
level_1_A.addProperty("d2", "${d2}");
level_1_B.addProperty("d3", "${d3}");
StringBuilder sb = new StringBuilder();
new GsonBuilder().setPrettyPrinting().create().toJson(json, sb);
String str = sb.toString();
for (String key : dynamicDates.keySet()) {
str = str.replace("\"${" + key + "}\"", dynamicDates.get(key));
}
String jsonText = str;
String javascriptText = "var myJson = " + str + ";";
System.out.println(jsonText);
System.out.println(javascriptText);
So there is nothing left to be done on the consumption side in using this json. And the first output is:
{
"root": {
"level_1_A": {
"d1": new Date(),
"d2": new Date(2015, 0, 1, 9, 30)
},
"level_1_B": {
"d3": new Date(2015, 0, 1, 12, 30)
}
}
}
My use of json is usually saving it as javascript with an assignment, so this has been working for me.