2017-02-15 78 views
2

我正在試圖創建打印今天的日期創建在JavaScript/HTML日曆

但是日曆,我的日曆仍然是空白

與當我嘗試打印日曆整個日曆

因爲我不是通過HTML打印表格,而是試圖通過javascript打印表格。

var $ = function (id) { return document.getElementById(id); }; 
 

 

 
var getMonthText = function(currentMonth) { 
 
    if (currentMonth === 0) { return "January"; } 
 
    else if (currentMonth === 1) { return "February"; } 
 
    else if (currentMonth === 2) { return "March"; } 
 
    else if (currentMonth === 3) { return "April"; } 
 
    else if (currentMonth === 4) { return "May"; } 
 
    else if (currentMonth === 5) { return "June"; } 
 
    else if (currentMonth === 6) { return "July"; } 
 
    else if (currentMonth === 7) { return "August"; } 
 
    else if (currentMonth === 8) { return "September"; } 
 
    else if (currentMonth === 9) { return "October"; } 
 
    else if (currentMonth === 10) { return "November"; } 
 
    else if (currentMonth === 11) { return "December"; } 
 
}; 
 

 
var getLastDayofMonth = function(currentMonth) { 
 
    var dt = new Date(); 
 
    dt.setMonth(currentMonth +1); 
 
    dt.setDate(0); 
 
    
 
    return dt.getDate(); 
 
    
 
}; 
 

 
window.onload = function() { 
 
    
 
    //var year = 
 
    
 
};
body { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    background-color: white; 
 
    margin: 0 auto; 
 
    width: 360px; 
 
    border: 3px solid blue; 
 
    padding: 0 2em 1em; 
 
} 
 
h1 { 
 
    color: blue; 
 
    margin-bottom: .25em; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
    border: 1px solid black; 
 
} 
 
td { 
 
    width: 3em; 
 
    height: 3em; 
 
    vertical-align: top; 
 
    padding: 0.5 0 0 0.5; 
 
    border: 1px solid black; 
 
}
<title>Calendar</title> 
 
    <link rel="stylesheet" href="calendar.css"> 
 
    <script src="calendar.js"></script> 
 

 
<body> 
 
    <main> 
 
     <h1><span id="month_year">&nbsp;</span></h1> 
 

 
     <table id="calendar"> 
 
      <tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr> 
 
      
 
      
 
     </table> 
 
    </main> 
 
</body>

+0

發佈提問與問題 –

+0

https://jsfiddle.net/wtb1s7bf/ – steven

+0

不要打擾一個小提琴,代碼在這裏運行。 – RobG

回答

1

你需要賺更多的開始的日曆部分,但這裏的一些幫助,你有什麼。

getMonthText功能將得到更好的命名getMonthName並且可以很簡單的:

/* Return month name 
 
** @param {number|string} index - integer month number, zero indexed 
 
** @returns {string} Full month name or undefined if index < 0 or > 11. 
 
*/ 
 
function getMonthName(index) { 
 
    return ['January','February','March','April','May','June','July', 
 
      'August','September','October','November','December'][index]; 
 
} 
 

 
var index = new Date().getMonth(); 
 

 
console.log(getMonthName(index));

getLastDayofMonth功能應該日期設定爲第一的月(或29日之前的任何日期),然後再加上一個月,因爲在1月31日之後增加1個月將返回3月2日或3日,因此您將獲得F的最後一天月‧日(同樣地,對於任何一個月之後的天數較少一個月),所以:

/* Return a date for the last day of the month of the provided date 
 
** @param {Date} date - date to get last day of month for 
 
** @returns {Date} date for last day of month 
 
*/ 
 
function getLastDayOfMonth(date) { 
 
    // Copy date so don't modify original, default to today 
 
    var d = date? new Date(date) : new Date(); 
 
    // Set to start of month 
 
    d.setDate(1); 
 
    // Add a month and set to last day of previous 
 
    // i.e. set to last day of current month 
 
    d.setMonth(d.getMonth() + 1, 0); 
 
    return d; 
 
} 
 

 
console.log(getLastDayOfMonth().toString()); 
 
console.log(getLastDayOfMonth(new Date(2016,1)).toString());

丟失的功能身體的其餘部分需要創造細胞的每一天,然後用填充它們適當的價值。快樂的編碼。 ;-)