I'm trying to use jquery to display content on my joomla website based on date. Here is the jsfiddle that is working: http://jsfiddle.net/2BHLd/968/
$(function() {
$(".DateDiv").each(function(index) {
var sRange = $(this).find(".DateRange").html();
var arrTemp = sRange.split(" to ");
var dtFrom = new Date(arrTemp[0]);
var dtTo = new Date(arrTemp[1]);
var dtNow = new Date();
if (dtNow >= dtFrom && dtNow <= dtTo)
$(this).show();
});
});
I'm using Jumi to insert the script and css into my page and putting the html into an article. The CSS seems to be working just fine, as it has hidden the html, but for some reason, the script doesn't appear to be showing the text even if the current date is within the date range.
http://askc.org/galacticos/index.php/events/upcoming-events
This joomla template seems to limit what I can do, but I'm thinking I've just made a simple mistake somewhere and I've spent two hours trying to fix it to no avail. Thanks in advance!
You are using $ to reference jQuery, while Joomla reserves that for mootools for legacy reasons.
Simply replace every occurrence of $ with jQuery so the above code will look like:
jQuery(function() {
jQuery(".DateDiv").each(function(index) {
var sRange = jQuery(this).find(".DateRange").html();
var arrTemp = sRange.split(" to ");
var dtFrom = new Date(arrTemp[0]);
var dtTo = new Date(arrTemp[1]);
var dtNow = new Date();
if (dtNow >= dtFrom && dtNow <= dtTo)
jQuery(this).show();
});
});
As an alternative, if you really like having the $ prefix, you could reassign it with
$ = jQuery;
just before your script; but this could break other functionality that relies on $ being mootools, and it's not the Joomla preferred way of doing it.
Finally, your code is not very resistant,
var dtTo = new Date(arrTemp[1]);
will break if sRange does not contain at least two items, and the following comparison will produce unpredictable results if the arrTemp items cannot be converted to dates.
Related
The problem I am trying to solve in Google Sheets is as follows:
add 180 days to whichever date passes my conditional test to every single row in a certain column based on 3 dates.
Google Sheets Example
I came up with the following script:
function adjustDates() {
var app = SpreadsheetApp;
var activeSheet = app.getActiveSpreadsheet().getActiveSheet();
for(var i=2; i<5; i++) {
var updatedCell = activeSheet.getRange(i, 2).getDate;
var removedCell = activeSheet.getRange(i, 4).getDate;
var implementedCell = activeSheet.getRange(i, 1).getDate;
if (updatedCell == null && removedCell == null){
activeSheet.getRange(i, 3).setValue(implementedCell+180);
} else if (updatedCell != null){
activeSheet.getRange(i, 3).setValue(updatedCell+180);
} else {
activeSheet.getRange(i, 3).setValue(removedCell+180);
}
}
}
I think I nailed down the logic, but I can't figure out why I am getting #NUM! error in all of my rows. I don't need to worry about leap years so this was a brute force solution on my part.
I am very new to JavaScript so please be gentle.
Thanks!
There is no such thing as getDate in class range.
You need to get the value first via getValue, and then as Matriarx mentioned, set the date using date.setDate(date.getDate() + 180)
var implementedCell = activeSheet.getRange(i, 1).getValue();
// we make sure to cast the date properly to avoid unexpected errors
var iCellDate = new Date(implementedCell);
iCellDate = iCellDate.setDate(iCellDate.getDate() + 180)
activeSheet.getRange(i, 3).setValue(iCellDate);
Apply to all instances.
new Date(date.getFullYear(),date.getMonth(),date.getDate() + 180)
I have a really weird error on IE.
I am using knockout custom validations. And one of my custom validations is to validate date.
function:
function isValidDate(txtDate) {
var currVal = txtDate;
if (currVal == '' || currVal == null)
return false;
//Declare Regex
var rxDatePattern = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/;
var dtArray = currVal.match(rxDatePattern); // is format OK?
if (dtArray == null)
return false;
/*continue of logic*/
}
This works great, when I run it first time. But then I do a redirect to server and return to the same page.
And the validation is called again at that point the problem begins.
I have a two snapshots of memory. They look identical to me. But there has to be some difference that I don't see or the match method is somehow broken.
The difference is not the dtArray == null that is the problem. You can try to run it in console. And it parse the dtArray correctly....
Both snapshot are on the same line ( if (dtArray == null) )
beforeRedirect:
afterRedirect:
Update. I solved my problem.
problem was that I was setting my observable property something like this:
var date = "1990-01-01T00:00:00";
var dob = new Date(date).toLocaleDateString();
masterModel.Dob(dob);
when I do it like this the match works fine now:
var date = "1990-01-01T00:00:00"
var dob = new Date(date);
var dobstring = dob.getDate() + "/" + (dob.getMonth()+1) + "/" + dob.getFullYear();
masterModel.Dob(dobstring);
if you want to see the difference run this on IE in console. My IE version is 11.0.9600
//because I am in UK my locale string is dd/MM/yyyy if you get different one this problem won't work for you!
var date = "1990-01-01T00:00:00"
var dob = new Date(date).toLocaleDateString();
var rxDatePattern = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/;
console.log(dob);
console.log(dob.match(rxDatePattern));
//vs
var date = "1990-01-01T00:00:00"
var dob = new Date(date);
var dobstring = dob.getDate() + "/" + (dob.getMonth()+1) + "/" + dob.getFullYear();
var rxDatePattern = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/;
console.log(dobstring);
console.log(dobstring.match(rxDatePattern));
Try simply checking for falsy values. The empty string, null and undefined are all falsy, there is no need to be more specific than that here.
function isValidDate(txtDate) {
if (!txtDate) return false;
var rxDatePattern = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/;
var dtArray = currVal.match(rxDatePattern);
if (!dtArray) return false;
/*continue of logic*/
}
That being said, I strongly suggest you use a date library (most prominently: moment.js) to do any date parsing, -calculation and -validation work. Don't roll your own regex when a fully functional and properly tested library has been written.
To think one step further, with knockout it's much easier to store an actual date object in an observable, so there is no need to parse any date strings at all, ever. You can also format it for display on screen any way you like, instead of limiting yourself/the user to a single format.
This way you would not need to do any date format validation at all. Either the observable contains a date - or not. For best effect use that together with a date picker widget (for example the one from knockout-jqueryui).
View model:
this.exampleDate = ko.observable();
View, assuming jQueryUI + knockout-jqueryui:
<input type="text" data-bind="datepicker: {
dateFormat: 'dd.mm.yyyy'
}, value: exampleDate" />
I already have a folder, with the files in it with names below in a specific format i.e. MODEL_RELEASEDATE
File names in the folder named Smartphone
SmartphoneA_11122012
SmartphoneA_01022013
SmartphoneA_09102013
SmartphoneA_10072012
SmartphoneA_12042012
**SmartphoneB_08282013**
SmartphoneB_04152013
SmartphoneB_08282012
SmartphoneB_01062013
.
.
.
.
and so on
I want to write a jquery code where I can use a specific keyword from format, from above list, I will pass the value SmartphoneA and I should be able to read the file with the latest release date. Same as in case when I pass the keyword SmartphoneB.
If I pass k/w SmartphoneB, result should be served from file highlighted above, i.e. SmartphoneB_08282013
my current code reads the file name only with specific k/w. I have few alterations to be made.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var metaKeywords=$('meta[name=keywords]').attr("content");//this utility works based upon the keywords on the pages.
var reqdKeyword = new Array();
reqdKeyword = metaKeywords.split(",");
var randKeyword = reqdKeyword[Math.floor(Math.random() * reqdKeyword.length)];
var cdnUrl = "http://abc.com/xyz/mobiles/";
var jsnUrl = ".json?callback=showDetail";
var finalUrl= cdnUrl.concat(randKeyword.trim()).concat(jsnUrl);
/*
Rest of the code goes here
*/
</script>
The cool thing about dates is that you can easily sort them if you have the date in "descending" order (i.e., year month day hour second). Using that, we can go through your files to grab just the ones that start with the right prefix, then easily grab the latest one:
var filenames = [
'SmartphoneA_11122012',
'SmartphoneA_01022013',
'SmartphoneA_09102013',
'SmartphoneA_10072012',
'SmartphoneA_12042012',
'SmartphoneB_08282013',
'SmartphoneB_04152013',
'SmartphoneB_08282012',
'SmartphoneB_01062013'
],
whichPhone = 'SmartphoneB', // Dummy value, this would come from user interaction or whatever
possibleFiles = [];
// This goes through your list of filenames and picks out just the ones that match `whichPhone`, then puts them into another array containing a "cleaned-up" date and some other metadata-esque stuff
for (var i = 0, j = filenames.length; i < j; i++) {
var filename = filenames[i];
if (filename.indexOf(whichPhone) > -1) {
possibleFiles.push({
index: i,
filename: filename,
date: parseInt(filename.split('_')[1].replace(/(\d{2})(\d{2})(\d{4})/, function(match, month, day, year) {
return year + month + day;
}), 10)
});
}
}
// Now we go through the `possibleFiles` and figure out which one has the latest date
var latestFileDate = 0,
theActualFilenameYouWantFinally;
for (var i = 0, j = possibleFiles.length; i < j; i++) {
var possibleFile = possibleFiles[i];
if (possibleFile.date > latestFileDate) {
latestFileDate = possibleFile.date;
theActualFilenameYouWantFinally = filenames[possibleFile.index];
}
}
// And, finally, your result
console.log(theActualFilenameYouWantFinally);
EDIT: I didn't use jQuery for this answer because meh, you don't really need jQuery for things like this. Don't get me wrong, John Resig is brilliant, and I use jQuery in almost everything, but for loops are damned fast and easy to work with, and stuff like this isn't really jQuery's strong suit anyhow.
You will need a server-side code to return you a list of URIs (file names), then you can write JavaScript code to parse it (but in this case it is probably better if your server-side code will return the right name right away based on query string). In the worst case scenario you can place a dir.txt file on the server which will be listing all the files in that folder and e.g. run cron job to update it as needed.
jQuery will have no way to list remote files on the server unless your server supports it in one way or another.
Update
Once you have the file you need:
a) tokenize it into an array, e.g. like this
var names = dir.split("\n");
b) leave only strings starting with keyword and cut keyword off
names = $(names).map(function(n,i) {
return (n.indexOf(keyword) == 0) ? n.split('_')[1] : null;
}).get();
now you have an array like this ['11122012', '01022013', ...]
c) find max date in this array
var dateNum = Math.max.apply( null,
$.map(names,function(n,i){ return parseInt(
n.replace(/(\d{2})(\d{2})(\d{4})/, function(match, month, day, year) {
return year + month + day;
}))
}) );
var maxDate = dateNum.toString().replace(/(\d{4})(\d{2})(\d{2})/,
function (match, year, month, day) { return month + day + year; }
);
var fileName = keyword + "_" + maxDate;
voila, your fileName contains the name with max date.
There are other ways of doing it, e.g. really parsing the date into Date object. Also, you can simply iterate your files once, without array mapping and Math.max() iterator. As the amount of code wins over speed here, to find the optimal one depends on where you could re-use its bits and pieces without compromising maintainability.
http://jsfiddle.net/Exceeder/VLB2E/
This is not exactly a problem, but more a question of method.
I am working on a project where people are able to type shorthand dates in input field, for example if you simply type "20", the input will automatically display the full date for 20th of this month.
There are many shorthand types possible, so I had to make multiple RegExp and then check each and every one.
My question is, is there a better way to deal with this? I am no javaScript expert,but I have a feeling that this is not exacty "best practise".
Here is the function
function dateParser(date) {
var splitDate = date.split(/[.:\s]/);
var day = new RegExp(/\b\d{1,2}\b/);
var dateHour = new RegExp(/\b\d{1,2}\s\d{1,2}\b/);
var dateHourMin = new RegExp(/\b\d{1,2}\s\d{1,2}[:]\d{1,2}\b/);
var dateMonth = new RegExp(/\b\d{1,2}[\/\-\,\.]\d{1,2}\b/);
var dateMonthHour = new RegExp(/\b\d{1,2}[\/\-\,\.]\d{1,2}\s\d{1,2}\b/);
var dateMonthHourMin = new RegExp(/\b\d{1,2}[\/\-\,\.]\d{1,2}\s\d{1,2}[:]\d{1,2}\b/);
var dateMonthYear = new RegExp(/\b\d{1,2}[\/\-\,\.]\d{1,2}[\/\-\,\.]\d{1,4}\b/);
var dateMonthYearHour = new RegExp(/\b\d{1,2}[\/\-\,\.]\d{1,2}[\/\-\,\.]\d{1,4}\s\d{1,2}\b/);
var dateMonthYearHourMin = new RegExp(/\b\d{1,2}[\/\-\,\.]\d{1,2}[\/\-\,\.]\d{1,4}\s\d{1,2}[:]\d{1,2}\b/);
var month = new Date().getMonth() + 1;
var year = new Date().getFullYear();
var newDate;
if(dateMonthYearHourMin.test(date)) {
newDate = splitDate[0]+"."+splitDate[1]+"."+splitDate[2]+" "+splitDate[3]+":"+splitDate[4];
}
else if(dateMonthYearHour.test(date)) {
newDate = splitDate[0]+"."+splitDate[1]+"."+splitDate[2]+" "+splitDate[3]+":00";
}
else if(dateMonthYear.test(date)) {
newDate = splitDate[0]+"."+splitDate[1]+"."+splitDate[2]+" 12:00";
}
else if(dateMonthHourMin.test(date)) {
newDate = splitDate[0]+"."+splitDate[1]+"."+year+" "+splitDate[2]+":"+splitDate[3];
}
else if(dateMonthHour.test(date)) {
newDate = splitDate[0]+"."+splitDate[1]+"."+year+" "+splitDate[2]+":00";
}
else if(dateMonth.test(date)) {
newDate = splitDate[0]+"."+splitDate[1]+"."+year+" 12:00";
}
else if(dateHourMin.test(date)) {
newDate = splitDate[0]+"."+month+"."+year+" "+splitDate[1]+":"+splitDate[2];
}
else if(dateHour.test(date)) {
newDate = splitDate[0]+"."+month+"."+year+" "+splitDate[1]+":00";
}
else if(day.test(date)) {
newDate = splitDate[0]+"."+month+"."+year+" 12:00";
}
return newDate;
}
I believe you can consolidate some of your regular expressions and make this more compact.
The first thing I notice is that whitespace appears to be an important separator in your input strings. Specifically, the date (or day) is always separated from the hour/minute with a space. So the first thing I would do is split your input on a space:
var parts = date.split( /\s/ );
var datePart = parts[0];
var timePart = parts[1]; // could be undefined
Now we can process the date part and the time part (if it exists) separately. The components of your date part are always separated by a slash, a dash, a comma, or a period, so again we can just split it:
parts = datePart.split( /[\/\-\,\.]/ );
var day = parts[0];
var month = parts[1] // could be undefined
var year = parts[2]; // could be undefined
You can split the time similarly, since hours and minutes are always separated by a colon:
if( timePart ) {
parts = timePart.split( /:/ );
var hour = parts[0];
var minute = parts[1]; // could be undefined
}
This should make this a little more compact and easy to read and maintain. You could go even more compact with a singular regular expression with groups, but I feel that this approach would be better.
The problem you described is tackled by Natural Language Processing, Programming/Query Language Design fields.
One of the approaches for solving those kind of problems is manually written scanner using RegExp/other string scanning and working with the result the way you did. It works for simple languages, doesn't require much knowledge in language design department and usually is intuitive to modify.
If you however have feeling that input is going to grow to something more complicated I recommend replacing RegExp scanning with full-fledged parser/lexer using for example Jison "Your friendly JavaScript parser generator!" or anything else that suits you.
I want change following javascript code to jquery code, How is it?
With done change hourOffset in date 3, 21 and 9, 22.
DEMO: http://jsfiddle.net/zJRDC/
<script type="text/javascript">
var interval = self.setInterval("clock()", 1000);
function clock() {
var date = new Date();
var hourOffset = 3;
date.setUTCHours(date.getUTCHours(), date.getUTCMinutes());
var time = date.getTime();
date.setUTCFullYear(date.getUTCFullYear(), 3, 21);
var dstStart = date.getTime();
date.setUTCFullYear(date.getUTCFullYear(), 9, 22);
var dstEnd = date.getTime();
if (time > dstStart && time < dstEnd){ hourOffset = 4;}
date.setUTCHours(date.getUTCHours() + hourOffset, date.getUTCMinutes() + 30);
var output = date.getUTCHours() + ":" + date.getUTCMinutes() + ":" + date.getUTCSeconds();
document.getElementById("clock").innerHTML = output
}
</script>
<div id="clock"></div>
There's precisely one line of that where jQuery might apply:
document.getElementById("clock").innerHTML = output
which with jQuery could be
$("#clock").html(output);
That uses $ to look up the element, which includes a workaround for a bug in getElementById in earlier versions of IE, and then uses the html method to set the markup on the element (which is very like setting innerHTML — again, though, with some workarounds for problematic bits in some cases; they probably don't apply to this specific code).
Note that jQuery is just a framework written in JavaScript. It smooths over some browser differences dealing with the DOM, and provides a lot of handy utility functionality, but it's not a thing separate from JavaScript. You write JavaScript code, and you optionally use jQuery in it (just like any other library).
if your code works. you don't really need jquery. unless you want to create re-usable function or your custom plugin.
a quick sample to use clock() as jquery plugins (didn't test)
(function( $ ){
$.fn.myClock = function(timeout) {
var interval = setInterval("clock()", timeout);
function clock() {
//..calculate date output
var output = //...
this.html(output)
}
};
})( jQuery );
then to use your plugin
$(document).ready(function(){
$('#clock').myClock(1000);
}
see Plugins/Authoring and learn-how-to-create-your-own-jquery-plugin
JQuery is already done with JavaScript . Nothing to convert because JQuery is not a language ;).