YUI 3.x Home -

YUI Library Examples: DataType Utility: DataType.Date.format()

DataType Utility: DataType.Date.format()

The Date module of the DataType Utility allows you to format a JavaScript Date object into a string with strftime syntax.

NOTE: As of 3.1.0, the formatting patterns used by DateType.Date can be driven by external language resource bundles as described in the "Formatting Dates Using Language Resource Bundles" Example. This examples currently uses the 3.0.0 dateFormat and locale instance configuration support which have been deprecated.

View example in new window.

To format a JavaScript Date object into a string, simply call the format() function of the DataType.Date class. You may pass in optional format and locale values, but the default format value is "%F" and the default locale value is "en-US":

  1. YUI().use("datatype-date", function(Y) {
  2.     var output = Y.DataType.Date.format(new Date()});
  3.     alert(output);
  4. });
YUI().use("datatype-date", function(Y) {
    var output = Y.DataType.Date.format(new Date()});
    alert(output);
});

The format configuration property accepts strftime tokens:

  1. YUI().use("datatype-date", function(Y) {
  2.     var output = Y.DataType.Date.format(new Date(), {format:"%F"});
  3.     alert(output);
  4.  
  5.     output = Y.DataType.Date.format(new Date(), {format:"%r"});
  6.     alert(output);
  7.  
  8.     output = Y.DataType.Date.format(new Date(), {format:"%Y-%m-%d %T 
  9.  %B, %A"});
  10.     alert(output);
  11. });
YUI().use("datatype-date", function(Y) {
    var output = Y.DataType.Date.format(new Date(), {format:"%F"});
    alert(output);
 
    output = Y.DataType.Date.format(new Date(), {format:"%r"});
    alert(output);
 
    output = Y.DataType.Date.format(new Date(), {format:"%Y-%m-%d %T 
 %B, %A"});
    alert(output);
});

The following locales are built-in and available by default: "en", "en-AU", "en-GB", and "en-US".

  1. YUI().use("datatype-date", function(Y) {
  2.     var output = Y.DataType.Date.format(new Date(), {format:"%r"});
  3.     alert(output);
  4.  
  5.     output = Y.DataType.Date.format(new Date(), {format:"%r", locale:"en-GB"});
  6.     alert(output);
  7. });
YUI().use("datatype-date", function(Y) {
    var output = Y.DataType.Date.format(new Date(), {format:"%r"});
    alert(output);
 
    output = Y.DataType.Date.format(new Date(), {format:"%r", locale:"en-GB"});
    alert(output);
});

Additional locales may be added for your implementation:

  1. YUI().use("datatype-date", function(Y) {
  2.     Y.DataType.Date.Locale['fr'] = Y.merge(Y.DataType.Date.Locale, {
  3.     	a: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
  4.     	A: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
  5.     	b: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun', 'Jui', 'Aoû', 'Sep', 'Cct', 'Nov', 'Déc'],
  6.     	B: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
  7.     	c: '%a %d %b %Y %T %Z',
  8.     	p: ['', ''],
  9.     	P: ['', ''],
  10.     	x: '%d.%m.%Y',
  11.     	X: '%T'
  12.     });
  13.  
  14.     var output = Y.DataType.Date.format(new Date(), {format:"%c", locale:"fr"});
  15.     alert(output);
  16. });
YUI().use("datatype-date", function(Y) {
    Y.DataType.Date.Locale['fr'] = Y.merge(Y.DataType.Date.Locale, {
    	a: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
    	A: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
    	b: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun', 'Jui', 'Aoû', 'Sep', 'Cct', 'Nov', 'Déc'],
    	B: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
    	c: '%a %d %b %Y %T %Z',
    	p: ['', ''],
    	P: ['', ''],
    	x: '%d.%m.%Y',
    	X: '%T'
    });
 
    var output = Y.DataType.Date.format(new Date(), {format:"%c", locale:"fr"});
    alert(output);
});

The default format and locale may by defined globally via the Y.config configuration object:

  1. YUI().use("datatype-date", function(Y) {
  2.     Y.config.dateFormat = "%c";
  3.     Y.config.locale = "en-GB";
  4.  
  5.     // Defaults to global format "%c" and locale "en-GB"
  6.     var output = Y.DataType.Date.format(new Date());
  7.     alert(output);
  8. });
YUI().use("datatype-date", function(Y) {
    Y.config.dateFormat = "%c";
    Y.config.locale = "en-GB";
 
    // Defaults to global format "%c" and locale "en-GB"
    var output = Y.DataType.Date.format(new Date());
    alert(output);
});

More DataType Utility Resources:

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings