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 相关文章推荐
QUnit jQuery的TDD框架
Nov 04 Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 Javascript
ExpressJS入门实例
Jan 14 Javascript
浅谈Javascript实现继承的方法
Jul 06 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
node文件批量重命名的方法示例
Oct 23 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
简单了解Vue computed属性及watch区别
Jul 10 Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 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
中东人咖啡哲学
2021/03/03 咖啡文化
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
JS 实现分页打印功能
2018/05/16 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
python操作 hbase 数据的方法
2016/12/18 Python
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
python文件路径操作方法总结
2020/12/21 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
表达自我的市场:Society6
2018/08/01 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
中学生演讲稿
2014/04/26 职场文书
学校四群教育实施方案
2014/06/12 职场文书
人事局接收函
2015/01/31 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
开学第一周值周总结
2015/07/16 职场文书
门卫管理制度范本
2015/08/05 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书