js格式化时间的方法


Posted in Javascript onDecember 18, 2015

本文为大家分享了javascript时间格式化的方法,分享给大家供大家参考,具体内容如下
可以说是Web项目中不可或缺的一个Javascript类库,它可以帮助你快速的解决客户端编程的许多问题,下面贴出一个用js格式化时间的方法。

Date.prototype.format =function(format)
{
var o = {
"M+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth()+3)/3), //quarter
"S" : this.getMilliseconds() //millisecond
}
if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
(this.getFullYear()+"").substr(4- RegExp.$1.length));
for(var k in o)if(new RegExp("("+ k +")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length==1? o[k] :
("00"+ o[k]).substr((""+ o[k]).length));
return format;
}

以上代码必须先声明,然后在使用。使用方法:

var d =new Date().format('yyyy-MM-dd');

另一种方法:

在Javascript之中,日期对象是Date,那么如何将一个日期对象按照定制的格式进行输出呢?
  可以现告诉你,Date对象有有四个内置方法,用于输出为字符串格式,分别为: 

  •   1)toGMTString,将一个日期按照GMT格式显示
  •   2)toLocaleString,将一个日期按照本地操作系统格式显示
  •   3)toLocaleDateString,按照本地格式显示一个日期对象的日期部分
  •   4)toLocaleTimeString,按照本地格式显示一个日期对象的时间部分 

  尽管Javascript的Date对象中内置提供了这些输出为字符串的方法,但是这些字符串不是我们来控制格式的,因此如果我们需要我们自己定制的特殊格式,那么又该怎么办呢?
  不用着急,JsJava中提供了专用的类,专门对日期进行指定格式的字符串输出,你可以下载JsJava-2.0.zip,引入其中的src/jsjava/text/DateFormat.js,或者直接引入jslib/jsjava-2.0.js,样例代码如下:

var df=new SimpleDateFormat();//jsJava1.0需要使用DateFormat对象,不要弄错就是了 
df.applyPattern("yyyy-MM-dd HH:mm:ss"); 
var date=new Date(2015,12,18,10,59,51); 
var str=df.format(date); 
document.write(str);//显示结果为:2015-12-18 10:59:51

通过上面的例子你可以看出,你需要做的就是指定pattern,那么pattern中yyyy、MM等都表示什么意思呢?如果你学习过Java的日期格式化,那么你应该知道,那都是占位符,这些占位符都具有特殊的函数,例如y表示年,yyyy表示四个数字的年份,例如1982,下面列举一些pattern中支持的特殊字符及其含义(下面表格引自Java的官方文档,做了适当修改):

G Era designator [url=]Text[/url] AD 
y Year [url=]Year[/url] 1996; 96 
M Month in year [url=]Month[/url] July; Jul; 07 
w Week in year [url=]Number[/url] 27 
W Week in month [url=]Number[/url] 2 
D Day in year [url=]Number[/url] 189 
d Day in month [url=]Number[/url] 10 
F Day of week in month [url=]Number[/url] 2 
E Day in week [url=]Text[/url] Tuesday; Tue 
a Am/pm marker [url=]Text[/url] PM 
H Hour in day (0-23) [url=]Number[/url] 0 
k Hour in day (1-24) [url=]Number[/url] 24 
K Hour in am/pm (0-11) [url=]Number[/url] 0 
h Hour in am/pm (1-12) [url=]Number[/url] 12 
m Minute in hour [url=]Number[/url] 30 
s Second in minute [url=]Number[/url] 55 
S Millisecond [url=]Number[/url] 978

还有三种方法也分享给大家:

第一种方法:

// 对Date的扩展,将 Date 转化为指定格式的String  
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,  
// 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)  
// 例子:  
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423  
// (new Date()).Format("yyyy-M-d h:m:s.S")   ==> 2006-7-2 8:9:4.18  
Date.prototype.Format = function(fmt)  
{ //author: meizz  
 var o = {  
  "M+" : this.getMonth()+1,         //月份  
  "d+" : this.getDate(),          //日  
  "h+" : this.getHours(),          //小时  
  "m+" : this.getMinutes(),         //分  
  "s+" : this.getSeconds(),         //秒  
  "q+" : Math.floor((this.getMonth()+3)/3), //季度  
  "S" : this.getMilliseconds()       //毫秒  
 };  
 if(/(y+)/.test(fmt))  
  fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));  
 for(var k in o)  
  if(new RegExp("("+ k +")").test(fmt))  
 fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));  
 return fmt;  
}

调用方法:

var time1 = new Date().format("yyyy-MM-dd HH:mm:ss");    
var time2 = new Date().format("yyyy-MM-dd");

第二种方法:

<mce:script language="javascript" type="text/javascript"><!--
   
/**   
 * 对Date的扩展,将 Date 转化为指定格式的String   
 * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符   
 * 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)   
 * eg:   
 * (new Date()).pattern("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423   
 * (new Date()).pattern("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04   
 * (new Date()).pattern("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04   
 * (new Date()).pattern("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04   
 * (new Date()).pattern("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18   
 */    
Date.prototype.pattern=function(fmt) {     
  var o = {     
  "M+" : this.getMonth()+1, //月份     
  "d+" : this.getDate(), //日     
  "h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时     
  "H+" : this.getHours(), //小时     
  "m+" : this.getMinutes(), //分     
  "s+" : this.getSeconds(), //秒     
  "q+" : Math.floor((this.getMonth()+3)/3), //季度     
  "S" : this.getMilliseconds() //毫秒     
  };     
  var week = {     
  "0" : "/u65e5",     
  "1" : "/u4e00",     
  "2" : "/u4e8c",     
  "3" : "/u4e09",     
  "4" : "/u56db",     
  "5" : "/u4e94",     
  "6" : "/u516d"    
  };     
  if(/(y+)/.test(fmt)){     
    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));     
  }     
  if(/(E+)/.test(fmt)){     
    fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[this.getDay()+""]);     
  }     
  for(var k in o){     
    if(new RegExp("("+ k +")").test(fmt)){     
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));     
    }     
  }     
  return fmt;     
}    
   
var date = new Date();   
window.alert(date.pattern("yyyy-MM-dd hh:mm:ss"));
// --></mce:script>

 第三种方法:

Date.prototype.format = function(mask) {   
   
  var d = this;   
   
  var zeroize = function (value, length) {   
   
    if (!length) length = 2;   
   
    value = String(value);   
   
    for (var i = 0, zeros = ''; i < (length - value.length); i++) {   
   
      zeros += '0';   
   
    }   
   
    return zeros + value;   
   
  };    
   
  return mask.replace(/"[^"]*"|'[^']*'|/b(?:d{1,4}|m{1,4}|yy(?:yy)?|([hHMstT])/1?|[lLZ])/b/g, function($0) {   
   
    switch($0) {   
   
      case 'd':  return d.getDate();   
   
      case 'dd': return zeroize(d.getDate());   
   
      case 'ddd': return ['Sun','Mon','Tue','Wed','Thr','Fri','Sat'][d.getDay()];   
   
      case 'dddd':  return ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'][d.getDay()];   
   
      case 'M':  return d.getMonth() + 1;   
   
      case 'MM': return zeroize(d.getMonth() + 1);   
   
      case 'MMM': return ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][d.getMonth()];   
   
      case 'MMMM':  return ['January','February','March','April','May','June','July','August','September','October','November','December'][d.getMonth()];   
   
      case 'yy': return String(d.getFullYear()).substr(2);   
   
      case 'yyyy':  return d.getFullYear();   
   
      case 'h':  return d.getHours() % 12 || 12;   
   
      case 'hh': return zeroize(d.getHours() % 12 || 12);   
   
      case 'H':  return d.getHours();   
   
      case 'HH': return zeroize(d.getHours());   
   
      case 'm':  return d.getMinutes();   
   
      case 'mm': return zeroize(d.getMinutes());   
   
      case 's':  return d.getSeconds();   
   
      case 'ss': return zeroize(d.getSeconds());   
   
      case 'l':  return zeroize(d.getMilliseconds(), 3);   
   
      case 'L':  var m = d.getMilliseconds();   
   
          if (m > 99) m = Math.round(m / 10);   
   
          return zeroize(m);   
   
      case 'tt': return d.getHours() < 12 ? 'am' : 'pm';   
   
      case 'TT': return d.getHours() < 12 ? 'AM' : 'PM';   
   
      case 'Z':  return d.toUTCString().match(/[A-Z]+$/);   
   
      // Return quoted strings with the surrounding quotes removed   
   
      default:  return $0.substr(1, $0.length - 2);   
   
    }   
   
  });   
   
};

方法一多了,就不知道如何选择了,不过还是要靠大家仔细学习研究,针对不同问题选择解决方法,希望大家喜欢这篇文章。

Javascript 相关文章推荐
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
JavaScript递归函数定义与用法实例分析
Jan 24 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 #Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 #Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 #Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 #Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 #Javascript
jQuery Validate表单验证深入学习
Dec 18 #Javascript
JavaScript计划任务后台运行的方法
Dec 18 #Javascript
You might like
php中一个有意思的日期逻辑处理
2012/03/25 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
js正确获取元素样式详解
2009/08/07 Javascript
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
python实现清屏的方法
2015/04/30 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
解决方案设计综合面试题
2015/08/31 面试题
计算机专业毕业生求职信分享
2013/12/24 职场文书
《影子》教学反思
2014/02/21 职场文书
IT工程师岗位职责
2014/07/04 职场文书
给校长的建议书范文
2015/09/14 职场文书
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电