PDA

View Full Version : Ext.fc.fuzzyDate - a nice way to present dates [Updated]



francodacosta
4 Apr 2009, 8:36 AM
http://francodacosta.com/demos/extjs/fuzzydate/logo.png

About

The FuzzyDate plugin was inspired by the TimeAgo plugin for jQuery . I needed something similar for ExtJs. Since i didn't find it I decided to build one for ExtJs.

The ideia is instead of showing a timestamp to the user show a more friendly message like one hour ago or 3 months from now

Features

* Updates timestamps automatically, avoiding timestamps dated "1 minute ago" even though the page was opened 10 minutes ago
* Multiple languages supported
* Fully Customizable
* You can define several date formats that will be used to convert the date string to an Ext Date object
* if don't need automatic updates neither want to have it atached to an element you can simply get the translated date with the translate() function

Download

http://francodacosta.com/demos/extjs/fuzzydate/


Cheers

Nuno

mystix
4 Apr 2009, 8:44 AM
for some strange reason the demo on your page only shows this:


You opened this page you need javascript for this to work!!

August 4 2008 was you need javascript for this to work!!

2009 New years eve will be you need javascript for this to work!!


am i missing anytime anything?


p.s. off-topic: i love your coding style. very clean and neat =D>
(i'd avoid tab characters and opt for 4 spaces though -- makes for consistent cross-editor indentation)

francodacosta
4 Apr 2009, 9:06 AM
for some strange reason the demo on your page only shows this:


am i missing anytime?


p.s. off-topic: i love your coding style. very clean and neat =D>
(i'd avoid tab characters and opt for 4 spaces though -- makes for consistent cross-editor indentation)

Thanks for noticing mystix,
It's fixed, I was so eager to share it that I forgot to remove firebug console.log() statements.

smartlit
7 Apr 2009, 5:58 AM
Very nice! However, when I try the demo using IE6, it crashes.
Thanks,

Paul

francodacosta
8 Apr 2009, 12:16 PM
I don't have IE 6 to test it

It's working on Firefox and IE 7, and implemented on several sites in the news section

It may sound snobby but I do not intend to support IE 6, let it rest in peace

smartlit
8 Apr 2009, 12:26 PM
I understand your reasons but some of my users are stll using IE6 (mainly big companies that cannot upgrade), so I need to support it. I will try to create my own component that works in IE6 too...

Thanks,

Paul

francodacosta
8 Apr 2009, 12:47 PM
It crashes IE 6 when you see the demo on my site ?

do you know in which line or what the error it gives ?

smartlit
8 Apr 2009, 12:57 PM
Yes, it crashes when I visit your website. Unfortunately IE6 does not have debugging tools, so I cannot know the exact line. It gives me "unknown runtime errror". Under IE7 or other browsers it works. Here I have two PCs, one with IE6, another one with other browsers. However, you may also check http://tredosoft.com/Multiple_IE

Thanks,

Paul

francodacosta
8 Apr 2009, 2:48 PM
I found this little program that let me tests all versions of IE
http://www.my-debugbar.com/wiki/IETester/HomePage

IE 6 is crashing because it can not update the innerHtml of the abbr tag

if in fuzzyDate.js in line 18 you change it ,itemSelector: 'span.fuzzyDate'

and in the html change abbr to span

it should work just fine

or you can just redownload

smartlit
8 Apr 2009, 11:57 PM
Yes, now it works also in IE6, great! :-)

I'd like to include it in an ExtJs application, where several modal windows are displayed. Let's say I use your code on some <SPANs in each modal window. When a modal window is hidden, I don't want your code updates the hidden SPANs. This is for performance reasons. I may have 20 hidden SPANs, and just one visible, so I want your code updates only the visible one.

What is the best way to approach this?

Thanks,

Paul

francodacosta
9 Apr 2009, 3:59 AM
You can remove the fuzzyDate class from the elements you don't want updated, when you need them updated just add the class again and do an fuzzyDate.refresh() so that the fields are updated now

To add and remove css classes check out Ext.Element. addClass () and Ext.Element.removeClass()



If you are using fuzzyDate you should consider "buying me a beer", it would be much appreciated ;)

smartlit
9 Apr 2009, 4:35 AM
I'll try that, thanks!

Of course, if I use your code I will make a donation! A beer is always good! ;)

francodacosta
9 Apr 2009, 6:59 AM
I've PM you

if you need help just ask

francodacosta
14 Apr 2009, 5:27 AM
There is a new version available, now you can


apply fuzzyDates to a specific element with applyTo(elementId, options)
get the translated date / time from a date string with translate(string)