现在网络上有很多第三方插件，使用起来也很方便，但插件功能一般都比较丰富，造成我们只需要某个小功能而引入了一个较大的文件，这增大了项目体积和增加用户流量的使用，我个人不太喜欢用插件，更推崇自己实现。该例介绍了一个日历控件的实现。
日历控件
实现思路： 根据需求，我们需要一个实现年月的头，一栏显示周一到周日的地方，和日期的列表，列表我们可以用二维数组实现，第一维控制0~6，第二维则根据月份来设定，同时还要注意本月一号的起始位置。ok，贴上代码：
html代码
{month_title}
日
一
二
三
四
五
六
{day.day}
{day.day}
{day.day}
{day.day}
{day.day}
确定
显示日期的二维数组代码
function showDate() {
var cDate = date ? date : new Date();
var cDayOnWeek = cDate.getDay()
self.pageMonth = cDate.getMonth()
self.pageYear = cDate.getFullYear()
var tmp = new Date(self.pageYear, self.pageMonth + 1, 0)
var daysOnMonth = tmp.getDate()
tmp = new Date(self.pageYear, self.pageMonth, 1)
var dayOnWeek = tmp.getDay()
var dayLines = new Array()
for (var i = 0; i <= 5; i++) {
dayLines[i] = new Array()
}
for (var i = 1; i <= daysOnMonth; i++) {
dayLineIndex = parseInt((i + dayOnWeek - 1) / 7)
dayOnWeekIndex = (i + dayOnWeek - 1) % 7
if ((self.currentDate.getDate() == i) && (self.pageMonth == self.currentDate.getMonth()) &&
(self.pageYear == self.currentDate.getFullYear())) {
dayLines[dayLineIndex][dayOnWeekIndex] = '今天'
} else {
dayLines[dayLineIndex][dayOnWeekIndex] = i
}
}
self.month_title = self.pageYear + '年' + (self.pageMonth + 1) + '月'
self.weeks = new Array()
for (var i = 0; i <= 5; i++) {
var dayLine = dayLines[i];
if (dayLine.length > 0) {
self.weeks[i] = new Array()
for (var j = 0; j < 7; j++) {
if (dayLine[j]) {
self.weeks[i][j] = {
'day': dayLine[j],
'isSelected': isPickedDay(self.pageYear, self.pageMonth, dayLine[j]),
'isPassedDayInCurrentMonth': isPassedDayInCurrentMonth(self.pageYear, self.pageMonth, dayLine[j])
}
} else {
self.weeks[i][j] = {'day': '', 'isSelected': false, 'isPassedDayInCurrentMonth': false}
}
}
}
}
}
点击选中日期效果
self.clickDay = function (e) {
if (!self.canSelectDays) {
return
}
var attributes = e.target.attributes;
if ((!attributes) || (attributes.length == 0) || (!attributes['name'])) {
return
}
var day = attributes['name'].value
if (isPassedDayInCurrentMonth(self.pageYear, self.pageMonth, day)) {
return
}
for (var i = self.weeks.length - 1; i >= 0; i--) {
for (var j = self.weeks[i].length - 1; j >= 0; j--) {
if (self.weeks[i][j].day == day) {
self.weeks[i][j].isSelected = true;
self.pickedDay = {
'year': self.pageYear,
'month': self.pageMonth,
'date': self.weeks[i][j].day
}
} else {
self.weeks[i][j].isSelected = false;
}
}
}
self.update()
}
点击下一个月 (点击上个月与此类似)
self.clickNextMonth = function (e) {
self.selectedMonthSpan++;
if (self.pageMonth == 11) {
self.pageMonth = 0
self.pageYear++
} else {
self.pageMonth++
}
showDate(new Date(self.pageYear, self.pageMonth, 1))
updateMonthStyle()
}
点击选择日期效果切换
function updateMonthStyle() {
self.update({
monthColor: {
'background': self.canSelectDays ? '#0a79ff' : '#97999d'
},
workDayColor: {
'color': self.canSelectDays ? '#181a28' : '#97999d'
},
weekendsDayColor: {
'color': self.canSelectDays ? '#0a79ff' : '#97999d'
},
dayColor: {
'color': self.canSelectDays ? '#181a28' : '#97999d'
}
})
}
判断是否为 “今天 ”
function isPickedDay(year, month, date) {
if (self.pickedDay.year == 0) {
return false
}
var today = self.currentDate.getDate()
return ((self.pickedDay.year == year) && (self.pickedDay.month == month) &&
((self.pickedDay.date == date)) || ((self.pickedDay.date == today) && (date == '今天')) )
}
"今天 " 以前时间置灰
function isPassedDayInCurrentMonth(year, month, day) {
return ((year == self.currentDate.getFullYear()) &&
(month == self.currentDate.getMonth()) &&
(day < self.currentDate.getDate()))
}
以下为样式列表
.content {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.date-picker {
width: 25.993rem;
margin-left: 2rem;
margin-right: 2rem;
/*height: 28.1667rem;*/
margin-top: 3rem;
background: white;
}
.month {
width: 100%;
height: 3.1667rem;
}
.month p {
display: block;
color: white;
line-height: 3.1667rem;
text-align: center;
}
.month img {
height: 1.2rem;
margin-top: 0.9667rem;
margin-bottom: 0.9667rem;
}
.week {
width: 24rem;
height: 2rem;
margin-top: 1.5rem;
margin-left: 0.8rem;
}
.week-item {
width: 3.42rem;
height: 100%;
float: left;
}
.week-item p, .day-item p {
text-align: center;
line-height: 2rem;
font-size: 0.833rem;
width: 100%;
}
.day {
width: 24rem;
margin-top: 1rem;
margin-left: 0.8rem;
height: 20rem;
}
.day-item {
width: 2rem;
height: 2rem;
margin-top: 1rem;
margin-left: 0.71rem;
margin-right: 0.71rem;
float: left;
}
.day-item-selected {
width: 2rem;
height: 2rem;
-moz-border-radius: 1rem;
-webkit-border-radius: 1rem;
border-radius: 1rem;
background: #0a79ff;
}
.day-item-selected p {
color: white;
}
.confirm {
margin-top: 2.667rem;
width: 100%;
height: 8.5rem;
}
.confirm-btn {
margin-left: 0.1667rem;
height: 100%;
width: 29.6666rem;
background: url(img/icon/train_tickets_btn.png);
background-size: cover;
}
.confirm-btn p {
font-size: 1.5rem;
text-align: center;
width: 100%;
margin-top: 2.5rem;
color: white;
}