剛畢業，閒著的時候做了乙個日曆控制項，用css和jquery實現基本的日曆功能，包括年份和月份的翻頁，日期的選擇，根據輸入框的初始內容來初始化控制項，日期改變之後，也會更新該輸入框的內容。
首先是css**：
@charset "utf-8";
/* css document */
.x-date
.date-body
.date-body .date-year,.date-body .date-day
.date-body .date-year span
.date-body .date-year span samp
.date-body .date-year
.date-body .date-year .year
.date-body .date-year .month
.date-ul
.date-body .date-year .icon
.date-body .date-year .pre-year
.date-body .date-year .pre-month
.date-body .date-year .next-year
.date-body .date-year .next-month
.date-body .date-year .pre-year:hover,.date-body .date-year .pre-month:hover
.date-body .date-year .next-year:hover,.date-body .date-year .next-month:hover
.date-date
.date-body .date-day ul li,.date-body .date-date ul li
.date-ul li a
.date-ul .date-li:hover
.date-active
.date-body .active-date
.date-body .active-date span:nth-child(1)
.date-body .active-date span:nth-child(2),.date-body .active-date span:nth-child(3)
$(function()
}) $("body").delegate(".date-body .date-year .pre-year","click",function())
$("body").delegate(".date-body .date-year .next-year","click",function())
$("body").delegate(".date-body .date-year .pre-month","click",function()else
initcurrmonth();
}) $("body").delegate(".date-body .date-year .next-month","click",function()else
initcurrmonth();
}) $("input.x-date").click(function(e))
$(document).click(function(e)
}) initdateframe();
initdate();
initcurrmonth();
})//初始化日曆的基本框架
function initdateframe());
}//根據輸入框中的日期初始化控制項
function initdate()
}//根據年月初始化日曆的資料
function initcurrmonth()
$(".date-body").css("height",(i+3)*30+4+"px");
$(".date-body .date-date").css("height",i*30+"px");
$(".date-body .active-date span:eq(0)").text(year);
$(".date-body .active-date span:eq(1)").text(month);
$(".date-body .active-date span:eq(2)").text(today);
}
一行**即可。
效果圖：
乙個簡單的日曆控制項
效果圖 var defaultdate new date var startyear,startmonth,startday 變數定義需要改一下，用default來定義當天的所有資訊 不能改變 var defaultmonth defaultdate.getmonth var defaultyear...
收藏的乙個js日曆控制項
收藏的乙個js日曆控制項 setday.js function cnverycalendar if y 100 0 return 29 generate codes this.generatecalendartable function loop each days in current month...
提供乙個不錯的免費日曆控制項
1 乙個如果在編輯模式下字段為空的情況下，控制項為出現錯誤後 2 選擇完成後日曆自動收縮 3 在字段為空的情況，text裡顯示的為當前值 再進行發布的。c 版本 為原如版本，請熟悉c 函式的人更改一下，我用的是vb.net，呵呵 gridview中的日期字段輸入，實在是乙個麻煩的事情，因為對一般的使...