javascript 封装Date日期类实例详解


Posted in Javascript onMay 28, 2017

javascript-封装Date日期类

(一)对日期进行格式化

自定义Date日期类的format()格式化方法

方式一:(非原创)

// 对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") ==> 2016-09-19 16:32:53.731
// (new Date()).Format("yyyy-M-d H:m:s:S")   ==> 2016-9-19 16:40:9:955 
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;
};

测试:

window.onload=function() {
  var date = new Date();
  var b = date.toLocaleDateString();//获取的格式为:2016年9月19日
  var d = date.toLocaleTimeString();//下午4:42:46
  var e = date.toLocaleString();//2016年9月19日 下午4:44:02
  var f = date.toDateString();//Mon Sep 19 2016
  var g = date.toUTCString();//Mon, 19 Sep 2016 08:45:42 GMT
  var h = date.toString();//Mon Sep 19 2016 16:46:23 GMT+0800 (中国标准时间)
  //自定义日期格式
  var c = date.Format("yyyy-MM-dd HH:mm:ss");//format()方法是自定义的
  document.getElementById("aa").value = c;
};

(二)根据日期返回本周周一和周日的日期

/**
 * 根据日期返回本周周一和周日的日期
 * @param day
 *   参数日期
 * @param num
 *   第几周
 * @return oneWeek
 *   周一,周日所在日期  
 */
function getWeekDate(day,num) {
  
  num = num || 0;
  // 返回值:周一和周日所在的日期
  var oneWeek = {};
  // 初始日期
  var initDate = "";
  // 截取年月日
  initDate = day.split(' ')[0];
  // ie兼容性问题,将yyyy-MM-dd转换成yyyy/MM/dd
  initDate = initDate.replace(/-/g,"/");
  // 将string转换成Date
  initDate = new Date(Date.parse(initDate));//格式只能是yyyy/MM/dd
  
  // 返回 day距离1970 年 1 月 1 日0时0分的毫秒数
  var nowTime = initDate.getTime(); 
  // 返回星期的某一天的数字: 0(周日) 到 6(周六)
  var weekNum = initDate.getDay();
  // 一天所代表的毫秒数
  var oneDayTime = 24 * 60 * 60 * 1000; 
  
  //显示周一
  var MondayTime = nowTime - (weekNum - 1) * oneDayTime ; 
  //显示周日
  var SundayTime = nowTime + (7 - weekNum) * oneDayTime ; 
  if (0 != num) {
    MondayTime += 7 * num * oneDayTime;
    SundayTime += 7 * num * oneDayTime;
  }
  
  //初始化日期时间
  var monday = new Date(MondayTime);
  var sunday = new Date(SundayTime);
  // formatDate是自定义的格式化方法
  monday = monday.formatDate('yyyy-MM-dd');
  sunday = sunday.formatDate('yyyy-MM-dd');
  
  oneWeek.Monday = monday;
  oneWeek.Sunday = sunday;
  
  return oneWeek;
}

 测试:

var week = getWeekDate('2017-05-27',0);    
console.log(week.Monday + "," + week.Sunday);

 注意:

 Date.parse()具有兼容性问题,低版本IE浏览器不支持"yyyy-MM-dd"转换成Date,只支持"yyyy/MM/dd"转换成日期。

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript中注册和移除事件的4种方式
Mar 20 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
JS获取一个未知DIV高度的方法
Aug 09 Javascript
微信小程序 Page()函数详解
Oct 17 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
Ajax实现三级联动效果
Oct 05 Javascript
Vue实现选择城市功能
May 27 #Javascript
使用 Node.js 对文本内容分词和关键词抽取
May 27 #Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 #Javascript
javascript回调函数的概念理解与用法分析
May 27 #Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 #Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 #Javascript
详细讲解vue2+vuex+axios
May 27 #Javascript
You might like
解析左右值无限分类的实现算法
2013/06/20 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
重定向实现代码
2006/11/20 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
详解angular element()方法使用
2017/04/08 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
python使用循环实现批量创建文件夹示例
2014/03/25 Python
Python数组条件过滤filter函数使用示例
2014/07/22 Python
python daemon守护进程实现
2016/08/27 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
使用python3实现操作串口详解
2019/01/01 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
电气专业应届生求职信
2013/11/01 职场文书
报关报检委托书
2014/04/08 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android