您的位置：首页 > Web前端 > JQuery

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

2013-10-31 17:35 423 查看

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();
}
}

忽然发现我用的是

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

jquery 做的日期选择 （带农历）

jquery 做的日期选择（带农历）