GVKun编程网logo

js日期插件dateHelp获取本月、三个月、今年的日期(js获取日期差)

28

最近很多小伙伴都在问js日期插件dateHelp获取本月、三个月、今年的日期和js获取日期差这两个问题,那么本篇文章就来给大家详细解答一下,同时本文还将给你拓展el-date-picker日期快捷键(

最近很多小伙伴都在问js日期插件dateHelp获取本月、三个月、今年的日期js获取日期差这两个问题,那么本篇文章就来给大家详细解答一下,同时本文还将给你拓展el-date-picker日期快捷键(今日、本周、本月、上月、本季、本年)、js日期插件dateHelp获取本月、三个月、今年的日期_javascript技巧、JS获取本周、本季度、本月、上月、本年的开始日期、结束日期、JS获取本周、本季度、本月、上月的开始日期、结束日期等相关知识,下面开始了哦!

本文目录一览:

js日期插件dateHelp获取本月、三个月、今年的日期(js获取日期差)

js日期插件dateHelp获取本月、三个月、今年的日期(js获取日期差)

最近看了一些关于面向对象的知识,最近工作中在做统计查询的时候需要用到本月、近三个月、今年的日期范围,所以下面用用面向对象的思想写了一个获取日期的插件,大家可以借鉴使用。

直接通过new DateHelp就可以调用了

rush:js;"> var myDate = new DateHelp({ date:'2015-02-01',//从此日期开始计算 format:'yyyy/MM/dd' });

myDate.getThisMonth();
myDate.getThreeMonth();
myDate.getThisYear();

dateHelp.js插件

rush:js;"> /** * 通过调用可以获取本月,近三个月,今年的日期 * @param obj * @constructor */ function DateHelp(obj) { /*var obj = { date:'2015-02-01',//从此日期开始计算 type:'month',//以年月日向前计算:年(year),月(month),日(day) value:'14',//向前计算的数值,年月日 format:'yyyy/mm/dd'//日期格式 }*/

this.date = obj.date;
this.type = obj.type;
this.value = obj.value == undefined ? obj.value : 0;
this.format = obj.format == undefined ? obj.format: 'yyyy/MM/dd';

//日期和非日期格式获取年月日
if (this.date instanceof Date){
//处理传进来的是日期函数的

this.year = this.date.getFullYear();
this.month = this.date.getMonth()+1;
this.day = this.date.getDate();
}else{
//处理传入的是非日期函数的

this.year = this.date.substr(0,4);
this.month = this.date.substr(5,2);
this.day = this.date.substr(8,2);
}

}

DateHelp.prototype.beforeDate = function(type,value){

var _type = type || this.type,_value = value || this.value,_year = this.year,_month = this.month,_day = this.day;

if (_type == 'year' || _type == '年'){
_year -= _value;
}else if (_type == 'month' || _type == '月'){
_year -= parseInt(_value / 12);
_month -= _value % 12;
if(_month <= 0){
_year -= 1;
_month += 12;
}
}else if (_type == 'day' || _type == '日'){

}else {

}

var date = new Date(_year,_month - 1,_day)
return this.formatDate(date,this.format);
}

DateHelp.prototype.formatDate = function(date,fmt){

var o = {
"M+" : date.getMonth()+1,//月份
"d+" : date.getDate(),//日
"h+" : date.getHours(),//小时
"m+" : date.getMinutes(),//分
"s+" : date.getSeconds(),//秒
"q+" : Math.floor((date.getMonth()+3)/3),//季度
"S" : date.getMilliseconds() //毫秒
};
if(/(y+)/.test(fmt))
fmt=fmt.replace(RegExp.$1,(date.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;
}

DateHelp.prototype.getThisMonth = function() {

var first = new Date(this.year,this.month - 1);
var last = new Date(this.year,this.month,0);

return this.formatDate(first,this.format) + " - " + this.formatDate(last,this.format);
}

DateHelp.prototype.getThreeMonth = function() {

return this.beforeDate('month',3) + " - " + this.beforeDate('day',0);
}

DateHelp.prototype.getThisYear = function() {

var first = new Date(this.year,1);
var last = new Date(this.year,11,31);

return this.formatDate(first,this.format);
}

/*
//示例
var myDate = new DateHelp({
date:'2015-02-01',//从此日期开始计算
format:'yyyy/MM/dd'
});

console.log(myDate.getThisMonth());
console.log(myDate.getThreeMonth());
console.log(myDate.getThisYear());*/

html测试代码

rush:xhtml;"> Meta charset="UTF-8">

希望本文所述对大家学习javascript程序设计有所帮助。

el-date-picker日期快捷键(今日、本周、本月、上月、本季、本年)

el-date-picker日期快捷键(今日、本周、本月、上月、本季、本年)

图示

image.png

image.png

需要使用到快捷键的vue页面

html

  <el-form-item label="建单时间">
    <BaseTime @picked="(val) => timeRange = val" v-model="timeRange" ref="timeRange" />
  </el-form-item>
  <span @click="shortcuts(''today'')">今日</span>
  <span @click="shortcuts(''this-week'')">本周</span>
  <span @click="shortcuts(''this-month'')">本月</span>
  <span @click="shortcuts(''last-month'')">上月</span>

  <el-form-item label="支付时间">
    <BaseTime @picked="(val) => timeRange2 = val" v-model="timeRange2" ref="timeRange2" />
  </el-form-item>
  <span @click="shortcuts(''this-quarter'', ''timeRange2'')">本季</span>
  <span @click="shortcuts(''this-year'', ''timeRange2'')">本年</span>

   <!-- 说明
    1. BaseTime 是对 el-date-picker type="datetimerange" 以及其他相同属性的封装,代码略
    2. timeRange是数组,每个时间区间后端使用2个字段接收。所以前端的命名就比较随意,如果页面有多少个时间区间,命名就是timeRange、timeRange1、timeRange2、timeRange3....
    3. 使用BaseTime,ref是必要的,需要调用组件的 @change 方法
    4. 样式略
   -->

script

/**
 * 快捷键逻辑本来放在@/mixins/standard-list里的为了演示方便放在这里
 * 其他代码省略
**/

export default {
  data() {
    timeRange: [], // 时间区间---建单时间
    timeRange1: [], // 时间区间---支付时间
  },
  watch: {
    timeRange: {
      handler (newV) {
        if (newV instanceof Array) {
          this.searchData.createTimeBegin = newV[0];
          this.searchData.createTimeEnd = newV[1];
        } else {
          this.searchData.createTimeBegin = null;
          this.searchData.createTimeEnd = null;
        }
      }
    },
    timeRange2: {
      handler (newV) {
        if (newV instanceof Array) {
          this.searchData.payTimeBegin = newV[0];
          this.searchData.payTimeEnd = newV[1];
        } else {
          this.searchData.payTimeBegin = null;
          this.searchData.payTimeEnd = null;
        }
      }
    },
  },
  methods: {
    // 日期快捷键(默认绑定timeRange)
    shortcuts(text, ref=''timeRange''){
      const start = new Date();
      const end = new Date();
      start.setHours(0);start.setMinutes(0);start.setSeconds(0);
      end.setHours(23); end.setMinutes(59); end.setSeconds(59);
      const month = start.getMonth()+1; // 0-11, 月份加1,方便和大月、小月口诀对应
      switch (text) {
        case ''today'':
          this.$refs[ref].val = [start, end];
          this.$refs[ref].changeVal();
          break;
        case ''this-week'':
          const today = start.getDate(); // 1-31
          const weekday = start.getDay() || 7; // 0-6, 若为0则改为7
          start.setDate(today+(1-weekday));
          end.setDate(today+(7-weekday));
          this.$refs[ref].val = [start, end];
          this.$refs[ref].changeVal();
          break;
        case ''this-month'':
          start.setDate(1);
          if (month===1 || month===3 || month===5 || month===7 || month===8 || month===10 ||month===12) {
            end.setDate(31);
          }
          if (month===4 || month===6 || month===9 || month===11) {
            end.setDate(30);
          }
          if (month===2) {
            const year = start.getFullYear();
            if ((year % 4 == 0 && !(year % 100 == 0)) || year % 400 == 0) {
              end.setDate(29);
            } else {
              end.setDate(28);
            }
          }
          this.$refs[ref].val = [start, end];
          this.$refs[ref].changeVal();
          break;
        case ''last-month'':
          const lastMonth = start.getMonth() - 1;// 0-11, 月份减1,得到上月,-1-10
          if (lastMonth === -1) {
            const year = start.getFullYear();
            start.setFullYear(year - 1);
            start.setMonth(11);
            end.setFullYear(year - 1);
            end.setMonth(11);
            end.setDate(31); // -1月份单写
          } else {
            start.setMonth(lastMonth);
            end.setMonth(lastMonth);
          }
          start.setDate(1);
          const tem = lastMonth+1
          if (tem ===1 || tem===3 || tem===5 || tem===7 || tem===8 || tem===10) {
            end.setDate(31);
          }
          if (tem===4 || tem===6 || tem===9 || tem===11) {
            end.setDate(30);
          }
          if (tem===2) {
            const year = start.getFullYear();
            if ((year % 4 == 0 && !(year % 100 == 0)) || year % 400 == 0) {
              end.setDate(29);
            } else {
              end.setDate(28);
            }
          }
          this.$refs[ref].val = [start, end];
          this.$refs[ref].changeVal();
          break;
        case ''this-quarter'':
          const quarter = Math.floor((month%3 === 0 ? ( month/3 ) : ( month/3 + 1 )))
          start.setDate(1);
          if (quarter === 1) {
            start.setMonth(0);
            end.setMonth(2);
            end.setDate(31);
          }
          if (quarter === 2) {
            start.setMonth(3);
            end.setMonth(5);
            end.setDate(30);
          }
          if (quarter === 3) {
            start.setMonth(6);
            end.setMonth(8);
            end.setDate(30);
          }
          if (quarter === 4) {
            start.setMonth(9);
            end.setMonth(11);
            end.setDate(31);
          }
          this.$refs[ref].val = [start, end];
          this.$refs[ref].changeVal();
          break;
        case ''this-year'':
          start.setMonth(0);
          start.setDate(1);
          end.setMonth(11);
          end.setDate(31);
          this.$refs[ref].val = [start, end];
          this.$refs[ref].changeVal();
          break;
      }
    },
  }
}

js日期插件dateHelp获取本月、三个月、今年的日期_javascript技巧

js日期插件dateHelp获取本月、三个月、今年的日期_javascript技巧

最近看了一些关于面向对象的知识,最近工作中在做统计查询的时候需要用到本月、近三个月、今年的日期范围,所以下面用用面向对象的思想写了一个获取日期的插件,大家可以借鉴使用。

直接通过new DateHelp就可以调用了

var myDate = new DateHelp({
date:''2015-02-01'',//从此日期开始计算
format:''yyyy/MM/dd''
});

myDate.getThisMonth();
myDate.getThreeMonth();
myDate.getThisYear();
登录后复制

dateHelp.js插件

/**
 * 通过调用可以获取本月,近三个月,今年的日期
 * @param obj
 * @constructor
 */
function DateHelp(obj) {
 /*var obj = {
  date:''2015-02-01'',//从此日期开始计算
  type:''month'',//以年月日向前计算:年(year),月(month),日(day)
  value:''14'',//向前计算的数值,年月日
  format:''yyyy/mm/dd''//日期格式
  }*/

 this.date = obj.date;
 this.type = obj.type;
 this.value = obj.value == undefined &#63; obj.value : 0;
 this.format = obj.format == undefined &#63; obj.format: ''yyyy/MM/dd'';

 //日期和非日期格式获取年月日
 if (this.date instanceof Date){
  //处理传进来的是日期函数的

  this.year = this.date.getFullYear();
  this.month = this.date.getMonth()+1;
  this.day = this.date.getDate();
 }else{
  //处理传入的是非日期函数的

  this.year = this.date.substr(0, 4);
  this.month = this.date.substr(5, 2);
  this.day = this.date.substr(8, 2);
 }

}

DateHelp.prototype.beforeDate = function(type, value){

 var _type = type || this.type,
  _value = value || this.value,
  _year = this.year,
  _month = this.month,
  _day = this.day;

 if (_type == ''year'' || _type == ''年''){
  _year -= _value;
 }else if (_type == ''month'' || _type == ''月''){
  _year -= parseInt(_value / 12);
  _month -= _value % 12;
  if(_month <= 0){
   _year -= 1;
   _month += 12;
  }
 }else if (_type == ''day'' || _type == ''日''){

 }else {

 }

 var date = new Date(_year, _month - 1, _day)
 return this.formatDate(date, this.format);
}

DateHelp.prototype.formatDate = function(date,fmt){

 var o = {
  "M+" : date.getMonth()+1,     //月份
  "d+" : date.getDate(),     //日
  "h+" : date.getHours(),     //小时
  "m+" : date.getMinutes(),     //分
  "s+" : date.getSeconds(),     //秒
  "q+" : Math.floor((date.getMonth()+3)/3), //季度
  "S" : date.getMilliseconds()    //毫秒
 };
 if(/(y+)/.test(fmt))
  fmt=fmt.replace(RegExp.$1, (date.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) &#63; (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
 return fmt;
}

DateHelp.prototype.getThisMonth = function() {

 var first = new Date(this.year, this.month - 1);
 var last = new Date(this.year, this.month, 0);

 return this.formatDate(first, this.format) + " - " + this.formatDate(last, this.format);
}

DateHelp.prototype.getThreeMonth = function() {

 return this.beforeDate(''month'', 3) + " - " + this.beforeDate(''day'', 0);
}

DateHelp.prototype.getThisYear = function() {

 var first = new Date(this.year, 0, 1);
 var last = new Date(this.year, 11, 31);

 return this.formatDate(first, this.format) + " - " + this.formatDate(last, this.format);
}


/*
//示例
var myDate = new DateHelp({
 date:''2015-02-01'',//从此日期开始计算
 format:''yyyy/MM/dd''
});

console.log(myDate.getThisMonth());
console.log(myDate.getThreeMonth());
console.log(myDate.getThisYear());*/
登录后复制

html测试代码

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script src="myJs/dateHelp.js"></script>
</head>
<body>


<script>

 var myDate = new DateHelp({
  date:new Date(),//从此日期开始计算
  format:''yyyy/MM/dd''
 });

 console.log(myDate.getThisMonth());
 console.log(myDate.getThreeMonth());
 console.log(myDate.getThisYear());
</script>
</body>
</html>
登录后复制

希望本文所述对大家学习javascript程序设计有所帮助。

JS获取本周、本季度、本月、上月、本年的开始日期、结束日期

JS获取本周、本季度、本月、上月、本年的开始日期、结束日期

/**
* 获取本周、本季度、本月、上月的开始日期、结束日期
*/
var now = new Date(); //当前日期 
var nowDayOfWeek = now.getDay(); //今天本周的第几天 
var nowDay = now.getDate(); //当前日 
var nowMonth = now.getMonth(); //当前月 
var nowYear = now.getYear(); //当前年 
nowYear += (nowYear < 2000) ? 1900 : 0; //

var lastMonthDate = new Date(); //上月日期
lastMonthDate.setDate(1);
lastMonthDate.setMonth(lastMonthDate.getMonth()-1);
var lastYear = lastMonthDate.getYear();
var lastMonth = lastMonthDate.getMonth();

//格式化日期:yyyy-MM-dd 
function formatDate(date) { 
var myyear = date.getFullYear(); 
var mymonth = date.getMonth()+1var myweekday = date.getDate(); 

if(mymonth < 10){ 
mymonth = "0" + mymonth; 
} 
if(myweekday < 10){ 
myweekday = "0" + myweekday; 
} 
return (myyear+"-"+mymonth + "-" + myweekday); 
} 

//获得某月的天数 
function getMonthDays(myMonth){ 
var monthStartDate = new Date(nowYear, myMonth, 1); 
var monthEndDate = new Date(nowYear, myMonth + 1, 1); 
var days = (monthEndDate - monthStartDate)/(1000 * 60 * 60 * 24); 
return days; 
} 

//获得本季度的开始月份 
function getQuarterStartMonth(){ 
var quarterStartMonth = 0if(nowMonth<3){ 
quarterStartMonth = 0; 
} 
if(2<nowMonth && nowMonth<6){ 
quarterStartMonth = 3; 
} 
if(5<nowMonth && nowMonth<9){ 
quarterStartMonth = 6; 
} 
if(nowMonth>8){ 
quarterStartMonth = 9; 
} 
return quarterStartMonth; 
} 

//获得本周的开始日期 
function getWeekStartDate() { 
var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek); 
return formatDate(weekStartDate); 
} 

//获得本周的结束日期 
function getWeekEndDate() { 
var weekEndDate = new Date(nowYear, nowMonth, nowDay + (6 - nowDayOfWeek)); 
return formatDate(weekEndDate); 
} 

//获得本月的开始日期 
function getMonthStartDate(){ 
var monthStartDate = new Date(nowYear, nowMonth, 1); 
return formatDate(monthStartDate); 
} 

//获得本月的结束日期 
function getMonthEndDate(){ 

 var days= getMonthDays(nowMonth);//获取当月总共有多少天
 var monthEndDate = new Date(nowYear, nowMonth, days); 
 return formatDate(monthEndDate); //返回当月结束时间
}

注意:因为上面这个方法里的getMonthDays(nowMonth)方法 我尝试使用失败,我不知道是什么原因 所以我用了另外个方法如下(获得某月的天数,需要配合文章开头的公式 ):

//获得某月的天数 (与上面有重复可删除,不然本月结束日期报错)
    function getMonthDays(nowyear,myMonth){
     var lastMonthStartDate = new Date(nowyear, lastMonth, 1);
     var lastMonthEndDate= new Date(nowyear, lastMonth+ 1, 1);
     var days = (lastMonthEndDate- lastMonthStartDate) / (1000 * 60 * 60 * 24);//格式转换
    alert(days);
   }

//获得上月开始时间
function getLastMonthStartDate(){
var lastMonthStartDate = new Date(nowYear, lastMonth, 1);
return formatDate(lastMonthStartDate); 
}

//获得上月结束时间
function getLastMonthEndDate(){
var lastMonthEndDate = new Date(nowYear, lastMonth, getMonthDays(lastMonth));
return formatDate(lastMonthEndDate); 
}

//获得本季度的开始日期 
function getQuarterStartDate(){ 

var quarterStartDate = new Date(nowYear, getQuarterStartMonth(), 1); 
return formatDate(quarterStartDate); 
} 

//或的本季度的结束日期 
function getQuarterEndDate(){ 
var quarterEndMonth = getQuarterStartMonth() + 2var quarterStartDate = new Date(nowYear, quarterEndMonth, getMonthDays(quarterEndMonth)); 
return formatDate(quarterStartDate); 
}

//获取本年开始-当前时间

var currentYear=now.getFullYear();//获得当前年份4位年

var currentYearFirstDate=new Date(currentYear,0,1); //本年第一天

var startTime = currentYearFirstDate.getFullYear() + ''-'' + (currentYearFirstDate.getMonth() +1) + ''-'' + currentYearFirstDate.getDate()+''''+currentYearFirstDate.getHours()+'':''+currentYearFirstDate.getMinutes()+'':''+

currentYearFirstDate.getSeconds(); //格式化本年第一天日期

var currentYearEndDate=now; //当前时间

 

JS获取本周、本季度、本月、上月的开始日期、结束日期

JS获取本周、本季度、本月、上月的开始日期、结束日期

/**
* 获取本周、本季度、本月、上月的开始日期、结束日期
*/
var now = new Date(); //当前日期 
var nowDayOfWeek = now.getDay(); //今天本周的第几天 
var nowDay = now.getDate(); //当前日 
var nowMonth = now.getMonth(); //当前月 
var nowYear = now.getYear(); //当前年 
nowYear += (nowYear < 2000) ? 1900 : 0; //

var lastMonthDate = new Date(); //上月日期
lastMonthDate.setDate(1);
lastMonthDate.setMonth(lastMonthDate.getMonth()-1);
var lastYear = lastMonthDate.getYear();
var lastMonth = lastMonthDate.getMonth();

//格式化日期:yyyy-MM-dd 
function formatDate(date) { 
var myyear = date.getFullYear(); 
var mymonth = date.getMonth()+1; 
var myweekday = date.getDate(); 

if(mymonth < 10){ 
mymonth = "0" + mymonth; 

if(myweekday < 10){ 
myweekday = "0" + myweekday; 

return (myyear+"-"+mymonth + "-" + myweekday); 


//获得某月的天数 
function getMonthDays(myMonth){ 
var monthStartDate = new Date(nowYear, myMonth, 1); 
var monthEndDate = new Date(nowYear, myMonth + 1, 1); 
var days = (monthEndDate - monthStartDate)/(1000 * 60 * 60 * 24); 
return days; 


//获得本季度的开始月份 
function getQuarterStartMonth(){ 
var quarterStartMonth = 0; 
if(nowMonth<3){ 
quarterStartMonth = 0; 

if(2<nowMonth && nowMonth<6){ 
quarterStartMonth = 3; 

if(5<nowMonth && nowMonth<9){ 
quarterStartMonth = 6; 

if(nowMonth>8){ 
quarterStartMonth = 9; 

return quarterStartMonth; 


//获得本周的开始日期 
function getWeekStartDate() { 
var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek); 
return formatDate(weekStartDate); 


//获得本周的结束日期 
function getWeekEndDate() { 
var weekEndDate = new Date(nowYear, nowMonth, nowDay + (6 - nowDayOfWeek)); 
return formatDate(weekEndDate); 


//获得本月的开始日期 
function getMonthStartDate(){ 
var monthStartDate = new Date(nowYear, nowMonth, 1); 
return formatDate(monthStartDate); 


//获得本月的结束日期 
function getMonthEndDate(){ 
var monthEndDate = new Date(nowYear, nowMonth, getMonthDays(nowMonth)); 
return formatDate(monthEndDate); 
}

//获得上月开始时间
function getLastMonthStartDate(){
var lastMonthStartDate = new Date(nowYear, lastMonth, 1);
return formatDate(lastMonthStartDate); 
}

//获得上月结束时间
function getLastMonthEndDate(){
var lastMonthEndDate = new Date(nowYear, lastMonth, getMonthDays(lastMonth));
return formatDate(lastMonthEndDate); 
}

//获得本季度的开始日期 
function getQuarterStartDate(){ 

var quarterStartDate = new Date(nowYear, getQuarterStartMonth(), 1); 
return formatDate(quarterStartDate); 


//或的本季度的结束日期 
function getQuarterEndDate(){ 
var quarterEndMonth = getQuarterStartMonth() + 2; 
var quarterStartDate = new Date(nowYear, quarterEndMonth, getMonthDays(quarterEndMonth)); 
return formatDate(quarterStartDate); 
}

今天关于js日期插件dateHelp获取本月、三个月、今年的日期js获取日期差的介绍到此结束,谢谢您的阅读,有关el-date-picker日期快捷键(今日、本周、本月、上月、本季、本年)、js日期插件dateHelp获取本月、三个月、今年的日期_javascript技巧、JS获取本周、本季度、本月、上月、本年的开始日期、结束日期、JS获取本周、本季度、本月、上月的开始日期、结束日期等更多相关知识的信息可以在本站进行查询。

本文标签:

上一篇Angularjs material 实现搜索框功能(angularjs select)

下一篇详解JS正则replace的使用方法(js 正则replace)