Yahoo! Interfaz de usuario de blog (YUIBlog)

Fecha de formato con YUI - Parte II

En la Parte I , hemos visto cómo dar formato a una fecha con la fecha de formateador YUI. En la segunda parte, veremos el formato de fechas para un caso de uso específico - el interior de la DataTable de control.

Tablas de datos son una gran herramienta para la presentación de todos los tipos de datos que los usuarios de su sitio web, incluidas las fechas. Como hemos visto en la primera parte, el formateador de la fecha hace que sea fácil de transformar un objeto Date en una cadena con formato. Para este ejemplo, vamos a tomar DataTable Ejemplo básico y añadir un formateador personalizado de fecha a la misma. Empezaremos con la que necesitamos incluye:

 <-! Individuales YUI archivos CSS -> 
 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/datatable/assets/skins/sam/datatable.css"> 

 <-! Individuales YUI archivos JS -> 
 <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"> </ script> 
 <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datasource/datasource-min.js"> </ script> 
 <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"> </ script> 
 <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datatable/datatable-min.js"> </ script> 

A continuación, vamos a añadir marcas a la entrada de un formato definido por el usuario y para activar un objeto DataTable dibujar:

 <label> Formato: <input type="text" value="%b id="date-format" %d %Y" size="30"> </ label> <input type = "button" id = "render la mesa "value =" Dibujar ">

 <div id="basic"> </ div>

La clave aquí es definir un formateador personalizado de fecha:

 YAHOO.namespace ("YAHOO.example.DateFormatter");
 YAHOO.example.DateFormatter.formatDate = function (elCell, oRecord, oColumn, oData) {
	 El var = document.getElementById ("fecha de formato");
	 sFormat var = el.value;

	 var str = YAHOO.util.Date.format (oData, {formato: sFormat});
	 str elCell.innerHTML =;
 }

Y finalmente, aquí está el código JavaScript para crear el DataTable. Tenga en cuenta que el punto que el formateador de la "fecha" la columna a la nuestra:

 YAHOO.example.Data = {
     bookorders: [
         {Id: "PO-0167", fecha: new Date (1980, 2, 24), la cantidad: 1, cantidad: 4},
         {Id: "PO-0783", fecha: new Date ("03 de enero 1983"), la cantidad: nula, la cantidad: 12.12345},
         {Id: "PO-0297", fecha: new Date (1978, 11, 12), cantidad: 12, cantidad: 1,25},
         {Id: "PO-1482", fecha: new Date ("11 de marzo de 1985"), cantidad: 6 cantidad: 3.5}
     ]
 };

 myColumnDefs var = [
	 {Clave: "Identificación", puede ordenar: true},
	 {Clave: "la fecha", formateador: YAHOO.example.DateFormatter.formatDate,
			 sortOptions verdad,:: {ordenar DefaultDir: YAHOO.widget.DataTable.CLASS_DESC}},
	 {Clave: "cantidad", formateador: YAHOO.widget.DataTable.formatNumber, puede ordenar: true},
	 {Clave: "cantidad", formateador: YAHOO.widget.DataTable.formatCurrency, puede ordenar: true}
 ];

 var = new myDataSource YAHOO.util.DataSource (YAHOO.example.Data.bookorders);
 myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
 myDataSource.responseSchema = {
	 campos: ["id", "fecha", "cantidad", "cantidad"]
 };

 MyDataTable var = new YAHOO.widget.DataTable ("básico", myColumnDefs, myDataSource);

Para nuestro ejemplo, también va a incluir un controlador de eventos para volver a dibujar la tabla cuando el "Redibujar" se hace clic en el botón:

 YAHOO.util.Event.addListener ("hacer que la mesa", "clic", myDataTable.render, cierto MyDataTable);

Poniendo todo junto, tenemos una DataTable con el formateo de fecha customizeable .

En este ejemplo, nuestro origen de datos contiene objetos reales de la fecha. Esto no es estrictamente necesario. Para obtener una solicitud para apoyar la internacionalización, la fecha / hora deben ser almacenadas y transmitidas en UTC. Por ejemplo, si los datos se encuentra en su servidor como DATETIME campo en una base de datos MySQL, y luego la mejor manera de convertirlo en una marca de tiempo Unix es utilizar el UNIX_TIMESTAMP() función:

 SELECT id, UNIX_TIMESTAMP (pubdate) como la fecha, cantidad, cantidad bookorders DE;

Otros motores de bases de datos tienen su propio método de extracción de una marca de tiempo Unix.

El conjunto de resultados puede ser JSON codificados usando una biblioteca JSON del lado del servidor en el idioma de su elección, antes de que se devuelve al navegador. En PHP, que haría algo como esto:

 $ Bookorders = array ();
 while ($ row = mysql_fetch_assoc ($ resultados))
 {
	 $ Bookorders [] = $ fila;
 }
 header ("Content-type: application / json");
 eco json_encode ($ bookorders);

En el lado del cliente, nos gustaría recibir esta información mediante un XHRDataSource :

 var = new myDataSource YAHOO.util). XHRDataSource ("http://hostname/your/script.php";
 myDataSource.responseType = YAHOO.util.DataSource TYPE_JSON.;
 / / Vea la documentación de origen de datos para obtener más

Dado que los datos viene como JSON desde el servidor, usted es probablemente mejor fuera de las fechas en que pasa como marcas de tiempo Unix y con el constructor Fecha dentro de su formateador:

 YAHOO.example.Data = {
     "Bookorders ': [
         {Id: "PO-0167", fecha: 320 227 200, cantidad: 1, cantidad: 4},
         {Id: "PO-0783", fecha: 410 428 800, cantidad: nula, la cantidad: 12.12345},
         {Id: "PO-0297", fecha: 279 705 600, cantidad: 12, cantidad: 1,25},
         {Id: "PO-1482", fecha: 479 376 000, cantidad: 6 cantidad: 3.5}
     ]
 };

 YAHOO.example.DateFormatter.formatDate = function (elCell, oRecord, oColumn, oData) {
	 El var = document.getElementById ("fecha de formato");
	 sFormat var = el.value;

	 Odate var = new Date (* oData 1000);

	 var str = YAHOO.util.Date.format (Odate, {formato: sFormat});
	 str elCell.innerHTML =;
 }

Tenga en cuenta que se multiplica la marca de tiempo Unix en 1000 debido a las marcas de tiempo Unix que se recibieron en cuestión de segundos, mientras que el constructor Fecha requiere milisegundos.

Eso es todo por ahora. En la Parte III, vamos a ver en formato de fechas en el control de Gráficas .

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar con del.icio.us | Digg él! | reddit!