最近很多小伙伴都在问js日期插件dateHelp获取本月、三个月、今年的日期和js获取日期差这两个问题,那么本篇文章就来给大家详细解答一下,同时本文还将给你拓展el-date-picker日期快捷键(
最近很多小伙伴都在问js日期插件dateHelp获取本月、三个月、今年的日期和js获取日期差这两个问题,那么本篇文章就来给大家详细解答一下,同时本文还将给你拓展el-date-picker日期快捷键(今日、本周、本月、上月、本季、本年)、js日期插件dateHelp获取本月、三个月、今年的日期_javascript技巧、JS获取本周、本季度、本月、上月、本年的开始日期、结束日期、JS获取本周、本季度、本月、上月的开始日期、结束日期等相关知识,下面开始了哦!
本文目录一览:- js日期插件dateHelp获取本月、三个月、今年的日期(js获取日期差)
- el-date-picker日期快捷键(今日、本周、本月、上月、本季、本年)
- js日期插件dateHelp获取本月、三个月、今年的日期_javascript技巧
- JS获取本周、本季度、本月、上月、本年的开始日期、结束日期
- JS获取本周、本季度、本月、上月的开始日期、结束日期
js日期插件dateHelp获取本月、三个月、今年的日期(js获取日期差)
最近看了一些关于面向对象的知识,最近工作中在做统计查询的时候需要用到本月、近三个月、今年的日期范围,所以下面用用面向对象的思想写了一个获取日期的插件,大家可以借鉴使用。
直接通过new DateHelp就可以调用了
myDate.getThisMonth();
myDate.getThreeMonth();
myDate.getThisYear();
dateHelp.js插件
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测试代码
希望本文所述对大家学习javascript程序设计有所帮助。
el-date-picker日期快捷键(今日、本周、本月、上月、本季、本年)
图示
需要使用到快捷键的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技巧
最近看了一些关于面向对象的知识,最近工作中在做统计查询的时候需要用到本月、近三个月、今年的日期范围,所以下面用用面向对象的思想写了一个获取日期的插件,大家可以借鉴使用。
直接通过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 ? 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, 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获取本周、本季度、本月、上月、本年的开始日期、结束日期
/**
* 获取本周、本季度、本月、上月的开始日期、结束日期
*/
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 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() + 2;
var 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获取本周、本季度、本月、上月的开始日期、结束日期
/**
* 获取本周、本季度、本月、上月的开始日期、结束日期
*/
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获取本周、本季度、本月、上月的开始日期、结束日期等更多相关知识的信息可以在本站进行查询。
本文标签: