收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > extjs > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

Ext JS框架中日期函數的用法及日期選擇控件的實現

Ext.Date是一個單例,封裝了一系列日期操作函數,擴展JavaScript Date的功能,下面列出一些常用的功能。
基本函數:

Ext.Date.add(date, interval, value) 給date增加或減少時間,這個函數不改變原有Date對象的值,而是返回一個新的Date對象。 Ext.Date.between(date, start, end) 判斷date是否在start和end之間。 Ext.Date.clearTime(date, clone) 把date的時間設置成00小時00分00秒000毫秒。 Ext.Date.clone(date) 克隆date的一個副本。 Ext.Date.format(date, format)把日期格式化,返回格式化后的字符串。 Ext.Date.getDayOfYear(date)獲取date是年中的第幾天。 Ext.Date.getDaysInMonth(date)獲取date是月中的第幾天。 Ext.Date.getFirstDateOfMonth(date)獲取date所在月份的第一天。 Ext.Date.getFirstDayOfMonth(date)獲取date所在月份第一天的星期。 Ext.Date.getLastDateOfMonth(date)獲取date所在月份的最后一天。 Ext.Date.getLastDayOfMonth(date)獲取date所在月份最后一天的星期。 Ext.Date.getWeekOfYear(date) 獲取date所在年中的第幾個星期。 Ext.Date.isLeapYear(date)date所在年份是否閏年。 Ext.Date.now() 返回當前時間到1970年1月1日的毫秒數。在chrome、ie9和ie10中已經有Date.now()實現相同的功能。 Ext.Date.parse(input, format, strict)根據輸入的字符串創建日期,Date.parse()有類似的功能。

下面零碎地舉幾個例子綜合來看一下:

// Ext.Date.add(date, interval, value) 給date增加或減少時間,這個函數不改變原有Date對象的值,而是返回一個新的Date對象。 
// @param  {Date}  date   原日期對象。 
// @param  {String} interval value的單位,可以選Ext.Date.DAY、Ext.Date.HOUR、Ext.Date.MINUTE、Ext.Date.MONTH、 
//               Ext.Date.SECOND、Ext.Date.YEAR、Ext.Date.MILLI。 
// @param  {number} value   日期對象需要增加的值。 
// @return {Date}       返回增加值后的Date對象。 
// Example 
var date = Ext.Date.add(new Date('10/29/2006'), Ext.Date.DAY, 5); //增加5天 
console.log(date); //返回結果 Fri Nov 03 2006 00:00:00 GMT+0800 (中國標準時間) 
 
var date = Ext.Date.add(new Date('10/29/2006'), Ext.Date.DAY, -5); //減少5天,如果值是負數,則減少。 
console.log(date); //返回結果 Tue Oct 24 2006 00:00:00 GMT+0800 (中國標準時間) 
 
var date = Ext.Date.add(new Date('10/29/2006'), Ext.Date.YEAR, 2); //增加2年 
console.log(date); //返回結果 Wed Oct 29 2008 00:00:00 GMT+0800 (中國標準時間) 
 
 
// Ext.Date.between(date, start, end) 判斷date是否在start和end之間。 
// @param  {Date}   date  要判斷的日期。 
// @param  {Date}   start  
// @param  {Date}   end 
// @return {Boolean}     如果date在start和end之間返回true,否則返回false。 
// Example 
var date = new Date('10/29/2006'); 
var start = new Date('10/5/2006'); 
var end = new Date('11/15/2006'); 
Ext.Date.between(date, start, end); //返回true 
 
 
// Ext.Date.clearTime(date, clone) 把date的時間設置成00小時00分00秒000毫秒。 
// @param  {Date}   date  
// @param  {Bollean} clone 可選參數。如果為true則返回date的一個副本,如果為false則返回date本身,默認為false。 
// @return {Date}      返回設置后的日期。 
// Example 
var date = new Date('10/30/2012 14:30:00'); 
Ext.Date.clearTime(date); //返回 Tue Oct 30 2012 00:00:00 GMT+0800 (中國標準時間) 
 
 
// Ext.Date.clone(date) 克隆date的一個副本。 
// @param  {Date} date 
// @return {Date} 返回克隆后的Date。 
// Example 
var orig = new Date('10/30/2012'); 
var copy = Ext.Date.clone(orig); //克隆一個值 
 
 
// Ext.Date.format(date, format) 把日期格式化,返回格式化后的字符串。 
// @param  {Date}  date  日期。 
// @param  {String} format 日期格式,Y-年,m-月,d-日,H-24小時,i-分鐘,s-秒 
// @return {String}     返回格式化后的字符串。 
// Example 
var date = new Date('10/20/2012 14:30:00'); 
Ext.Date.format(date, 'Y-m-d H:i:s');    // 2012-10-20 14:30:00 
Ext.Date.format(date, 'Y年m月d日 H:i:s');  // 2012年10月20日 14:30:00 
 
 
// Ext.Date.getDayOfYear(date) 獲取date是年中的第幾天 
// @param  {Date}  date 日期。 
// @return {Number}    返回天數,取值范圍0~364,如果是閏年則有365。 
// Example 
var date = new Date('10/20/2012 14:30:00'); 
Ext.Date.getDayOfYear(date); //返回 293 
 
 
// Ext.Date.getDaysInMonth(date) 獲取date是月中的第幾天 
// @param  {Date}  date 日期。 
// @return {Number}    返回天數。 
// Example 
var date = new Date('10/20/2012 14:30:00'); 
Ext.Date.getDayOfYear(date); //返回 31 
 
 
// Ext.Date.getFirstDateOfMonth(date) 獲取date所在月份的第一天 
// @param  {Date} date 日期。 
// @return {Date}    返回所在月份的第一天。 
// Example 
var date = new Date('10/20/2012 14:30:00'); 
Ext.Date.getFirstDateOfMonth(date); //返回 Mon Oct 01 2012 00:00:00 GMT+0800 (中國標準時間) 
 
 
// Ext.Date.getFirstDayOfMonth(date) 獲取date所在月份第一天的星期 
// @param  {Date}  date 日期。 
// @return {Number}    返回所在月份第一天的星期,取值范圍0~6。 
// Example 
var date = new Date('10/20/2012 14:30:00'); 
Ext.Date.getFirstDayOfMonth(date); //返回 1,表示星期一 
 
 
// Ext.Date.getLastDateOfMonth(date) 獲取date所在月份的最后一天 
// @param  {Date} date 日期。 
// @return {Date}    返回所在月份的最后一天。 
// Example 
var date = new Date('10/20/2012 14:30:00'); 
Ext.Date.getLastDateOfMonth(date); //返回 Wed Oct 31 2012 00:00:00 GMT+0800 (中國標準時間) 
 
 
// Ext.Date.getLastDayOfMonth(date) 獲取date所在月份最后一天的星期 
// @param  {Date}  date 日期。 
// @return {Number}    返回所在月份最后一天的星期,取值范圍0~6。 
// Example 
var date = new Date('10/20/2012 14:30:00'); 
Ext.Date.getLastDayOfMonth(date); //返回 3,表示星期三 
 
 
// Ext.Date.getWeekOfYear(date) 獲取date所在年中的第幾個星期 
// @param  {Date}  date 日期。 
// @return {Number}    返回所在年中的第幾個星期,取值范圍1~53。 
// Example 
var date = new Date('10/20/2012 14:30:00'); 
Ext.Date.getWeekOfYear(date); //返回 42 
 
 
// Ext.Date.isLeapYear(date) date所在年份是否閏年 
// @param  {Date}   date 日期。 
// @return {Boolean}    true表示閏年,false表示平年。 
// Example 
var date = new Date('10/20/2012 14:30:00'); 
Ext.Date.isLeapYear(date); //返回 true 
 
 
// Ext.Date.now()   返回當前時間到1970年1月1日的毫秒數。 
//          在chrome、ie9和ie10中已經有Date.now()實現相同的功能。 
// @return {Number} 返回毫秒數。 
// Example 
var timestamp = Ext.Date.now(); //1351666679575 
var date = new Date(timestamp); //Wed Oct 31 2012 14:57:59 GMT+0800 (中國標準時間) 
 
 
// Ext.Date.parse(input, format, strict) 根據輸入的字符串創建日期,Date.parse()有類似的功能。 
// @param {String}  input  日期字符串。 
// @param {String}  format 日期格式。 
// @param {Boolean} strict 驗證input字符串的有效性,默認是false。 
// @param {Date}       返回創建的日期。 
// Example 
var input = '2012年10月31日 14:30:00'; 
var format = 'Y年m月d日 H:i:s'; 
var date = Ext.Date.parse(input, format, true); //Wed Oct 31 2012 14:30:00 GMT+0800 (中國標準時間)

實例:實現帶week(星期)的日期選擇控件
1.問題:

是否使用了Ext JS 就可以完美的解決 星期的問題呢?

在本系列的第一篇就有說到, Ext 的datepicker 并不能看到星期, 需要自己去擴展。

但是, 擴展的時候就有一個問題了:

Javascript 語言的Date對象每周是從星期天開始。

而Ext JS的getWeekOfYear這個方法卻又是遵循 ISO-8601, 每周是從星期一開始的。(其他的方法又有不是遵循此標準的, Ext JS混合了不同的日期時間表示標準)。

Ext.Date.getWeekOfYear 這個方法的返回值是 1- 53 之間的數。

這樣的話, 就會出現一些問題:

Ext js 的日期顯示控件的顯示是從星期天開始: (S M T W T F S (星期天 星期一 星期二 .. 星期六))

但是, 通過選中的時間獲取星期時卻又是從星期天開始。導致:

每個星期天的星期會小1 (比如2013/08/18 , 星期天, 應該是34周,但是通過這個方法卻是算成上一周的結尾 , 33 周)
date = new Date("2013/08/18");
var week = Ext.Date.getWeekOfYear(date);
alert("week="+week);
Ext Js 日期控件默認顯示了 42天, 這樣的話,在兩個年交互的地方就會出現問題
是當年顯示 53 周呢? 還是下一年的第一周。

2.解決方案:

結合js 的Date 對象和 Ext js的Ext.Date, 實現獲取星期字串。

每周以星期天為第一天

每年的周數從(1-52), 如果超過52 周,算到下一年的第一周。 比如2013/12/29 為 2013年的53周, 算到 2014年的第一周

返回 “W1334” 這樣的周的格式

/*
 * return as W1334()2013/08/20
 * 1. if sunday==> week = week+1
 * getWeekOfYear(Ext use ISO-8601,week begin monday)
 * js Date(week begin sunday)
 * 2. if week > 52==> year = year +1; week = week - 52;
 * 3. if month ==11(12 month) and week <2 ==> year = year +1;
 */
function getWeekStrOfDate(date)
{
  var weekStr = null;
  if(date!=null)
  {
    weekStr = "W";
    var dateYear = date.getFullYear();
    var dateWeek = Ext.Date.getWeekOfYear(date);
    var firstDayOfMonth = Ext.Date.getFirstDayOfMonth(date);
    var day = date.getDate();
    var month = date.getMonth();
    //weekday 0-6
    var weekday = date.getDay();
    if(weekday===0)
    {
      dateWeek++;
    }

    // week>52 ==> year +1     
    if(month==11)
    {
      if(dateWeek>52)
      {    
        dateYear += 1;
        dateWeek -= 52;
      }else if(dateWeek<2){
        dateYear += 1;
      }
    }    
    var yearStr = dateYear.toString();
    yearStr = yearStr.substring(2,4);
    var dateWeekStr = dateWeek.toString();
    if(dateWeekStr.length<2)
    {
      dateWeekStr = "0" + dateWeekStr;
    }    
    weekStr += yearStr;
    weekStr += dateWeekStr;   
  }
  return weekStr;
}

Ext JS框架程序中阻止鍵盤觸發回退或者刷新頁面的代碼分享
在Extjs開發中,我們需要屏蔽一些鍵盤按鍵,來避免用戶在使用鍵盤操作的過程中不小心按到這些快捷鍵造成輸入信息丟失等問題.Ext.onReady(function(){Ext.Window

ExtJS 4.2 Grid組件單元格合并的方法
ExtJS4.2Grid組件本身并沒有提供單元格合并功能,需要自己實現這個功能。目錄1.原理2.多列合并3.代碼與在線演示1.原理1.1HTML代碼分析首先創建一個Grid組

Extjs讓combobox寫起來簡潔又漂亮
也已經寫了很久時間的extjs,每次都用到很多的combobox,配置很多東西覺得實在是太麻煩,所以根據常用到的情況寫了一個簡便的combobox,再次記錄下來

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
捕鱼大师辅助软件 北京28根据什么开奖的 中国铝业股票行情 658配资 辽宁11选五一定牛 预测 河南快3最大遗漏号 浙江11选5前三直订牛 特区南国彩票论坛七星彩论坛 黑龙江体彩6十1开奖查询 27快乐10分走势图 东方6十1基本走势图 快乐十分20分走势图 广西快乐十分最新开奖App 同花顺手机炒股软件怎 黑龙江十一选五开奖走势图一定牛 湖南幸运赛车开奖视频直播 快乐双彩开奖公告