Develop Reference

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.

fullcalendar time format

Good afternoon, I know that this topic has been discussed on previous ocassions, nevertheless despite the different threads I still can't solve my problem. I am using the full calendar provided at http://arshaw.com/fullcalendar/, and they have two ways of displaying time, "10:30a"-"7p", for example. I want the time displayed on the calendar of events that are not full day, in a format "12:00 pm" or "12:00 am". The problem i'm having is, when you download the fullcalendar you have several files:
fullcalendar.js, fullcalendar.css, fullcalendar.min.js, fullcalendar.print.css, gcal.js, jquery-1.9.1.min, jquery-ui-1.10.2.custom.min
I tried what other threads suggest, which is a change in the fullcalendar.js at the time format and setdefault methods but to no avail. I can even delete the file "fullcalendar.js" and my test still works just fine. I want to know why is this and if the time format is not managed there, where is it managed? Thanks

Use this and it's going to work:
$('#calendar').fullCalendar({
timeFormat: 'hh:mm a'
});

If you are using timelineDay view, I found out that this setting will change the time format:
slotLabelFormat:"HH:mm"

You can use this:
axisFormat: 'h:mm a'

I had the same problem before, this will solve your problem
if you are using version 4, add this object to your fullcalender's object
eventTimeFormat: {
hour: "numeric",
minute: "2-digit",
meridiem: "short",
},

First I think you are confused with so many files, but basically you need only need the minified of the javascript and css to make it work.
Second, I had the same problem when displaying the time correctly. This is what I did, it is a bit of workaround but it worked for me, sorry if its dirty.
When you initialise the calendar you have to put the option for the timeformat so it shows the minutes even if its rounded hours.
jQuery('#calendar').fullCalendar({ timeFormat: 'h:mm t' });
Then it was appearing only the "a" or "p" not "am" or "pm" so I used a little bit of CSS magic to add the "m" at the end, I created the rule:
.fc-time:after { content: "m"; }
now you might mess up with the week view so you add the rule
.fc-axis.fc-time:after { content: " "; }
And now hopefully you have it the way you want.
Regards

in fullcalendar v3, they use moment.js to format time,
you can format using,
timeFormat: 'h:mm A', you can change between quote with input in this moment js docs page

fullcalendar allows you to change the default times by setting the time format (http://arshaw.com/fullcalendar/docs/text/timeFormat/). Probably better than changing the source code.
I think the reason your solution isn't working is because you are including fullcalendar.js and fullcalendar.min.js. These files contain the same code, the second one being a minified version of the first. Minified files are typically used in deployed versions of sites whereas the other version is used in development. So if you want to make changes don't include the minified version

In your scheduler.fullcalendar.js file look for the events:[], and under it add this line timeFormat: 'hh:mm A',
it will show time like this 10:20 PM
and if u want to show time like this 10:20 Pm use small a

keith-wood date picker dateFormat and language

I'm using the Keith-Wood date picker and i´ve a problem with dateFormat.
When i use the following script everthing works fine:
$('#popupDatepicker').datepick({dateFormat: "yyyy-mm-dd"});
(when a select a date the result is, for example, 2012-09-06)
but when i include the language setting the dateFormat is ignored
$('#popupDatepicker').datepick($.extend({dateFormat: "yyyy-mm-dd"}, $.datepick.regional['pt-BR']));
In this case, when a select a date the result is, for example, 09/06/2012 (corresponding to the default dateFormat mm/dd/yyyy).
Anyone have a clue?
Thanks.

I found one solution (not sure if it's the best one) but...
$.datepick.setDefaults($.datepick.regional['pt-BR']);
$('#popupDatepicker').datepick({dateFormat: "yyyy-mm-dd",altFormat: "yyyy-mm-dd"});

Why does changing the dateFormat of my jQuery datepicker fail?

I know there are loads of questions on here about changing the datepicker dateFormat, but i'm following the instructions exactly and they seem to have no effect. Here is the exact code that was suggested on other answers:
$(document).ready(function() {
$('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' });
});
Yet when I run it, and test the datepicker value with alert($('#datepicker').datepicker("getDate"));
I get the date back in the undesired format! This is extremely confusing. Am I something wrong? See the described behaviour at http://jsfiddle.net/TmdM8/
edit: even more confusing is that if I read the dateformat using alert($("#datepicker").datepicker('option', 'dateFormat'));
... the returned dateFormat is correct, even though calling getDate does not return the date in the desired format. See http://jsfiddle.net/fWmBe/

the date format setting is for what the format looks like when it's show in the text box the picker is applied to.
have a look at my updated version of your fiddle:
http://jsfiddle.net/TmdM8/1/
as you can see, when you pcick in the text box, and pick a date, it is in the format you have specified.
as far as i know, the getDate function returns a javascript date.
EDIT:
if you wanted to format the output from the javascript date, you'll need to use a custom script, or a library like date.js (i've had great success with this).
http://code.google.com/p/datejs/
with that you could do something like :
$('#datepicker').datepicker("getDate").toString('dd-MM-yyyy');
to get your date in the format you like

I agree that it returns a javascript date. You can use this utility function:
$.datepicker.formatDate( format, date, settings ) - Format a date into a string value with a specified format.
from http://docs.jquery.com/UI/Datepicker/formatDate

What is happening here is getDate is return a javascript date object. You are seeing the date object's toString method.
Try this:
$(document).ready(function() {
$('#datepicker').datepicker({
onSelect: function(dateText, inst) { alert(dateText) }
});
$('#datepicker').datepicker( "option" , 'dateFormat', 'yyyy-mm-dd' )
});

in case someone looking for this answer like me. here is a working code:
<script>
$(function() {
$( "#datepicker" ).datepicker({inline: true, dateFormat:'yy-mm-dd'}); });
</script>

Jumping a week or month in the jQuery UI Datepicker

PetersenDidIt did a great job answering this question.
He showed how to use a link to update the jQueryUI Datepicker's selected date by one day. His solution was:
$('a#next').click(function () {
var $picker = $("#datepicker");
var date=new Date($picker.datepicker('getDate'));
date.setDate(date.getDate()+1);
$picker.datepicker('setDate', date);
return false;
});
I am trying to modify it to do the same thing for a week or month. According to the set date api I should be able to use "+1m" and "+1w" to skip a month or week. I can't seem to get the code working with anything other than "+1".
Thoughts?

you can use the same code you have.
when you want one week do like this:
date.setDate(date.getDate()+7);
when you want one month you can do:
date.setMonth(date.getMonth()+1);

Try using FireBug script debugging. Might be some JS exception being generated.