我们先来看几个样式的效果图片。
一,双日历(本月开始)选择范围今天-下个月的今天
2、三排日历(本月开始)显示上下月按钮,2012-2020节假日特殊显示
3、四排日历(指定日期为2012年12月21日)显示上下月按钮
完整的日历组件使用实例
代码如下点我也能弹出日历(竖版)
单个日历(本月)
单个日历(本月)开启select选择
双日历(本月开始)选择范围今天-下个月的今天
三排日历(本月开始)显示上下月按钮,2012-2020节假日特殊显示
四排日历(指定日期为2012年12月21日)显示上下月按钮
选择日期
如蒙转载请注明出处http://js.fgm.cc">Fgm.cc, By Ferris, QQ: 21314130
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript">
var oToday = new Date();
//单个日历(本月)
var oCal_1 = new Calendar({
id: "#J_Cal_1"
});
//单个日历(本月)开启select选择
var oCal_2 = new Calendar({
id: "#J_Cal_2",
isSelect: !0
});
oCal_2.on("dateClick", function(obj) {
alert(obj["data-date"])
});
//双日历(本月开始)选择范围今天-下个月的今天,选择日期弹出相应日期及星期几
var oCal_3 = new Calendar({
id: "#J_Cal_3",
count: 2,
range: {mindate: oToday, maxdate: new Date(oToday.getFullYear(), oToday.getMonth() + 1, oToday.getDate())}
});
oCal_3.on("dateClick", function(obj) {
alert(obj["data-date"] + "u3010"+ this.getDateInfo(obj["data-date"]).week +"u3011")
});
//三日历(本月开始)显示上下月按钮,2012-2020节假日特殊显示
var oToday = new Date();
var oCal_4 = new Calendar({
id: "#J_Cal_4",
isPrevBtn: !0,
isNextBtn: !0,
count: 3,
isHoliday: !0,
range: {mindate: "2012-01-01"}
});
oCal_4.on("dateClick", function(obj) {
var o = obj.children[0] || obj,
aA = _CAL.$("a", this.container),
i, oTmp;
//移出选择样式
for(i = aA.length; i--;) {
oTmp = aA[i].children[0] || aA[i];
_CAL.removeClass(oTmp, "selected")
};
//增加选中样式
_CAL.addClass(o, "selected");
alert(obj["data-date"] + "u3010"+ this.getDateInfo(obj["data-date"]).holiday +"u3011")
});
//四排日历(指定日期为2012年12月21日)显示上下月按钮
var oCal_5 = new Calendar({
id: "#J_Cal_5",
isPrevBtn: !0,
isNextBtn: !0,
count: 4,
date: new Date(2012, 11),
selectDate: "2012-12-21"
});
//弹出式日历
var oCal_6 = new Calendar({
id: "#J_Cal_6",
isPopup: !0,
isPrevBtn: !0,
isNextBtn: !0,
isCloseBtn: !0,
count: 2,
monthStep: 1,
isHoliday: !0,
isHolidayTips: !0,
isReadonly: !0,
isDateInfo: !0,
range: {mindate: oToday, maxdate: "2020-12-31"}
});
oCal_6.revise = {top:-1, left:0};
oCal_6.on("dateClick", function(obj) {
this.selectDate = obj["data-date"];
});
//文本触发的弹出日历(竖版)
var oCal_7 = new Calendar({
id: "#J_Cal_7",
isPopup: !0,
isPrevBtn: !0,
isNextBtn: !0,
isCloseBtn: !0,
count: 2
});
//只要限制容器宽度即可
oCal_7.container.style.width = 203 + "px";
</script>
注明:jquery的日历控件和日历控件的css文件本文章不提供大家可百度后再下载。
http://m.bbyears.com/wangyezhizuo/34491.html
推荐访问: