dd/mm/yyyy date format issue

Posted June 16th, 2008 by Anonymous

Hi,

I've tried Scal; more precisely the floating calendar. It's just what I need, but I think I'm missing something or I might have found a bug... I'm in Spain, and here we use the dd/mm/yyyy date format.

I copied the source from the demo and changed the following line in showCalendar function:

From
updateformat: 'mm/dd/yyyy'

Changed to
updateformat: 'dd/mm/yyyy'

The first time I click on the image, it shows me the correct date (today: June, 16th 2008) but when I click again on the image, it interprets the value as a mm/dd/yyyy date, changing it to April 6th, 2009, then to June 4th, 2009, and then back to April 6th, 2009.

Am I missing something? Or it's a bug?

Thanks,
Octavi.

What about dot (.) as seperator

On June 23rd, 2008 skaue says:

In reply to "On June 22nd, 2008 Mark (not verified) says:"
Scandinavians (like me) use dd.mm.yyyy as format. Would it be easy to apply dot as seperator as well?

re: updateformat

On June 19th, 2008 jamiegrove says:

Hi, Octavi.

I just tried your format in my local environment and it works quite well. Did you pass in a function ref for the oncalchange option? If so, could you share the code?

Thanks!

- Jamie

P.S. Sorry for the delay in my response.

dd/mm/yyyy date format

On June 20th, 2008 Octavi (not verified) says:

Hi,

I uploaded a sample zip here. It's almost the demo zip from here, but I changed the file floating.htm (line 46) to match the dd/mm/yyyy format. This is the only one difference.

To see the problem, click on the calendar image twice. I'm using Firefox 3 and IE 7.

Thanks,
Octavi.

js Date Constructor

On June 20th, 2008 jamiegrove says:

Octavi,

Thanks for posting this. I've confirmed the error. Somehow I missed the fact that you were using the floating calendar demo. No reason for my error of course since it's right up there in the message.

I was able to confirm the error and it is a problem with the logic that loads the calendar in that particular demo.

When you click the calendar icon, the code reloads the scal instance using the date saved in the text field. When passing a string to the js Date object constructor, it must be in the format of mm/dd/yyyy. So, when the format is changed to dd/mm/yyyy, the Date is seeded with month 20 of year 2008 (which is actually 08 of 2009 when you do the math).

One possible solution is to change the floating calendar to keep a good copy of the date object in a hidden field and reference that instead. You could also add a routine to parse out the text of this new format and seed the js Date with values in the proper order.

- Jamie

Thanks

On June 20th, 2008 Octavi (not verified) says:

Hi Jamie,

Thanks for your quick reply. I managed to get a patch that resolves this. I added some lines that swap the "month" and "day" values before creating the Date object:

Before the line

var date = new Date($F(input));

I added:

var dateStr = $F(input);
var arr1 = dateStr.split('/');
var arr2 = new Array(arr1[1],arr1[0],arr1[2]);
var dateStr2 = arr2.join('/');

And changed the line above to:

var date = new Date(dateStr2);

That's a quick patch to get the floating calendar working with dd/mm/yyyy date format, but it won't work if the format is mm/dd/yyyy :-P. Maybe someone could write a more elaborate patch.

Thanks again for your reply and for your works :-)
Octavi.

dd/mm/yyyy date format issue

On June 22nd, 2008 Mark (not verified) says:

I changed the floating page to accept date formats of either dd/mm/yyy ,mm/dd/yyy, also d/m/y and m/d/y.
I also made it so you can use a date separator of '-' or '/'.

I added a param to showCalendar,
function showCalendar(element, input, container, source, fieldformat)

then
var dateSeparator='/';
if (fieldformat.match('-')=='-') {dateSeparator='-'};
var dateStr = $F(input);
var firstFormatChar = fieldformat.charAt(0).toLowerCase();
if (firstFormatChar == 'd')
{
var arr1 = dateStr.split(dateSeparator);
var arr2 = new Array(arr1[1],arr1[0],arr1[2]);
var dateStr2 = arr2.join('/');
}
else
{
dateStr2 = dateStr1;
};
var date = new Date(dateStr2);

and in the scal.js file I changed the formats to the following

var formats = {
'yyyy' : d.getFullYear(),
'mmmm': this.monthnames[d.getMonth()],
'mmm': this.monthnames[d.getMonth()].substr(0, 3),
'mm': this.formatPadding ? ((d.getMonth()).succ()).toPaddedString(2) : (d.getMonth()).succ(),
'm': this.formatPadding ? ((d.getMonth()).succ()) : (d.getMonth()).succ(),
'dddd': this.daynames[d.getDay()],
'ddd': this.daynames[d.getDay()].substr(0, 3),
'dd': d.getDate().toPaddedString(2),
'd': d.getDate(),
'hh': h = d.getHours() % 12 ? h : 12,
'nn': d.getMinutes(),
'ss': d.getSeconds(),
'a/p': d.getHours() < 12 ? 'a' : 'p'
};
return f.gsub(/(yyyy|mmmm|mmm|mm|m|dddd|ddd|dd|d|hh|nn|ss|a\/p)/i,
function(match) { return formats[match[0].toLowerCase()]; });

Hope this helps, it provides more flexible handling of the date formats.

I did not that the scal.js file in the floating demo is different to the "latest" file founfd in the scal2 zip file. The file from the zip will not work with this demo.

Mark Horrocks

dd/mm/yyyy date format issue

On March 20th, 2009 Dante Torres Estrada (not verified) says:

Also, we require change

var date = new Date($F(input));

var date = new Date(dateStr2);

dd/mm/yyyy date format issue

On June 22nd, 2008 jamiegrove says:

Thanks, Mark! I definitely appreciate the contribution!

- Jamie

dd/mm/yyyy date format issue

Post new comment