Yahoo!用户界面博客（YUIBlog）

日期格式使用YUI -第二部分

在第I部分中，我们看到了如何使用YUI的日期格式化格式日期。 在第二部分中，我们将着眼于某一特定用途的情况下-内DataTable的控制格式化日期。

数据表是一个伟大的工具提交所有类型的数据，您的网站的用户，包括日期。 正如我们已经看到在第I部，日期格式，可以很容易的格式化字符串转换成日期对象。 对于这个例子，我们将采取DataTable的基本的例子，并给它添加一个自定义的日期格式。 我们将开始与包括我们需要：

 <！ - 个人YUI的CSS文件 - > 
 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/datatable/assets/skins/sam/datatable.css"> 

 <！ - 个人YUI的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> 

下一步，我们将添加标记输入一个用户定义的格式，并触发一个DataTable重绘：

 <label>的格式：<input type="text" id="date-format" value="%b %d %Y" size="30"> </标签> <INPUT TYPE =“按钮”ID =“渲染表“值=”重绘“>

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

这里的关键是定义一个自定义的日期格式：

 YAHOO.namespace（“YAHOO.example.DateFormatter”）;
 YAHOO.example.DateFormatter.formatDate =功能（elCell，oRecord，oColumn的OData）{
	 EL =（“日期格式”）;
	 VAR sFormat = el.value;

	 STR = YAHOO.util.Date.format（OData的，{格式：sFormat}）;
	 elCell.innerHTML = STR;
 }

最后，这里是JavaScript创建的DataTable。 请注意，我们点我们自己的“日期”列格式化：

 YAHOO.example.Data = {
     bookorders：
         {编号：PO - 0167“，日期：新的日期（1980年，2，24），数量：1，数量：4}，
         {编号：PO - 0783“，日期：新的日期（”1983年1月3日，“），数量：NULL，金额：12.12345}，
         {编号：PO - 0297“，日期：（1978，11，12）新的日期，数量：12，金额：1.25}，
         {编号：PO - 1482“，日期：新的日期（”1985年3月11日，“），数量：6，金额：3.5}
     ]
 };

 VAR myColumnDefs = [
	 {键：“ID，排序：真正的}，
	 {键：“日期”，格式化：YAHOO.example.DateFormatter.formatDate
			排序：真实，sortOptions：{DEFAULTDIR：YAHOO.widget.DataTable.CLASS_DESC}，
	 {键：“量”，格式化：YAHOO.widget.DataTable.formatNumber，排序：真正的}，
	 {键：“量”，格式化：YAHOO.widget.DataTable.formatCurrency，排序：真}
 ;

 VAR myDataSource =新YAHOO.util.DataSource（YAHOO.example.Data.bookorders）;
 myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
 myDataSource.responseSchema = {
	领域：[“ID”，“日期”，“量”，“量”]
 };

 myDataTable =新YAHOO.widget.DataTable（“基本”，myColumnDefs，myDataSource）;

对于我们的例子中，我们将还包括一个事件处理程序表“重绘”按钮被点击时重绘：

 YAHOO.util.Event.addListener“（”渲染表“，”点击“，myDataTable.render，myDataTable，TRUE）;

全部放在一起，我们得到了customizeable日期格式化的 DataTable 。

在这个例子中，我们的数据源，拥有实际的Date对象。 这不是绝对必要的。 应用程序支持国际化，日期/时间信息应该存储在UTC传输。 举例来说，如果你的数据驻留在您的服务器DATETIME领域，在一个MySQL数据库，然后把它转换为Unix时间戳的最佳途径是UNIX_TIMESTAMP()函数：

 SELECT ID，日期，数量，金额从bookorders（的pubdate）UNIX_TIMESTAMP;

其他数据库引擎有他们自己的方法提取Unix时间戳。

然后可以使用JSON编码的服务器端JSON库，在您选择的语言传递回浏览器之前，结果集。 在PHP中，我们会做这样的事情：

 bookorders =阵列（）;
而（$行= mysql_fetch_assoc（$结果））
 {
	美元bookorders [] = $行;
 }
头（“内容类型：应用程序/ json”）;
回声json_encode（$ bookorders）;

在客户端，我们会使用一个XHRDataSource收到此数据：

 VAR myDataSource =新YAHOO.util XHRDataSource（“http://hostname/your/script.php”）;
 myDataSource.responseType = YAHOO.util.DataSource TYPE_JSON;
 / /数据源文件的全部细节

由于您的数据为JSON来自服务器，你可能会更好过Unix时间戳传递的日期内使用格式化的Date构造：

 YAHOO.example.Data = {
     “bookorders”：[
         {编号：PO - 0167“，日期：320227200，数量：1，数量：4}，
         {编号：PO - 0783“，日期：410428800，数量：空，金额：12.12345}
         {ID：“PO - 0297”，日期：279705600，数量：12个，金额1.25}，
         {编号：PO - 1482“，日期：479376000，数量：6，金额：3.5}
     ]
 };

 YAHOO.example.DateFormatter.formatDate =功能（elCell，oRecord，oColumn的OData）{
	 EL =（“日期格式”）;
	 VAR sFormat = el.value;

	 VAR大馆（OData的* 1000）=新的日期

	 STR = YAHOO.util.Date.format（大馆，{格式：sFormat}）;
	 elCell.innerHTML = STR;
 }

请注意，我们乘以1000的Unix时间戳，因为我们收到的Unix时间戳在几秒钟内，而Date构造需要几毫秒的时间。

这就是现在。 在第三部分，我们来看看图表控制在格式化日期。

谈话： bloglines | technorati

分享和扩展： 书签del.icio.us | Digg它！ | 书签交易！