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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
vue实现购物车加减
May 30 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 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
PHP4实际应用经验篇(9)
2006/10/09 PHP
php win下Socket方式发邮件类
2009/08/21 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
js评分组件使用详解
2017/06/06 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
跟老齐学Python之数据类型总结
2014/09/24 Python
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
python基于event实现线程间通信控制
2020/01/13 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
学校门卫管理制度
2014/01/30 职场文书
小学三年级数学教学反思
2014/01/31 职场文书
公司欠款证明
2015/06/24 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
大学校园招聘会感想
2015/08/10 职场文书
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript