带农历的jquery日期控件样式和代码

本文介绍了一种使用jQuery实现的带有农历功能的日期选择器,包括页面样式、JavaScript交互逻辑以及农历转换函数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

jquery 做的日期选择 (带农历)

-----------------------------------------------效果图如下--------------------------------------------


------------------------------------------------页面css-----------------------------------------------

*{
font-size: 12px;
margin: 0px;
padding: 0px;
}
#time_body {
 width: 735px;
 margin-right: auto;
 margin-left: auto;
 height: auto;
 background-color: #BBE9FF;
}
#top {
 float: left;
 height: 25px;
 width: 100%;
 line-height: 25px;
 text-align: center;
 background-color: #BBE9FF;
}
#upMonth {
 float: left;
 width: 105px;
 height: 25px;
}
#now_month {
 height: 25px;
 width: 525px;
 float: left;
}
#botmMonth {
 float: left;
 height: 25px;
 width: 105px;
}
#days {
 float: left;
 height: auto;
 width: 100%;
 background-color: #F8F8F8;
}
.day {
 width: 103px;
 height: 48px;
 float: left;
 text-align: center;
 cursor: default;
 background-color: #E3E3E3;
 margin-right: 2px;
 margin-top: 2px;
 display: inline;
}
.shixiang {
 float: left;
 height: 15px;
 width: 100%;
}
.gongli {
 width: 100%;
 height: 17px;
 float: left;
 color: #06F;
 line-height: 17px;
}
.nongli {
 width: 100%;
 height: 15px;
 float: left;
 color: #666;
}
.nday {
 width: 105px;
 height: 50px;
 float: left;
 text-align: center;
 line-height: 25px;
 cursor: default;
}
.day:hover {
 background-color: #2DBBFF;
 font-weight: bold;
 color: #F00;
 background-image: url(img/add.gif);
 background-repeat: no-repeat;
 background-position: 65px 2px;
}
.weekDay {
 background-color: #00A8DF;
}
.wday {
 width: 103px;
 height: 25px;
 float: left;
 text-align: center;
 line-height: 25px;
 background-color: #6CF;
 margin-left: 2px;
 color: #FFF;
}
#wekday {
 float: left;
 width: 100%;
 height: auto;
} 


----------------------------------------------页面中js部分--------------------------------------------------------

 

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/nongli.js"></script>
<script>
var date;
$(function(){
  date = new Date();
  show(date); 
  $('#upMonth').click(function(){
   var month = date.getMonth();
   if(month>0){
    date.setMonth(month-1);
   }else{
    date.setYear(date.getYear()-1+1900);
    date.setMonth(11); 
   }
   show(date);
  });
  
  $('#botmMonth').click(function(){
   var month = date.getMonth();
   if(month<11){
    date.setMonth(month+1);
   }else{
    date.setYear(date.getYear()+1+1900);
    date.setMonth(0); 
   }
   show(date);
  });
  
 });

 <!-- 根据时间显示日历-->
 function show(date){
  $('#days').html('');
// getYear() 可改成 getFullYear()不用加1900
  $('#now_month').html(date.getYear()+1900+'年'+(1+date.getMonth())+'月');
  var days = getDays(date);
  var ndate = date;
  ndate.setDate(1);
  
  for(var i=0;i<ndate.getDay();i++){
   $('#days').append(' <div class="nday"> </div>');
  }
  
  for(var i=1;i<=days;i++){
   var ys = ndate.getDay()+i-1;
   if(ys%7==0){
    $('#days').append(' <div class="day weekDay" id="'+i+'" title="新增个人日程"><span class="gongli">'+i+'</span><span class="nongli">'+GetLunarDay(date.getYear()+1900, date.getMonth()+1, i)+'</span> <span class="shixiang"> </span> </div>');
   }else{
    $('#days').append(' <div class="day" id="'+i+'" title="新增个人日程" ><span class="gongli">'+i+'</span><span class="nongli">'+GetLunarDay(date.getYear()+1900, date.getMonth()+1, i)+'</span> <span class="shixiang"> </span> </div>');
   }
  }
  
  <!--双击事件-->
  $('#days .day').dblclick(function(){
   <!--location.href='http://www.baidu.com/s?wd='+(date.getYear()+1900)+'年'+(date.getMonth()+1)+'月'+this.id+'日';-->
   window.open('http://www.baidu.com/s?wd='+(date.getYear()+1900)+'年'+(date.getMonth()+1)+'月'+this.id+'日','哈哈');
  });
  
 }
 
 
 <!-- 根据日期获取本月总天数-->
 function getDays(date){
  var month = date.getMonth()+1;
  var year = date.getYear();
  if(year<200){
   year=year+1900;
  }
  if(month==2){
   if(isRun(year)){
    return 29;
   }else{
    return 28;
   }
  }else if(month==4 || month==6 || month==9 || month==11){
   return 30;
  }else{
   return 31; 
  }
 }
 
 <!-- 判断是否闰年-->
 function isRun(year){
  var run = false;
if((year%4==0 && year%100!=0)||(year%100==0 && year%400==0)){
   run = true;
  }
  return run;
 }
</script>
</head>
<body>
<div id="time_body">

  <div id="top">
 <div id="upMonth">上一月</div>
    <div id="now_month">2013年3月</div>
    <div id="botmMonth">下一月</div>
  </div>
 
  <div id="wekday">
   <div class="wday">星期日</div>
    <div class="wday">星期一</div>
    <div class="wday">星期二</div>
    <div class="wday">星期三</div>
    <div class="wday">星期四</div>
    <div class="wday">星期五</div>
    <div class="wday">星期六</div>
  </div>
 
  <div id="days">
   
   <!-- 每格的样式<div class="day">
      <span class="gongli">公历</span>
      <span class="nongli">农历</span>
      <span class="shixiang">待办事项</span>
    </div>-->
   
  </div>
 
</div>

---------------------------------------------nongli.js部分----------------------------------------

// JavaScript Document
     var CalendarData = new Array(100);
     var madd = new Array(12);
     var tgString = "甲乙丙丁戊己庚辛壬癸";
     var dzString = "子丑寅卯辰巳午未申酉戌亥";
     var numString = "一二三四五六七八九十";
     var monString = "正二三四五六七八九十冬腊";
     var weekString = "日一二三四五六";
     var sx = "鼠牛虎兔龙蛇马羊猴鸡狗猪";
     var cYear, cMonth, cDay, TheDate;
     CalendarData = new Array(0xA4B, 0x5164B, 0x6A5, 0x6D4, 0x415B5, 0x2B6, 0x957, 0x2092F, 0x497, 0x60C96, 0xD4A, 0xEA5, 0x50DA9, 0x5AD, 0x2B6, 0x3126E, 0x92E, 0x7192D, 0xC95, 0xD4A, 0x61B4A, 0xB55, 0x56A, 0x4155B, 0x25D, 0x92D, 0x2192B, 0xA95, 0x71695, 0x6CA, 0xB55, 0x50AB5, 0x4DA, 0xA5B, 0x30A57, 0x52B, 0x8152A, 0xE95, 0x6AA, 0x615AA, 0xAB5, 0x4B6, 0x414AE, 0xA57, 0x526, 0x31D26, 0xD95, 0x70B55, 0x56A, 0x96D, 0x5095D, 0x4AD, 0xA4D, 0x41A4D, 0xD25, 0x81AA5, 0xB54, 0xB6A, 0x612DA, 0x95B, 0x49B, 0x41497, 0xA4B, 0xA164B, 0x6A5, 0x6D4, 0x615B4, 0xAB6, 0x957, 0x5092F, 0x497, 0x64B, 0x30D4A, 0xEA5, 0x80D65, 0x5AC, 0xAB6, 0x5126D, 0x92E, 0xC96, 0x41A95, 0xD4A, 0xDA5, 0x20B55, 0x56A, 0x7155B, 0x25D, 0x92D, 0x5192B, 0xA95, 0xB4A, 0x416AA, 0xAD5, 0x90AB5, 0x4BA, 0xA5B, 0x60A57, 0x52B, 0xA93, 0x40E95);
     madd[0] = 0;
     madd[1] = 31;
     madd[2] = 59;
     madd[3] = 90;
     madd[4] = 120;
     madd[5] = 151;
     madd[6] = 181;
     madd[7] = 212;
     madd[8] = 243;
     madd[9] = 273;
     madd[10] = 304;
     madd[11] = 334;
function GetBit(m, n) {
         return (m >> n) & 1;
     }
     function e2c() {
         TheDate = (arguments.length != 3) ? new Date() : new Date(arguments[0], arguments[1], arguments[2]);
         var total, m, n, k;
         var isEnd = false;
         var tmp = TheDate.getYear();
         if (tmp < 1900) {
             tmp += 1900;
         }
         total = (tmp - 1921) * 365 + Math.floor((tmp - 1921) / 4) + madd[TheDate.getMonth()] + TheDate.getDate() - 38;
if (TheDate.getYear() % 4 == 0 && TheDate.getMonth() > 1) {
             total++;
         }
         for (m = 0; ; m++) {
             k = (CalendarData[m] < 0xfff) ? 11 : 12;
             for (n = k; n >= 0; n--) {
                 if (total <= 29 + GetBit(CalendarData[m], n)) {
                     isEnd = true; break;
                 }
                 total = total - 29 - GetBit(CalendarData[m], n);
             }
             if (isEnd) break;
         }
         cYear = 1921 + m;
         cMonth = k - n + 1;
         cDay = total;
         if (k == 12) {
             if (cMonth == Math.floor(CalendarData[m] / 0x10000) + 1) {
                 cMonth = 1 - cMonth;
             }
             if (cMonth > Math.floor(CalendarData[m] / 0x10000) + 1) {
                 cMonth--;
             }
         }
     }
function GetcDateString() {
         var tmp = "";
         tmp += tgString.charAt((cYear - 4) % 10);
         tmp += dzString.charAt((cYear - 4) % 12);
         tmp += "(";
         tmp += sx.charAt((cYear - 4) % 12);
         tmp += ")年 ";
         if (cMonth < 1) {
             tmp += "(闰)";
             tmp += monString.charAt(-cMonth - 1);
         } else {
             tmp += monString.charAt(cMonth - 1);
         }
         tmp += "月";
         tmp += (cDay < 11) ? "初" : ((cDay < 20) ? "十" : ((cDay < 30) ? "廿十" : "三十"));
         if (cDay % 10 != 0 || cDay == 10) {
             tmp += numString.charAt((cDay - 1) % 10);
         }
         return tmp;
     }
 
 
  function GetSmailDateString() {
         var tmp = "";
         if (cMonth < 1) {
             tmp += "(闰)";
             tmp += monString.charAt(-cMonth - 1);
         } else {
             tmp += monString.charAt(cMonth - 1);
         }
         tmp += "月";
         tmp += (cDay < 11) ? "初" : ((cDay < 20) ? "十" : ((cDay < 30) ? "廿十" : "三十"));
         if (cDay % 10 != 0 || cDay == 10) {
             tmp += numString.charAt((cDay - 1) % 10);
         }
         return tmp;
     }
 
function GetLunarDay(solarYear, solarMonth, solarDay) {
         //solarYear = solarYear<1900?(1900+solarYear):solarYear;
         if (solarYear < 1921 || solarYear > 2020) {
             return "";
         } else {
             solarMonth = (parseInt(solarMonth) > 0) ? (solarMonth - 1) : 11;
             e2c(solarYear, solarMonth, solarDay);
             return GetSmailDateString();
         }
     }


       忽然发现 我用的是

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值