日歷控件是前端開發中常用的工具，它能夠方便地幫助用戶選擇日期。本文將介紹如何使用JavaScript和CSS來創建一個簡單的日歷控件。

在HTML中，我們可以使用一個div元素來容納整個日歷控件，如下所示：

<div id="calendar"></div>

接下來，我們可以使用JavaScript來動態生成日歷控件的UI。首先，我們需要獲取當前日期：

var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var date = now.getDate();

接著，我們可以使用JavaScript來生成日歷表格：

function generateCalendar(year, month) {
var daysInMonth = new Date(year, month, 0).getDate();
var firstDay = new Date(year, month - 1, 1).getDay();
var calendarHtml = '<table><tr><th>周日</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th><th>周六</th></tr>';
for(var i=0; i<6; i++) {
calendarHtml += '<tr>';
for(var j=0; j<7; j++) {
var date = i*7 + j - firstDay + 1;
if(date <=0 || date > daysInMonth) {
calendarHtml += '<td></td>';
} else {
calendarHtml += '<td>' + date + '</td>';
}
}
calendarHtml += '</tr>';
}
calendarHtml += '</table>';
return calendarHtml;
}
document.getElementById('calendar').innerHTML = generateCalendar(year, month);

最后，我們可以使用CSS來美化日歷控件的UI：

#calendar table {
border-collapse: collapse;
width: 100%;
}
#calendar th, #calendar td {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
#calendar td {
cursor: pointer;
}
#calendar td:hover {
background-color: #eee;
}

通過以上代碼，我們就能夠創建一個簡單的日歷控件了。