js靈活處理日期（函實例）

時間 2020-05-07

原文原文鏈接

基礎方法：

var dd = new Date()
dd.getFullYear()
dd.getMonth()
dd.getDate()
dd.getDay()    //獲取星期幾（0~6）
dd.getTime()

進階方法：

new Date(2019,01,0).getDate()   //獲取2019年1月的天數
new Date(2019,1-1,1) //獲取2019年一月第一天
new Date(2019,1,0) //獲取2019年一月最後一天
new Date().toLocaleString()  //時間對象轉成時間字符串

靈活應用：

new Date().toLocaleString().split(' ')[0]  //時間對象轉成年月日
new Date().toLocaleString().split(' ')[0].split('/')[0]  //時間對象轉成 年[0]月[1]日[2]
new Date(new Date().getTime()+(2*24*60*60*1000)) //時間對象加減（最穩定方法是先轉成時間戳運算完再轉回時間對象）

//   用設置時間實現時間的加減：（js Date對象會有限制，若是超出限制就會改變隔壁的數值）
new Date(new Date().setMonth(new Date().getMonth()+1)) //月份的加減
new Date(new Date().setDate(new Date().getDate()+1)) //日子的加減

附加console圖：

實例：（主要需求：把每月按照星期一爲一週的第一天進行週期的分割，方便用戶快速定位到某月的第幾週數據，每月的第一週第一天一定爲此月的1號，最後一週的最後一天一定爲此月的最後一天，不能出現其餘月份的日子。）說明一下，這個需求徹底是真實項目需求，有時候，客戶的需求就是這麼稀奇八怪。。。。

```css
<style>
    * {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .main {
        margin: 0 auto;
        width: 1000px;
    }

    /*日期*/
    .date-content {
        width: 100%;
        height: 45px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #000000;
    }

    .date-content p {
        margin: 0 5px;
    }

    .date-content a {
        width: 20px;
        height: 20px;
        background-image: url('./day-.png');
        -webkit-background-size: contain;
        background-size: contain;
    }

    .date-content .right {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }



    .date-content span{
        border-radius: 10px;
        padding: 2px 8px;
        margin: 0 10px;
        color: #333;
    }
    .date-content .actions{
        background: #56a9fe;
        color: #fff;
    }
</style>

```html

    <div class="date-content">
        <a class="left" onclick="x.decreaseMonth()">-</a>
        <div>
            <p class="time"></p>
        </div>
        <a class="right" onclick="x.addMonth()">+</a>
        <span class="btn" onclick="x.getClickDate(0)">全月</span>
        <span class="btn" onclick="x.getClickDate(1)"></span>
        <span class="btn" onclick="x.getClickDate(2)"></span>
        <span class="btn" onclick="x.getClickDate(3)"></span>
        <span class="btn" onclick="x.getClickDate(4)"></span>
        <span class="btn" onclick="x.getClickDate(5)"></span>
        <span class="btn" onclick="x.getClickDate(6)"></span>

    </div>
    <div>
    </div>

<script>
        class cdDate {
            constructor() {
                // 報餐列表數據
                this.today = new Date();
                this.y = '';
                this.m = '';
                this.todaystamp = '';
                this.datestampList = [];
            }
            // 月份加減
            addMonth() {
                this.today.setMonth(this.m + 1)
                this.initialize()
                fillhtml()
                console.log('add')
            }
            decreaseMonth() {
                this.today.setMonth(this.m - 1)
                this.initialize()
                fillhtml()
                console.log('decrease')
            }
            // 初始化函數：
            initialize() {
                this.y = this.today.getFullYear()
                this.m = this.today.getMonth()
                this.todaystamp =this.today.getTime()
                this.datestampList = []

                let firstStampList = []
                let endStampList = []
                // 按鈕還原：
                for(let i of document.querySelectorAll('.btn')){
                    i.className  = 'btn'
                    i.innerHTML = ''
                }
                document.querySelectorAll('.btn')[0].className  += ' actions'
                document.querySelectorAll('.btn')[0].innerHTML  = '全月'


                let dayNum = new Date(this.y,this.m+1,0).getDate();  //獲取這個月的天數
                let firstday =new Date(this.y,this.m,1)   //獲取這個月的第一天
                if(firstday.getDay()!=1){
                        firstStampList.push(firstday)
                }
                for(let i=0;i<dayNum;i++){
                    if(firstday.getDay()==1){
                        firstStampList.push(firstday)
                    }
                    if(firstday.getDay()==0){
                        endStampList.push(firstday)
                    }
                    firstday = new Date(firstday.getTime()+(24*60*60*1000))
                }
                let endday =new Date(this.y,this.m+1,0)   //獲取這個月的最後一天
                if(endday.getDay()!=0){
                    endStampList.push(endday)
                }
                console.log(dayNum,firstStampList,'end',endStampList)
                for(var i=0;i<firstStampList.length;i++){
                    let dateStr0 =firstStampList[i].toLocaleString().split(' ')[0]
                    console.log(dateStr0)
                    let dateStr1 =endStampList[i].toLocaleString().split(' ')[0]
                    this.datestampList.push([dateStr0,dateStr1])
                    document.querySelectorAll('.btn')[i+1].innerHTML = dateStr0.split('/')[1]+'月'+dateStr0.split('/')[2]+'日'+' '+'至'+' '+dateStr1.split('/')[1]+'月'+dateStr1.split('/')[2]+'日'
                }
                console.log('dayNum',dayNum);
            }
            fill() {
                this.initialize()
                var result = {
                    month: this.m + 1,
                    year: this.y,
                }
                return result
            }

            // 獲取點擊日期
            getClickDate(index){
                for(let i of document.querySelectorAll('.btn')){
                    i.className  = 'btn'
                }
                document.querySelectorAll('.btn')[index].className  += ' actions'

                if(index==0){
                    alert(this.y+'/'+(this.m+1))
                }else{
                    alert(this.datestampList[index-1])
                }
                
            }
        }

        var x = new cdDate()
        // console.log(x.fill())
        function fillhtml() {
            var add = x.addMonth
            var decrease = x.decreaseMonth
            var de = x.fill()
            var yy = de.year
            var mm = de.month
            console.log(yy, mm)
            // alert(yy + '-' + mm)
            document.querySelector('.time').innerHTML = yy + '年' + mm + '月'
        }
        fillhtml()

        
    </script>

效果：

<!DOCTYPE html>css

<html lang="en">html

<head> <meta charset="UTF-8"> <title>每日菜單</title> <style> * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }web

.main {
        margin: 0 auto;
        width: 1000px;
    }

    /*日期*/
    .date-content {
        width: 100%;
        height: 45px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #000000;
    }

    .date-content p {
        margin: 0 5px;
    }

    .date-content a {
        width: 20px;
        height: 20px;
        background-image: url('./day-.png');
        -webkit-background-size: contain;
        background-size: contain;
    }

    .date-content .right {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }



    .date-content span{
        border-radius: 10px;
        padding: 2px 8px;
        margin: 0 10px;
        color: #333;
    }
    .date-content .actions{
        background: #56a9fe;
        color: #fff;
    }
</style>

</head>函數

<body>flex

<div class="date-content">
    <a class="left" onclick="x.decreaseMonth()">-</a>
    <div>
        <p class="time"></p>
    </div>
    <a class="right" onclick="x.addMonth()">+</a>
    <span class="btn" onclick="x.getClickDate(0)">全月</span>
    <span class="btn" onclick="x.getClickDate(1)"></span>
    <span class="btn" onclick="x.getClickDate(2)"></span>
    <span class="btn" onclick="x.getClickDate(3)"></span>
    <span class="btn" onclick="x.getClickDate(4)"></span>
    <span class="btn" onclick="x.getClickDate(5)"></span>
    <span class="btn" onclick="x.getClickDate(6)"></span>

</div>
<div>
   

</div>





<script>
    class cdDate {
        constructor() {
            // 報餐列表數據
            this.today = new Date();
            this.y = '';
            this.m = '';
            this.todaystamp = '';
            this.datestampList = [];
        }
        // 月份加減
        addMonth() {
            this.today.setMonth(this.m + 1)
            this.initialize()
            fillhtml()
            console.log('add')
        }
        decreaseMonth() {
            this.today.setMonth(this.m - 1)
            this.initialize()
            fillhtml()
            console.log('decrease')
        }
        // 初始化函數：
        initialize() {
            this.y = this.today.getFullYear()
            this.m = this.today.getMonth()
            this.todaystamp =this.today.getTime()
            this.datestampList = []

            let firstStampList = []
            let endStampList = []
            // 按鈕還原：
            for(let i of document.querySelectorAll('.btn')){
                i.className  = 'btn'
                i.innerHTML = ''
            }
            document.querySelectorAll('.btn')[0].className  += ' actions'
            document.querySelectorAll('.btn')[0].innerHTML  = '全月'


            let dayNum = new Date(this.y,this.m+1,0).getDate();  //獲取這個月的天數
            let firstday =new Date(this.y,this.m,1)   //獲取這個月的第一天
            if(firstday.getDay()!=1){
                    firstStampList.push(firstday)
            }
            for(let i=0;i<dayNum;i++){
                if(firstday.getDay()==1){
                    firstStampList.push(firstday)
                }
                if(firstday.getDay()==0){
                    endStampList.push(firstday)
                }
                firstday = new Date(firstday.getTime()+(24*60*60*1000))
            }
            let endday =new Date(this.y,this.m+1,0)   //獲取這個月的最後一天
            if(endday.getDay()!=0){
                endStampList.push(endday)
            }
            console.log(dayNum,firstStampList,'end',endStampList)
            for(var i=0;i<firstStampList.length;i++){
                let dateStr0 =firstStampList[i].toLocaleString().split(' ')[0]
                console.log(dateStr0)
                let dateStr1 =endStampList[i].toLocaleString().split(' ')[0]
                this.datestampList.push([dateStr0,dateStr1])
                document.querySelectorAll('.btn')[i+1].innerHTML = dateStr0.split('/')[1]+'月'+dateStr0.split('/')[2]+'日'+' '+'至'+' '+dateStr1.split('/')[1]+'月'+dateStr1.split('/')[2]+'日'
            }
            console.log('dayNum',dayNum);
        }
        fill() {
            this.initialize()
            var result = {
                month: this.m + 1,
                year: this.y,
            }
            return result
        }

        // 獲取點擊日期
        getClickDate(index){
            for(let i of document.querySelectorAll('.btn')){
                i.className  = 'btn'
            }
            document.querySelectorAll('.btn')[index].className  += ' actions'

            if(index==0){
                alert(this.y+'/'+(this.m+1))
            }else{
                alert(this.datestampList[index-1])
            }
            
        }
    }

    var x = new cdDate()
    // console.log(x.fill())
    function fillhtml() {
        var add = x.addMonth
        var decrease = x.decreaseMonth
        var de = x.fill()
        var yy = de.year
        var mm = de.month
        console.log(yy, mm)
        // alert(yy + '-' + mm)
        document.querySelector('.time').innerHTML = yy + '年' + mm + '月'
    }
    fillhtml()

    
</script>

</body>this

</html>url

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。