js日历

最新推荐文章于 2023-10-18 15:17:13 发布
最新推荐文章于 2023-10-18 15:17:13 发布
阅读量539 收藏
点赞数
分类专栏： javascript 文章标签： 日历 output function border date generator

<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
.TrTitle{
background:#f5d6d6;
height:20;
border-bottom:5px solid #FBEDED;
color:#000; cursor: hand;
}
.TrOver{
background:#f5d6d6;
height:18;
border:0px solid #999999;
color:#ec5657; cursor: hand;
}
.TdOver{
background:#FBEDED;
height:18;width:22px;
border:0px solid #cccccc;

color:#000;cursor: hand;
}
.TdOut{
background:#F5D6D6;
height:16;width:20px;
border:1px solid #FBAFB0;
color:#333333; cursor: hand;
}

.TdOver2{
background:#e6e6e6;
height:18;
border:1px solid #cccccc;
border-top:1px solid #ffffff;
border-left:1px solid #ffffff;
color:#666666;cursor: hand;
}
.TdOut2{
background:#e6e6e6;
height:18;
border:1px solid #ffffff;
border-top:1px solid #cccccc;
border-left:1px solid #cccccc;
color:#000000; cursor: hand;
}
</style>
</HEAD>

<BODY>

<script language="javascript">
document.writeln("<div id='DateGird' style='display:none;position: absolute;border:1px solid #EC5657;background-color: #fbeded;'></div>");
var Glob_YY=parseInt(new Date().getFullYear());
var Glob_MM=parseInt(new Date().getMonth()+1);
var Glob_DD=parseInt(new Date().getDate());

function shotable(InputName)
{
        var DateArray=["日","一","二","三","四","五","六"];
        var output=""
        output=output+"<div style='padding:5px;border:1px solid #fbafb0;'><table style='width:156px;font-size:9pt;cursor:default;border:0px solid #999999;' border='0' cellpadding='0' cellspacing='0'>";
        output=output+"<tr ><td colspan='7' class='TrTitle'><span ID='yearUU'>"+Glob_YY+"</span><span ID='monthUU'>"+Glob_MM+"</span><a href='#' οnclick='return;'>*</a></td></tr><table>";
        output=output+"<table style='font-size:12px;font-family: /"宋体/", Helvetica, sans-serif;cursor:default;border:0px solid #999999;border:1px solid #F5D6D6;' border='1' cellpadding='0' cellspacing='0'>";
        output=output+"<tr align='center'>";
        for(var i=0;i<7;i++) output=output+"<td class='TrOver'>"+DateArray[i]+"</td>";
        output=output+"</tr>";
        for(var i=0;i<6;i++){
        output=output+"<tr align='center'>";
                for(var j=0;j<7;j++) output=output+"<td id='TD' name='TD' class='TdOver' οnmοuseοver='datelist.OverBK(this,/""+InputName.name+"/")' msg=''>&nbsp;</td>";
                        output=output+"</tr>";
                }
        output=output+"</tabe></div>";

var selectMMInnerHTML = "<select ID=/"sMonth/" οnchange=/"setPan(document.getElementById('sYear').value,this.value)/" style='width:50px;background:#F5d6d6'>";
for (var i = 1; i < 13; i++)
{
    if (i == Glob_MM)
       {selectMMInnerHTML += "<option Author=wayx value='" + i + "' selected>" + i + "月" + "</option>/r/n";}
    else {selectMMInnerHTML += "<option Author=wayx value='" + i + "'>" + i + "月" + "</option>/r/n";}
}
selectMMInnerHTML += "</select>";
var selectYYInnerHTML = "<select ID=/"sYear/" οnchange=/"setPan(this.value,document.getElementById('sMonth').value)/" style='width:65px;background:#F5d6d6'>";
for (var i = 1999; i <= Glob_YY; i++)
{
    if (i == Glob_YY)
       {selectYYInnerHTML += "<option Author=wayx value='" + i + "' selected>" + i + "年" + "</option>/r/n";}
    else {selectYYInnerHTML += "<option Author=wayx value='" + i + "'>" + i + "年" + "</option>/r/n";}
}
selectYYInnerHTML += "</select>";
        document.getElementById("DateGird").innerHTML= output;
        document.getElementById("monthUU").innerHTML= selectMMInnerHTML;
        document.getElementById("yearUU").innerHTML= selectYYInnerHTML;
        //document.writeln(output);

}
function classGetDate(sName)
{
this.obj=sName || "uncDate";
//alert(Date.parse(this.obj.value));

this.YY=Glob_YY;
this.MM=Glob_MM;
this.DD=Glob_DD;
document.getElementById("DateGird").style.display="";
setPan(this.YY,this.MM);
}

function GetDay(y,m){
        this.TDate=function(){
                this.DayArray=[];
                for(var i=0;i<42;i++)this.DayArray[i]="&nbsp;";
                for(var i=0;i<new Date(y,m,0).getDate();i++)this.DayArray[i+new Date(y,m-1,1).getDay()]=i+1;
                return this.DayArray;
                }
        return this;
        }

function setPan(YY,MM)
{
var DArray=GetDay(YY,MM).TDate();
var TDArr=document.getElementsByName("TD");
if (MM<10){var showMM="0"+MM;}else{var showMM=MM;}
for(var i=0;i<TDArr.length;i++){
        if (Glob_DD==DArray[i]&&YY==new Date().getFullYear()&&MM==new Date().getMonth()+1){TDArr[i].className="TdOut";}else{TDArr[i].className="TdOver"}
        TDArr[i].innerHTML=DArray[i];
        if (DArray[i]<10){var showDD="0"+DArray[i];}else{var showDD=DArray[i];}
        TDArr[i].msg=YY+"-"+showMM+"-"+showDD;
        }
}

datelist={
        dfd:function (sName)
        {
        var dateGirdObj=document.getElementById("DateGird");
        //var i= sName.style.top


        dateGirdObj.style.top=cmGetY(sName)+20;
        dateGirdObj.style.left=cmGetX(sName);
        shotable(sName);
        classGetDate(sName);
        },
        OverBK:function(t,m){
               
                if(t.className!="TdOut"){
                       
                        t.οnmοuseοut=function(){t.className="TdOver";}
                }
                if(t.innerHTML!="&nbsp;")t.className="TdOut";
                t.οnclick=function(){
                        if (t.innerHTML!="&nbsp;"){//alert(t.innerHTML);

                                document.getElementById(m).value=t.msg;
                                t.className="TdOver";
                                document.getElementById("DateGird").style.display="none";
                        }
                }
               
        }
}


function cmGetX (obj){var x = 0;do{x += obj.offsetLeft;obj = obj.offsetParent;}while(obj);return x;}
function cmGetY (obj){var y = 0;do{y += obj.offsetTop;obj = obj.offsetParent;}while(obj);return y;}

</script>

开始时间：<input name="number4" type="text" id="number4" οnfοcus="datelist.dfd(this)" readOnly>
结束时间：<input name="ddd3" type="text" id="ddd3" οnfοcus="datelist.dfd(this)" readOnly>
</BODY>
</HTML>

bestchen_1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js日历控件
10-30
JavaScript（简称JS）日历控件是一种常见的网页交互元素，用于展示日期并允许用户添加、编辑和查看事件。这种控件通常包含一个日历视图，以月份为单位，每行显示一周，用户可以通过点击来选择日期。在这个特定的描述...
javascript日历
03-15
JavaScript日历插件是一种在网页上展示日期和时间的实用工具，它通常包含对公历和农历的支持，并可能包括节假日的标注。在这个特定的案例中，我们讨论的是一个设计简洁、扁平化风格的日历，它能够很好地与流行的前端...
js日历插件
h259077的博客
11-12 1113
日历前端插件
js日历日期计算核心代码
qq_24882601的博客
06-28 562
js日历算法
js 日历控件
weixin_48495574的博客
02-28 1074
仿日历的js代码
js制作日历
weixin_63794155的博客
09-21 1441
new Date()第3个参数默认为1，就是每个月的1号，将它设置为0后，new Date()会返回。可以获取y年第一天（1月1日）方法一：设置本月份天数参数为0 ，能返回当前月份总共天数。getDate()获取最后一天，即整月天数。，然后通过getDate()方法得到天数。
js写简单日历
Myd
11-22 4125
写日历主要的是要搞清楚2点：1，每个月的第一天是周几？ 2，每个月有多少天？清楚这2个之后就可以完成一个最简单的日历了。而这2个问题可以轻易的调用js的api获取到。
js日历代码注释笔记
weixin_74991353的博客
10-18 60
var rows=Math.ceil(tds/7) 上取整。var countDays=0 数每月从1日开始的单元格。var countBlanks=0 数1日前的空白单元格。让每月的每天对应星期。
JavaScript-制作日历
MyLove的博客
11-28 485
【代码】JavaScript-制作日历。
用 JavaScript 编写日历
allway2的博客
05-27 4742
概述 在本教程中，我将介绍使用几行 JavaScript 将日历渲染到网页上。日历将包括仅使用普通旧 JavaScript的月份和年份的下拉列表。流程如下： 将月份渲染到下拉列表中 将年份渲染到下拉列表中 呈现当前选择的月/年组合的天数 更改月份/年份时重新绘制日历 更改月份和/或年份将重新绘制日历以匹配给定月份和年份的正确日期。 如果你是 JavaScript 的初学者，或者只是需要更多的洞察力，我强烈推荐你可以在亚马逊上购买的 JavaScript Ninja 的秘密。这是一本扎实的读物，本
JS 日历
u013791665的博客
06-08 386
因为业务需求需要一个日历面板，然后就摸索了，接下来我来分享一下简单日历的制作原理。 　　 　　首先，我们要知道的是一年里面的每个月的天数，很显然这个问题我记得小学的时候我们老师就讲过，提起左手握拳，然后数食指到小拇指之间的间隙，一月大、二月小、三月大、四月小、五月大、六月小、七月大、八月大、九月小、十月大、十一月小、12月大。 　　 　　通过这样的数数，我们可以得到一年中每个月的天数，当然二
带有事件的简单 Javascript 日历
allway2的博客
05-29 1041
欢迎来到关于如何创建简单的纯 Javascript 日历的教程。您是否希望在不使用任何服务器端脚本的情况下开发日历 Web 应用程序？无论是商业项目、学校项目还是只是出于好奇——您来对地方了。本指南将引导您了解如何创建纯 Javascript 日历，所有这些都可以通过本地存储实现。继续阅读！ ⓘ 我在本教程开始时包含了一个包含所有源代码的 zip 文件，因此您不必复制粘贴所有内容……或者如果您只是想直接进入。 速记 如果您想将日历设置为从星期一开始一周，请cal.sMon = true在cale.
JS.rar_javascript 日历
09-19
首先，JavaScript日历通常用于提供用户友好的日期选择功能，常见于事件安排、预订系统或任何形式需要输入日期的应用。这个压缩包包含的"JS.doc"可能是一个详细的文档，讲解了实现这个日历组件的步骤和关键代码。文档...
js.rar_javascript 日历_js_推荐
09-14
描述中提到的"几款不错js日历, 个人从网上找到的推荐给大家"意味着我们将会讨论一些优秀的JavaScript日历插件或库，这些资源可能是开发者在网上搜集并认为值得分享的。通常，这些日历组件具有易用性、灵活性和丰富的...
xiaoshuo-1721215737506.apk
最新发布
07-17
xiaoshuo-1721215737506.apk
最新机械设计课程设计说明书14643.doc
07-17
说明书
2024年欧洲铝焊丝市场主要企业市场占有率及排名.docx
07-17
2024年欧洲铝焊丝市场主要企业市场占有率及排名.docx
出货单（商品出货登记明细单）-Excel 模版
07-17
【作品名称】：出货单（商品出货登记明细单）-Excel 模版 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
ktyx 工作工具网址存档
07-17
ktyx 工作工具网址存档

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值