[jquery日历插件]jquery日历组件使用实例

时间:2017-07-31  来源:jquery  阅读:

我们先来看几个样式的效果图片。

一,双日历(本月开始)选择范围今天-下个月的今天

2、三排日历(本月开始)显示上下月按钮,2012-2020节假日特殊显示

3、四排日历(指定日期为2012年12月21日)显示上下月按钮

完整的日历组件使用实例

 代码如下

jquery日历组件使用实例







点我也能弹出日历(竖版)

单个日历(本月)





单个日历(本月)开启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文件本文章不提供大家可百度后再下载。

[jquery日历插件]jquery日历组件使用实例

http://m.bbyears.com/wangyezhizuo/34491.html

推荐访问:
相关阅读 猜你喜欢
本类排行 本类最新