Multilingual Javascript Date-Format Class

PHP strftime and Javascript DateFormat class

PHP strftime and Javascript DateFormat class

For PHP developer, it’s will be nice if we can use same date format parameter both in PHP and Javascript. This DateFormat class created for that purpose, since took strftime like parameter to format the output string. For example passing parameter “%d-%m-%Y” will output “dd-mm-yyyy” date string. See also: PHP strftime manual.

DateFormat has standard version and prototype version. The standard version does not required any other library, because it’s developeded under standard Javascript. The prototype version required Prototype library (a least version 1.6).

The diference between these two are when dealing with the hash object. Prototype provide $H method, and also hash#get and hash#set function. So you can pass any hash parameter as object, hash or array; and the $H method will taken care the rest of the process. Otherwise, the standard version only support hash for any hash parameter.

About: DateFormat Prototype Version

On 08 September 2008
I have heard prototype.js for long time, but I avoid to use any javascript library untill I have to deal with a project that use prototype.js as main library. So, I download it (version 1.6.0.2) along with scriptaculous.js. Please be patient with me (my script), because I just learn prototype for few days and try to play and making some fun. My script, DateFormat.js, need prototype.js version 1.6.0.1 or 1.6.0.2. I never check the compatibility with lower version. Just for note, this script does not need scriptaculous.

Demo

You can find the demo at http://code.lokamaya.net/dateformat/ .

Download

You can find both standard and prototype version in the download file. The prototype version is jut for fun, but you also can use it if you use Prototype library in your application.

Download Javascript DateFormat Version 1.1

Downloaded a total of 165 times

Example of Use

var oDate = new DateFormat({lang:”en“});
//create instance object and pass parameter {lang:”en“}

oDate.getDate();
//return current date in default format (example: 12-01-2008)
oDate.toFormat(”%B, %Y”);
//return current date in “%B, %Y” format (example: December, 2008)

oDate.setDate({year:1980, month:09, date:15});
//set new date
oDate.toFormat(”%B, %Y”);
//return September, 1980
oDate.toFormat(”%m-%d-%Y”);
//return 09-15-1980
oDate.toFormat(”%Y-%m-%d”);
//return 1980-09-15

oDate.getDate({year:2003, month:02, date:15}, “%d-%m-%Y”);
//set new date and get the output at the same
//and passing new format: “%d-%m-%Y”
//return 15-02-2003

Main Methods

Properties Return Description
new DateFormat(property)
Class Instance
 Class Instance
#getDate([options,[format]])
[string]
 Main function to set and get the date in the desired format. If ‘format’ argument not suplied, it will use default format
#setDate([options,[return]])
[object Date|hash|void]
 Only set the date. ‘return’ parameter can be set as string (’object’ or ‘hash’), or void (no value, return void).
#setUTC(true|false)
[boolean]
 Switching back between local time and UTC
#toFormat([format])
[string]
 Return formated Date in string. If ‘format’ argument not suplied, it will use last or default format
#toDate(formatedDate[,return])
[object Date|hash]
 (Under development) Return hash or object date. Default object date.
#toJSON([options])
[string]
 Return JSON format date. Example output: “2008-12-01T04:56:42Z” (with quote)
#toString([options])
[string]
 Default Date.toString() supported by javascript
#toLocaleDateString([options])
[string]
 Default Date.toLocaleDateString() supported by javascript
#toObject([options])
[object Date]
 Same as calling “new Date”. If ‘options’ argument not suplied, it will return last Date object.
#valid(formatedDate, format)
[boolean]
 (Under development) To validate formated date against the format.
#compare(options-1, options-2)
[integer]
 (Under development) Compare between 2 formated and return the difference in seconds or years

Helper: Populate Language

Methods Return Description
DateFormatLang
Arrays Instance
 To stored locale language configurations
DateFormatLang#Populate
[void]
 To insert new locale to DateLang. The arguments are (see the example below):

  • lang –> ‘en’
  • defaultFormat –> ‘%m/%d/%Y’
  • arrayMonths –> ['Januari', ...]
  • arrayMonthsAbbr –> ['Jan', ...]
  • arrayDays –> ['Sunday', ...]
  • arrayDaysAbbr –> ['Sun', ...]

Example:
Populate Indonesia language (”id”)

DateFormatLang.Populate(
        'id',
        '%d/%m/%Y',
        ['Januari','Februari','Maret','April','Mei','Juni', 'Juli','Agustus','September','Oktober','Nopember','Desember'],
        ['Jan','Feb','Mar','Apr','Mei','Jun', 'Jul','Agu','Sep','Okt','Nov','Des'],
        ['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu'],
        ['Ming','Sen','Sel','Rab','Kam','Jum','Sab']
);

UTC and Browser/Client Time

//Change the output date to UTC
//Using DateFormat Class

var oDate = new DateFormat({lang:en, utc=true});

oDate.setDate();

var output = oDate.toFormat(”%A, %B”);

//Toggle UTC, to local time

oDate.setUTC(false);

var output = oDate.toFormat(”%A, %B”);

//Switch back to UTC time

oDate.setUTC(true);

var output = oDate.toFormat(”%A, %B”);

“Day/Week of Year” and “Week of Month”

I add 3 new methods to default javascript object Date–beside #toJSON taken from prototype.js. The new methods are “#getDayOfYear“, “#getWeekOfYear” and “#getWeekOfMonth“.

//Using DateFormat Class

var oDate = new DateFormat({lang:en});

oDate.setDate();

var countDayOfYear = oDate.toFormat(”%j”);

var countWeekOfYear = oDate.toFormat(”%W”);

var countWeekOfMonth = oDate.toFormat(”%F”); //%F format not found in PHP. I add a new one…

var JSONFormat = oDate.toJSON();

//Since the methods has been added to Date object, we also can use it directly.

var oDate = new Date;

var countDayOfYear = oDate.getDayOfYear();

var countWeekOfYear = oDate.getWeekOfYear();

var countWeekOfMonth = oDate.getWeekOfMonth();

var JSONFormat = oDate.toJSON();

About this entry

You’re currently reading “Multilingual Javascript Date-Format Class”, an entry on Lokamaya

Published:
01 December 2008
Category:
Download​/​ Javascript
Comment:
No comments