Use jQuery to Read Text then Change - javascript

I am using a CMS that generates some code for me. I am having the CMS auto-generate the date a page was last updated. (Note: This page contains information that is time sensitive and it is beneficial for the end user to see when the page was last updated.)
The system generates the following time stamp: 24-May-2013 11:54 AM, however, I would prefer the date to look like so: May 24, 2013 (to follow the US Standard way of writing time) and drop the time completely.
The code looks like so:
<p>Last Updated: <span class="time">24-May-2013 11:54 AM</span></p>
I believe this would be possible using jQuery but I do not know how to do this. Any recommendations on how to use jQuery to do this would be welcome!

$(".time").each(function() {
var $this = $(this),
// regex to retrieve day, month and year
stamp = /([0-9]{1,2})-([a-z]*)-([0-9]{4})/i.exec($this.text())
$this.html(stamp[2] + " " + stamp[1] + ", " + stamp[3]);
});
See the jsfiddle for demo: http://jsfiddle.net/mifeng/gquhp/

If you have jQuery UI, you can use datepicker.
$(".time").val($.datepicker.formatDate('M dd yy', new Date()));

Related

JQuery Datepicker Oracle APEX

I hope you are well.
I have an Oracle APEX form (v20) with a DatePicker field.
I only want to display a pop-up when the user clicks on Sunday.
My code :
var selector = $("#" + $(this.triggeringElement).parent().find('.apex-item-datepicker').attr('id'));
function showday() {
day_no = new Date($(this).val()).getDay();
if(day_no == 0) { //sundays
alert("its sunday");
}
}
selector.datepicker("option", {
onClose : showday
}).next(".ui-datepicker-trigger").addClass("a-Button a-Button--calendar");
I have a functional code which is the following but since the APEX datepicker it doesn't work like the demo below: http://jsfiddle.net/D4AGz/104/
it works in a way that I can't explain, more or less randomly, for example yesterday (before 00h) I had the following result : the pop-up is only displayed on the following Monday.
Thank you in advance for your help, I wish you a nice day.
It is possible to make the pop-up appear using a Dynamic Action. If you set a Dynamic Action Client-side Condition to read the date after the value was changed, you can verify if the date was Sunday.
In my screenshot below I hard coded the timezone to be UTC -4 since I am in the Eastern US timezone. You may need to adjust that if you so choose. I am also use the format mask YYYY-MM-DD for my date field so if the format mask of your date field is different, the javascript expression in the Client-side Condition may need to change.
I build this demo on apex.oracle.com that you can try out here.

converting json date regardless timezone

I'm looking to get a date when literally no time zone is applied in any case. In the example code I get totally different results in IE and Chrome. I need to get "7" in any case. What is the correct way?
$('#result')[0].innerText = "JSon: 2015-03-13T07:30:00 \n" + "As Date: " + new Date("2015-03-13T07:30:00") + "\n" + "Hours Part:" + new Date("2015-03-13T07:30:00").getHours();
https://jsfiddle.net/xtjbvcpw/2/
Thanks.
While this doesn't exactly answer your question, one option would be to use a javascript module to handle the timezone issue (including operating in a fixed and/or arbitrary timezone). I have use moment-timezone in the past to great success.

jQuery Date Formatting in Business Catalyst

I work with Business catalyst a lot, and would like to be able to format the dates as desired. Date output is as follows:
<span class="date">06-Feb-2014</span>
Currently using jQuery 1.10.2, and I can add jQuery UI if that's the way to go.
I have tried the following to no effect:
$(document).ready(function () {
$('span.date').each(function() {
var dateFormat = $(this).text()
var dateFormat = $.datepicker.formatDate('MM dd, yy', new Date(dateFormat));
//alert(dateFormat);
$(this).html(dateFormat + "<br>");
});
});
The site in question is http://www.doverfoursquare.org
Perhaps there is some sort of conflict with existing scripts?
Any help is GREATLY appreciated.
I know this is an old post but it doesn't seem answered...
I would use Liquid for this for example in an events module using a template:
{{date | date: "dddd"}}
and / or
{{date | date: "%d"}} {{date | date: "MMM"}}
should get you "Saturday 4 July"
You can use this resource to help with the modifiers / filters
http://docs.businesscatalyst.com/dev-assets/reference#!/liquid-reference/reference/filters.html!date-filters
When dealing with formatting dates I always see myself turn back to momentjs: http://momentjs.com/ . Its not the fastest framework but it will help you format your date in any desired way:
moment().format("DD-MMM-YYYY"); // "20-Feb-2014"
It works as intended here:
Note that datepicker is extension trough jQuery UI and as such you have to include it to work:
//code.jquery.com/ui/1.10.4/jquery-ui.js
Fiddle
Note that in example the var dateFormat is renamed, so to not re-declare existing.
$(document).ready(function () {
$('span.date').each(function() {
var value = $(this).text(),
date = $.datepicker.formatDate(
'MM dd, yy', new Date(value)
);
$(this).html(date + "<br>");
});
});
Or you could say:
$(this).html(
$.datepicker.formatDate(
'MM dd, yy', new Date($(this).text())
) + "<br>"
);
Edit in regards to date format:
Ref. ECMA
Format can be
YYYY-MM-DD
but not
DD-MM-YYYY
Also read this.
Errors:
Running you page, it show's this error:
Uncaught TypeError: Object [object Object] has no method 'player' (index):343
By source that would be:
$(document).ready(function() {
var settings = {
progressbarWidth: '200px',
progressbarHeight: '5px',
progressbarColor: '#22ccff',
progressbarBGColor: '#eeeeee',
defaultVolume: 0.8
};
$(".player").player(settings); // <<--- Error line
});
This is a possible source of halting the script at load or the like.
It also gives, (This could be some Facebook issue):
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
The:
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
you can ignore as it is a jQuery "thing" and IE fix/hack.

Built-in function in Javascript to format date

I'm wondering if there is anything like this?
I'm getting my CMS to sort the content by date, so this is my approach.
First getting the current time.
var date = Date.now();
It will return me 1374426602321.
So now when I want to display that to the user and obviously we don't want to display the above, so I'm using this right now.
var formattedDate = new Date(date).toDateString(),
That will output
Sun Jul 21 2013
Which is good, but that is not really the correct or perfect way I guess.
I'm expecting more like Sunday July 21, 2013.
Is there a way that we can accomplish this by not using any of the plugin or any module and not having to create like another function to format this??
This is being done in the server-side using Node.js
use a library or a function... don't see any other way.
function getDateString(d){
return
["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][d.getDay()]+" "+
["January","February","March","April","May","June","July","August","September","October","November","December"][d.getMonth()]+" "+
d.getDate()+", "+
d.getFullYear();
}

strptime in Javascript

I have a date input field that allows the user to enter in a date and I need to validate this input (I already have server side validation), but the trick is that the format is locale dependent. I already have a system for translating the strptime format string to the the user's preference and I would like to use this same format for validating on the Javascript side.
Any ideas or links to a strptime() implementation in Javascript?
After a few days of googling I found this implementation which, although not complete, seems to handle all of the cases I have right now.
I've just added our php.js implementation of strptime(); I've tested it a bit, but it needs further unit testing. Anyhow, feel free to give it a shot; it should cover everything that PHP does (except for not yet supporting the undocumented %E... (alternative locale format) specifiers).
Note that it also depends on our implementation of setlocale() and array_map()...
https://github.com/kvz/phpjs/blob/master/functions/strings/setlocale.js
https://github.com/kvz/phpjs/blob/master/functions/array/array_map.js
Here is an example function that duplicates most of the functionality of strptime. The JavaScript date object generally will parse any date string you throw at it so you don't have to worry to much about that. So once you have a date object based off of your string you just push each element into a JS object and return it. This site has a good reference to the properties of the JavaScript date object: http://www.javascriptkit.com/jsref/date.shtml
function strptime(dateString){
var myDate = new Date(dateString);
return {tm_sec:myDate.getSeconds(),
tm_min: myDate.getMinutes(),
tm_hour: myDate.getHours(),
tm_mday: myDate.getDate(),
tm_mon: myDate.getMonth(),
tm_year: myDate.getFullYear().toString().substring(2),
tm_wday: myDate.getDay()};
}
var dateString = "October 12, 1988 13:14:00";
dateObj = strptime(dateString);
document.write("d:" + dateObj.tm_min + "/" + dateObj.tm_hour + "/" + dateObj.tm_mday + "/" + dateObj.tm_mon + "/" + dateObj.tm_year);

Categories

Resources