原生js日历制作——初始日期对象

Date对象

Date对象用来处理日期和时间

创建日期对象

var date = new Date();//使用构造函数创建一个当前时间的对象
var date = new Date("2017-03-22");//创建一个指定时间的日期对象
var date = new Date("2017-03-22 00:52:34");//创建一个指定时间的日期对象
var date = new Date(2017, 2, 22, 0, 52, 34);
var date = new Date(1523199394644);//参数：毫秒值

获取时间

使用日期对象的方法获取日期的指定部分

常用获取函数

名称	方法	描述	备注
获取日期	getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。	无
获取星期	getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。	0为周日
获取月份	getMonth()	从 Date 对象返回月份 (0 ~ 11)。	转化需加1
获取年份	getFullYear()	从 Date 对象以四位数字返回年份。	无
获取小时	getHours()	返回 Date 对象的小时 (0 ~ 23)。	无
获取分钟	getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。	无
获取秒	getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。	无
获取时间戳	getTime()	返回 1970 年 1 月 1 日至今的毫秒数。	无

常用设置函数

名称	方法	描述	备注
设置日期	setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。	无
设置月份	setMonth()	设置 Date 对象中月份 (0 ~ 11)。	无
设置年份	setFullYear()	设置 Date 对象中的年份（四位数字）。	无
设置小时	setHours()	设置 Date 对象中的小时 (0 ~ 23)。	无
设置分钟	setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。	无
设置秒	setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。	无

常用处理函数

名称	方法	描述	备注
日期对象转时间戳	parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数。	无

常用见案例剖析

日期转为毫秒数(时间戳)

Date.parse("2015-08-24") 
new Date().getTime()
+new Date();

• 案例·计算两个日期的时间差值(天)

function count(date1,date2){
    var date=Math.abs(date1.getTime()-date2.getTime())/(1000*60*60*24);
    return date
}
count(new Date(2010,10,3),new Date(2017,9,24))

• 案例·计算两个日期的时间差值(天,时，分，秒)

function count(date1,date2){
    var total=Math.abs(date1.getTime()-date2.getTime())/1000;
    var day = parseInt(total/1000/60/60/24);
    var hour = parseInt(total/1000/60/60)%24;
    var minute = parseInt(total/1000/60)%60; 
    var second = parseInt(total/1000)%60;
    return {
        day:day,
        hour:hour,
        minute:minute,
        second:second
    }
}
count(new Date(2010,10,3),new Date(2017,9,24))

日期函数常用封装

获取当前星期

function getDay(date){
    date=date.getDay()
    /**
     * 因为周日返回 0  
     * 所以当不等于0时返回正常数据
     * 当等于0时 返回 7 
     * */ 
    if(date)
        return date
    else 
        return 7
}

根据时间解析年月日

function getObjDate(date){
    return {
        year:date.getFullYear(),
        month:date.getMonth()+1,
        date:date.getDate(),
        week:getDay(date)
    }
}

获取明日时间

function tomorrowDate(date){
    date=new Date(date.valueOf())
    date.setDate(date.getDate()+1)
    return date
}

获取昨日时间

function yesterdayDate(date){
    date=new Date(date.valueOf())
    date.setDate(date.getDate()-1)
    return date
}

获取本周一

function getWeekOne(date){
    date=new Date(date.valueOf())
    var day=date.getDay()==0?7:date.getDay()
    date.setDate(date.getDate()-day+1)
    return date
}

获取本周末

function getWeekSeven(date){
    date=new Date(date.valueOf())
    var day=date.getDay()==0?7:date.getDay()
    date.setDate(date.getDate()-day+7)
    return date
}

获取本周时间

function getWeeks(date){
    let arr=[]
    //获取本周一的时间
    let _date=getWeekOne(date)
    arr.push(new Date(_date.valueOf()))
    for(let i =1 ;i<7;i++){
       date.setDate(date.getDate()+1)
       arr.push(new Date(_date.valueOf()))
    }
    return arr
}

获取本月一号

function getMonthDay(date){
    date=new Date(date.valueOf())
    date.setDate(1);
    return date
}

获取本月最后一天

function getMonthLastDay(date){
    date=new Date(date.valueOf())
    date.setMonth(date.getMonth()+1);
    date.setDate(0);
    return date
}

获取本月所有天数

// 获取本月第一天
function getMonthDay(date){
    date=new Date(date.valueOf())
    date.setDate(1);
    return date
}
// 获取本月最后一天
function getMonthLastDay(date){
    date=new Date(date.valueOf())
    date.setMonth(date.getMonth()+1);
    date.setDate(0);
    return date
}
function getMonth(date){
    var arr=[]
    // 获取本月第一天
    var _date=getMonthDay(date)
    // // 获取本月最后一天
    var dataLast=getMonthLastDay(date).getDate()
    arr.push(new Date(_date.valueOf()))
    // 处理本月第一天 到本月最后一天
    for(var i =1;i<dataLast;i++){
        _date.setDate(_date.getDate()+1)
        arr.push(new Date(_date.valueOf()))
    }
    return arr
}

获取本月所有天数（补全）

// 获取本月第一天
function getMonthDay(date){
    date=new Date(date.valueOf())
    date.setDate(1);
    return date
}
// 获取本月最后一天
function getMonthLastDay(date){
    date=new Date(date.valueOf())
    date.setMonth(date.getMonth()+1);
    date.setDate(0);
    return date
}
function getMonth(date){
    var arr=[]
    // 获取本月第一天
    var _date=getMonthDay(date)
    // // 获取本月最后一天
    var dataLast=getMonthLastDay(date).getDate()
    arr.push(new Date(_date.valueOf()))
    // 处理本月第一天 到本月最后一天
    for(var i =1;i<dataLast;i++){
        _date.setDate(_date.getDate()+1)
        arr.push(new Date(_date.valueOf()))
    }
    // 向前补全，重置为本月一号
    _date=getMonthDay(date)
    var forln=_date.getDay()
    for(var i=0;i<forln;i++){
        _date.setDate(_date.getDate()-1)
        arr.unshift(new Date(_date.valueOf()))
    }
    // 向后补全,重置为本月最后一天
    _date=getMonthLastDay(date)
    forln=_date.getDay()
    for(var i=forln;i<6;i++){
        _date.setDate(_date.getDate()+1)
        arr.push(new Date(_date.valueOf()))
    }
    console.log(arr)
    return arr
}