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

最新推荐文章于 2025-07-14 13:19:52 发布

零点起航

最新推荐文章于 2025-07-14 13:19:52 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/csyuyaoxiadn/article/details/13775553

web前端专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一种使用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();
         }
     }

忽然发现我用的是