JS 日历
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="SCM_WEB.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="js/common/libs/jquery/jquery-1.10.2.min.js" type="text/javascript"></script>
<script language="JavaScript">
var lunarInfo = new Array(
0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2,
0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977,
0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970,
0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950,
0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557,
0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5d0, 0x14573, 0x052d0, 0x0a9a8, 0x0e950, 0x06aa0,
0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0,
0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b5a0, 0x195a6,
0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570,
0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0,
0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5,
0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930,
0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530,
0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45,
0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0)
var solarMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var Animals = new Array("鼠", "牛", "虎", "兔", "龙", "蛇", "马", "羊", "猴", "鸡", "狗", "猪");
var solarTerm = new Array("小寒", "大寒", "立春", "雨水", "惊蛰", "春分", "清明", "谷雨", "立夏", "小满", "芒种", "夏至", "小暑", "大暑", "立秋", "处暑", "白露", "秋分", "寒露", "霜降", "立冬", "小雪", "大雪", "冬至");
var sTermInfo = new Array(0, 21208, 42467, 63836, 85337, 107014, 128867, 150921, 173149, 195551, 218072, 240693, 263343, 285989, 308563, 331033, 353350, 375494, 397447, 419210, 440795, 462224, 483532, 504758);
var nStr1 = new Array('日', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十');
var nStr2 = new Array('初', '十', '廿', '卅');
//公历节日
var sFtv = new Array(
"0101 元旦",
"0214 情人节",
"0308 妇女节",
"0312 植树节",
"0315 消费者权益日",
"0401 愚人节",
"0501 劳动节",
"0504 青年节",
"0512 护士节",
"0601 儿童节",
"0701 建党节",
"0801 建军节",
"0910 教师节",
"0928 孔子诞辰",
"1001 国庆节",
"1006 老人节",
"1024 联合国日",
"1224 平安夜",
"1225 圣诞节")
//农历节日
var lFtv = new Array(
"0101 春节",
"0115 元宵节",
"0505 端午节",
"0707 七夕情人节",
"0715 中元节",
"0815 中秋节",
"0909 重阳节",
"1208 腊八节",
"1224 小年")
//返回农历y年的总天数
function lYearDays(y) {
var i, sum = 348;
for (i = 0x8000; i > 0x8; i >>= 1) sum += (lunarInfo[y - 1900] & i) ? 1 : 0;
return (sum + leapDays(y));
}
//返回农历y年闰月的天数
function leapDays(y) {
if (leapMonth(y)) return ((lunarInfo[y - 1900] & 0x10000) ? 30 : 29);
else return (0);
}
//判断y年的农历中那个月是闰月,不是闰月返回0
function leapMonth(y) {
return (lunarInfo[y - 1900] & 0xf);
}
//返回农历y年m月的总天数
function monthDays(y, m) {
return ((lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29);
}
//算出当前月第一天的农历日期和当前农历日期下一个月农历的第一天日期
function Dianaday(objDate) {
var i, leap = 0, temp = 0;
var baseDate = new Date(1900, 0, 31);
var offset = (objDate - baseDate) / 86400000;
this.dayCyl = offset + 40;
this.monCyl = 14;
for (i = 1900; i < 2050 && offset > 0; i++) {
temp = lYearDays(i)
offset -= temp;
this.monCyl += 12;
}
if (offset < 0) {
offset += temp;
i--;
this.monCyl -= 12;
}
this.year = i;
this.yearCyl = i - 1864;
leap = leapMonth(i); //闰哪个月
this.isLeap = false;
for (i = 1; i < 13 && offset > 0; i++) {
if (leap > 0 && i == (leap + 1) && this.isLeap == false) { //闰月
--i; this.isLeap = true; temp = leapDays(this.year);
}
else {
temp = monthDays(this.year, i);
}
if (this.isLeap == true && i == (leap + 1)) this.isLeap = false; //解除闰月
offset -= temp;
if (this.isLeap == false) this.monCyl++;
}
if (offset == 0 && leap > 0 && i == leap + 1)
if (this.isLeap) { this.isLeap = false; }
else { this.isLeap = true; --i; --this.monCyl; }
if (offset < 0) { offset += temp; --i; --this.monCyl; }
this.month = i;
this.day = offset + 1;
}
//返回公历y年m+1月的天数
function solarDays(y, m) {
if (m == 1)
return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28);
else
return (solarMonth[m]);
}
//记录公历和农历某天的日期
function calElement(sYear, sMonth, sDay, week, lYear, lMonth, lDay, isLeap) {
this.isToday = false;
//公历
this.sYear = sYear;
this.sMonth = sMonth;
this.sDay = sDay;
this.week = week;
//农历
this.lYear = lYear;
this.lMonth = lMonth;
this.lDay = lDay;
this.isLeap = isLeap;
//节日记录
this.lunarFestival = ''; //农历节日
this.solarFestival = ''; //公历节日
this.solarTerms = ''; //节气
}
//返回某年的第n个节气为几日(从0小寒起算)
function sTerm(y, n) {
var offDate = new Date((31556925974.7 * (y - 1900) + sTermInfo[n] * 60000) + Date.UTC(1900, 0, 6, 2, 5));
return (offDate.getUTCDate())
}
//保存y年m+1月的相关信息
var fat = mat = 9;
var eve = 0;
function calendar(y, m) {
fat = mat = 0;
var sDObj, lDObj, lY, lM, lD = 1, lL, lX = 0, tmp1, tmp2;
var lDPOS = new Array(3);
var n = 0;
var firstLM = 0;
sDObj = new Date(y, m, 1); //当月第一天的日期
this.length = solarDays(y, m); //公历当月天数
this.firstWeek = sDObj.getDay(); //公历当月1日星期几
if ((m + 1) == 5) { fat = sDObj.getDay() }
if ((m + 1) == 6) { mat = sDObj.getDay() }
for (var i = 0; i < this.length; i++) {
if (lD > lX) {
sDObj = new Date(y, m, i + 1); //当月第一天的日期
lDObj = new Dianaday(sDObj); //农历
lY = lDObj.year; //农历年
lM = lDObj.month; //农历月
lD = lDObj.day; //农历日
lL = lDObj.isLeap; //农历是否闰月
lX = lL ? leapDays(lY) : monthDays(lY, lM); //农历当月最後一天
if (lM == 12) { eve = lX }
if (n == 0) firstLM = lM;
lDPOS[n++] = i - lD + 1;
}
this[i] = new calElement(y, m + 1, i + 1, nStr1[(i + this.firstWeek) % 7], lY, lM, lD++, lL);
if ((i + this.firstWeek) % 7 == 0) {
this[i].color = 'red'; //周日颜色
}
}
//节气
tmp1 = sTerm(y, m * 2) - 1;
tmp2 = sTerm(y, m * 2 + 1) - 1;
this[tmp1].solarTerms = solarTerm[m * 2];
this[tmp2].solarTerms = solarTerm[m * 2 + 1];
if ((this.firstWeek + 12) % 7 == 5) //黑色星期五
this[12].solarFestival += '黑色星期五';
if (y == tY && m == tM) this[tD - 1].isToday = true; //今日
}
//用中文显示农历的日期
function cDay(d) {
var s;
switch (d) {
case 10:
s = '初十'; break;
case 20:
s = '二十'; break;
break;
case 30:
s = '三十'; break;
break;
default:
s = nStr2[Math.floor(d / 10)];
s += nStr1[d % 10];
}
return (s);
}
//在表格中显示公历和农历的日期,以及相关节日
var cld;
function drawCld(SY, SM) {
var TF = true;
var p1 = p2 = "";
var i, sD, s, size;
cld = new calendar(SY, SM);
GZ.innerHTML = ' 【' + Animals[(SY - 4) % 12] + '】'; //生肖
for (i = 0; i < 42; i++) {
sObj = eval('SD' + i);
lObj = eval('LD' + i);
sObj.className = '';
sD = i - cld.firstWeek;
if (sD > -1 && sD < cld.length) { //日期内
sObj.innerHTML = sD + 1;
if (cld[sD].isToday) { sObj.style.color = '#9900FF'; } //今日颜色
else { sObj.style.color = ''; }
if (cld[sD].lDay == 1) { //显示农历月
lObj.innerHTML = '<b>' + (cld[sD].isLeap ? '闰' : '') + cld[sD].lMonth + '月' + (monthDays(cld[sD].lYear, cld[sD].lMonth) == 29 ? '小' : '大') + '</b>';
}
else { lObj.innerHTML = cDay(cld[sD].lDay); } //显示农历日
var Slfw = Ssfw = null;
s = cld[sD].solarFestival;
for (var ipp = 0; ipp < lFtv.length; ipp++) { //农历节日
if (parseInt(lFtv[ipp].substr(0, 2)) == (cld[sD].lMonth)) {
if (parseInt(lFtv[ipp].substr(2, 4)) == (cld[sD].lDay)) {
lObj.innerHTML = lFtv[ipp].substr(5);
Slfw = lFtv[ipp].substr(5);
}
}
if (12 == (cld[sD].lMonth)) { //判断是否为除夕
if (eve == (cld[sD].lDay)) { lObj.innerHTML = "除夕"; Slfw = "除夕"; }
}
}
for (var ipp = 0; ipp < sFtv.length; ipp++) { //公历节日
if (parseInt(sFtv[ipp].substr(0, 2)) == (SM + 1)) {
if (parseInt(sFtv[ipp].substr(2, 4)) == (sD + 1)) {
lObj.innerHTML = sFtv[ipp].substr(5);
Ssfw = sFtv[ipp].substr(5);
}
}
}
if ((SM + 1) == 5) { //母亲节
if (fat == 0) {
if ((sD + 1) == 7) { Ssfw = "母亲节"; lObj.innerHTML = "母亲节" }
}
else if (fat < 9) {
if ((sD + 1) == ((7 - fat) + 8)) { Ssfw = "母亲节"; lObj.innerHTML = "母亲节" }
}
}
if ((SM + 1) == 6) { //父亲节
if (mat == 0) {
if ((sD + 1) == 14) { Ssfw = "父亲节"; lObj.innerHTML = "父亲节" }
}
else if (mat < 9) {
if ((sD + 1) == ((7 - mat) + 15)) { Ssfw = "父亲节"; lObj.innerHTML = "父亲节" }
}
}
if (s.length <= 0) { //设置节气的颜色
s = cld[sD].solarTerms;
if (s.length > 0) s = s.fontcolor('limegreen');
}
if (s.length > 0) { lObj.innerHTML = s; Slfw = s; } //节气
if ((Slfw != null) && (Ssfw != null)) {
lObj.innerHTML = Slfw + "/" + Ssfw;
}
}
else { //非日期
sObj.innerHTML = '';
lObj.innerHTML = '';
}
}
}
//在下拉列表中选择年月时,调用自定义函数drawCld(),显示公历和农历的相关信息
function changeCld() {
var y, m;
y = CLD.SY.selectedIndex + 1900;
m = CLD.SM.selectedIndex;
drawCld(y, m);
}
//用自定义变量保存当前系统中的年月日
var Today = new Date();
var tY = Today.getFullYear();
var tM = Today.getMonth();
var tD = Today.getDate();
//打开页时,在下拉列表中显示当前年月,并调用自定义函数drawCld(),显示公历和农历的相关信息
function initial() {
CLD.SY.selectedIndex = tY - 1900;
CLD.SM.selectedIndex = tM;
drawCld(tY, tM);
}
//-->
</script>
<style>
td
{
border: none;
}
.is-today
{
font-weight: 900;
background: #ddd;
}
</style>
</head>
<body onload="initial()">
<center>
<form name="CLD">
<table>
<tr>
<td align="middle">
<table border="1" cellpadding="0" cellspacing="0" bordercolordark="#FFFFFF" bordercolor="#ffffff"
bordercolorlight="#EEEEEE" style="box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5)">
<tr height="52" style="text-align: center; font-weight: 900;">
<td colspan="7">
<font color="#555" style="font-size: 9pt">公历
<select name="SY" onchange="changeCld()" id="year" style="font-size: 9pt">
<script language="JavaScript">
for (i = 1900; i < 2050; i++) document.write('<option>' + i);
</script>
</select>
年
<select name="SM" onchange="changeCld()" style="font-size: 9pt" id="month">
<script language="JavaScript">
for (i = 1; i < 13; i++) document.write('<option>' + i);
</script>
</select>
月 </font><font color="#555" face="宋体" id="GZ" style="font-size: 12pt"></font>
<br>
</td>
</tr>
<tr align="middle" bgcolor="#e0e0e0">
<td width="54" style="font-size: 9pt; padding: 5pt;">
日
</td>
<td width="54" style="font-size: 9pt">
一
</td>
<td width="54" style="font-size: 9pt">
二
</td>
<td width="54" style="font-size: 9pt">
三
</td>
<td width="54" style="font-size: 9pt">
四
</td>
<td width="54" style="font-size: 9pt">
五
</td>
<td width="54" style="font-size: 9pt">
六
</td>
</tr>
<script language="JavaScript">
var gNum;
for (i = 0; i < 6; i++) {
document.write('<tr align=center>');
for (j = 0; j < 7; j++) {
gNum = i * 7 + j;
document.write('<td id="GD' + gNum + '" class="calendar" data="' + gNum + '"><font id="SD' + gNum + '" size=2 face="Arial Black"');
if (j == 0) document.write(' color=red');
if (j == 6) document.write(' color=#000080');
document.write(' TITLE=""> </font><br><font id="LD' + gNum + '" size=2 style="font-size:9pt"> </font></td>');
}
document.write('</tr>');
}
</script>
</table>
</td>
</tr>
</table>
</form>
</center>
</body>
<script src="js/KISSY/kissy.js" type="text/javascript"></script>
<script>
var S = KISSY, Event = S.Event, DOM = S.DOM;
//鼠标移到TD上判断是否存在日期，添加样式
Event.on('.calendar', 'mouseenter', function(ev) {
var id = $(ev.currentTarget).attr('data');
var day = S.one('#SD' + id).html().replace(/[]/g,""); //获取日
if (day.length != 0) {
DOM.css(ev.currentTarget, { 'cursor': 'pointer', 'background': ' #ccc','box-shadow': ' 0 5px 15px -5px rgba(0, 0, 0, 0.5)',' border-radius': ' 10px', });
}
})
//移除则取消样式
Event.on('.calendar', 'mouseleave', function(ev) {
DOM.css(ev.currentTarget, { 'cursor': 'pointer', 'background': ' none','box-shadow': ' none', })
})
//获取单击的年月日
Event.on('.calendar', 'click', function(ev) {
var id = $(ev.currentTarget).attr('data');
var day = S.one('#SD' + id).html(); //获取日
var year = S.one('#year').val(); //获取年
var month = S.one('#month').val(); //获取月
// alert("年" + year + "月" + month + "日" + day)
})
</script>
</html>
JS 日历的更多相关文章
- 简洁JS 日历控件 支持日期和月份选择
原文出处 以下这个JS日历控件是我的闲暇之余自己编写的,所有的代码全部在IE7/IE8/Firefox下面测试通过, 而且可以解决被iframe层遮盖的问题.现在只提供两种风格(简洁版和古典版)和两种 ...
- 百度的js日历
<title>百度的Js日历,值得一看</title> <style> body,td,.p1,.p2,.i{font-family:arial} body{mar ...
- JS日历控件优化(增加时分秒)
JS日历控件优化 在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时只支持 年月日 的日历控件,现在优化如下: 1. 在原基础上 支持 yyyy ...
- Js 日期选择，可以的一个页面中重复使用本JS日历，兼容IE及火狐等主流浏览器，而且界面简洁、美观，操作体验也不错。
<html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...
- JS日历控件集合----附效果图、源代码
http://www.cnblogs.com/yank/archive/2008/08/14/1267746.html 在进行开发的过程中,经常需要输入时间,特别是在进行查询.统计的时候,时间限定更为 ...
- js日历学习
<!DOCTYPE html><html><head><title>自己写的JS日历,适合学习</title><script src= ...
- 简洁js日历控件的使用
往Web工程添加纯js日历控件 在网上找到了DatePicker.js(http://www.cnblogs.com/shenyixin/archive/2013/03/11/2954156.html ...
- JS日历控件 灵活设置: 精确的时分秒.
在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时仅仅支持 年月日 的日历控件,如今优化例如以下: 1. 在原基础上 支持 yyyy-mm-dd 的年月 ...
- My97DatePicker{js日历插件}
VS自带了一个日历控件:Calendar,但是它有一个缺陷:即在选择,隐藏,显示的时候都会引起回传 Calendar控件的一些用法: 取值:Calendar1.SelectedDate.ToSh ...
- 创建一个js日历（原生JS实现日历）
前言 方法是有参考网上一些资料的,比如闰年的判断,比如每个月第一天是星期几的判断.不说太多,拆分出一个个函数,希望能描述尽可能的清晰明了. 一,判断闰年 //判断闰年 function runNian ...
随机推荐
- Python爬虫基础--爬取车模照片
import urllib from urllib import request, parse from lxml import etree class CarModel: def __init__( ...
- SpringMVC在对应绑定不同实体,但具有相同属性名的解决方案....
在springmvc中,可以对前台传递过来的参数进行与后台实体绑定(第二种方式相对较好). 比如: 前台页面: <form action="${pageContext.request. ...
- SpringBoot-CommandLineRunner实现预操作
前提:在使用SpringBoot构建项目时,我们通常需要做一些预先操作(类似开机自启动).而SpringBoot正好提供了一个简单的方式来实现–CommandLineRunner. CommandLi ...
- ASP.NET-AD开发技巧
分享一篇很好的介绍AD属性的文章 AD图片插件 如何给AD添加图片 http://www.doc88.com/p-9542932844870.html AD过滤条件 重命名ou使用user.Renam ...
- 排序算法Python（冒泡、选择、快速、插入、希尔、归并排序）
排序有内部排序和外部排序,内部排序是数据记录在内存中进行排序,而外部排序是因排序的数据很大,一次不能容纳全部的排序记录,在排序过程中需要访问外存. 我们通常所说的排序算法往往指的是内部排序算法,即数据 ...
- Java压缩和解压缩文件工具
Java压缩和解压缩文件工具 学习了: https://www.oschina.net/code/snippet_1021818_48130 http://blog.csdn.net/gaowen_h ...
- Android 自己定义View学习(2)
上一篇学习了基本使用方法,今天学一下略微复杂一点的.先看一下效果图 为了完毕上面的效果还是要用到上一期开头的四步 1,属性应该要有颜色,要有速度 <?xml version="1.0& ...
- EJB学习（四）——Enterprise Bean（企业Bean）和Entity Bean（实体Bean）
一.为什么使用EJB ? 企业Bean执行在EJB容器中.企业Bean实际上就是一个封装了业务逻辑的Java类,那么我们为什么要使用EJB呢 ? 1.最重要的原因:分布式.简要的说,分布式能够 ...
- UVA 10593 Kites DP
The season of flying kites is well ahead. So what? Let us make an inventory for kites. We are givena ...
- godoc工具使用
golang除了语言有一定的规范外,对于文档的生成也是非常不错的.仅仅要按go的格式来写的程序,都能够非常easy的生成文档. godoc命令介绍: http://golang.org/cmd/god ...