日期控件-1.javascript实现简易日历

最新推荐文章于 2020-12-21 01:06:30 发布
最新推荐文章于 2020-12-21 01:06:30 发布
阅读量786 收藏
点赞数
分类专栏： 控件 文章标签： date 日历 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fish0227/article/details/3638346
版权
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>无标题文档</title>
  6. <script type="text/javascript">
  7. /*  function show(){
  8.         var tex1 = document.getElementById("tex1");
  9.         var tex2= document.getElementById("tex2");
  10.             var currentDate = new Date();
  11.             var date = new Date("1988","2","43");
  12.             alert(currentDate.getFullYear().toString() +  + currentDate.getMonth().toString() + currentDate.getDate().toString());
  13.     }*/
  14.     
  15.     var MonthListByLeap = new Array(31,29,31,30,31,30,31,31,30,31,30,31);   //闰年各月份天数
  16.     var MonthList = new Array(31,28,31,30,31,30,31,31,30,31,30,31);     //正常各月份天数
  17.     
  18.     //初始化当前月日历
  19.     function InitCalendar(){
  20.         var cDate = new Date();     //当前时间
  21.         ShowDate(cDate.getDate(),cDate.getMonth(),cDate.getYear());
  22.     }
  23.     
  24.     //显示日历
  25.     function ShowDate(date,month,year){     
  26.         var table = document.getElementById("dt_Date");         //日历表ID
  27.         var rowIndex =1 ;       //显示行索引
  28.         var _date = new Date(year,month);       //月份信息  
  29.         for(var i = 0;i < parseInt(MonthListByLeap[parseInt(month)]);i++){
  30.             _date.setDate(i+1);     //设置日期
  31.             var day = i+1;      //日
  32.             table.rows[rowIndex].cells[0].style.background="#B1D3EC";   //设置周日的背景色
  33.             table.rows[rowIndex].cells[0].style.color="#ffffff";        //设置周日的字体颜色
  34.             
  35.             if(parseInt(i)+1 == parseInt(date)){
  36.                 table.rows[rowIndex].cells[parseInt(_date.getDay())].innerHTML="<strong>"+day.toString()+"</strong>";
  37.             }
  38.             else{
  39.                 table.rows[rowIndex].cells[parseInt(_date.getDay())].innerText = day;   //显示日期          
  40.             }
  41.             if(_date.getDay() == "6")
  42.                 rowIndex += 1;
  43.         }
  44.     }
  45. </script>
  46. <style type="text/css">
  47. <!--
  48. .STYLE11 {color: #FFFFFF}
  49. -->
  50. </style>
  51. </head>
  53. <body οnlοad="InitCalendar()">
  54. <table border="1" bordercolor="#FFFFFF" cellspacing="0" cellpadding="1" id="dt_Date" style="border-bottom-color:#FFFFFF; background-color:#EEEEEE; font-size:12px">
  55.   <tr bgcolor="#6CAAD9">
  56.     <td width="15" height="15" align="center"><span class="STYLE11">日</span></td>
  57.     <td width="15" height="15" align="center">一</td>
  58.     <td width="15" height="15" align="center">二</td>
  59.     <td width="15" height="15" align="center">三</td>
  60.     <td width="15" height="15" align="center">四</td>
  61.     <td width="15" height="15" align="center">五</td>
  62.     <td width="15" height="15" align="center">六</td>
  63.   </tr>
  64.   <tr>
  65.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  66.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  67.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  68.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  69.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  70.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  71.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  72.   </tr>
  73.   <tr>
  74.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  75.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  76.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  77.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  78.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  79.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  80.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  81.   </tr>
  82.   <tr>
  83.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  84.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  85.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  86.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  87.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  88.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  89.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  90.   </tr>
  91.   <tr>
  92.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  93.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  94.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  95.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  96.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  97.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  98.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  99.   </tr>
  100.   <tr>
  101.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  102.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  103.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  104.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  105.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  106.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  107.     <td width="15" height="15" align="center" bgcolor="#E7F3FE"> </td>
  108.   </tr>
  109. </table>
  110. </body>
  111. </html>

新手可以做下参考,也希望大侠们给小弟点指教,谢

Fish0227
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端vue仿安卓系统日历选择器
hello，是翠花呀
04-12 769
终于坑坑坑上了… 描述 这是一个基于vue的日期选择组件，支持按周和按月份显示(默认按周显示，下滑按月显示)。 安装 npm install vv-calendar -s 使用 属性 name type Value type string month / week，分别代表显示周、月，和只显示周。 configDayData array 在某些天上需要加上的标识数据 ...
安卓简单日历的实现
热门推荐
时间杀手Time的博客
08-24 1万+
最近无聊在做一个项目，需要用到日历。日历并不需要太复杂，只需要能够简单的查看就行，所以我选用了java提供的Calendar类，和安卓的gridView组合的形式.
js仿写日历
huanhuan03的博客
05-14 304
js仿写日历 日历 纯js写日历 js日历
功能完善的 jQueryUI 日期框服务器控件 - JQueryElement [3]
weixin_34345753的博客
07-14 90
已经有一段时间没有写文章了, 上次为大家介绍了 jqueryui 的按钮控件, 本次将说明 JQueryElement 实现的日期框控件. 下下面是包含日期控件的 Datepicker1.aspx: 1<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Datepicker1.aspx.cs"Inherits="D...
WdatePicker.js的使用方法 帮助文档 使用说明(时间控件)
weixin_30625691的博客
07-19 684
4. 日期范围限制静态限制注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致你可以给通过配置minDate(最小日期),maxDate(最大日期)为静态日期值,来限定日期的范围 示例4-1-1 限制日期的范围是 2006-09-10到2008-12-20<input id="d411" class="Wdate" type="text" onfocus=...
Jquery UI的日历控件datepicker限制日期
xidajiancun
12-30 257
JQuery.ui.Datepicker是一个很强大的日期选择控件，定制性很强。朱最近在做一个旅馆预订的小功能，要求用户在填写订单选择入住日期时，要将已经被预订出的日期置为不可用，查些资料，看看JS，原来可以使用beforeshowday来控制每一天的格式。主要代码如下： varorderDays=[[4,30,2010],[5,1,2010],[5,14,2010...
javascript实现的简易的DatePicker日历
12-13
JavaScript 实现简易DatePicker日历控件 在网页开发中，日期选择器（DatePicker）是一个常见的交互元素，用于方便用户输入或选择日期。虽然jQuery UI 和 YUI 等库已经提供了功能完备、兼容性良好的DatePicker组件，...
jQuery控件简易日历表格代码.zip
07-05
本文将详细介绍名为"jQuery控件简易日历表格代码"的实现方式，以及其在不同浏览器（如Firefox、Chrome和IE）中的兼容性。 首先，让我们理解jQuery的基本概念。jQuery是JavaScript的一个库，它简化了DOM操作、事件...
js 简易的日历控件.zip
11-01
这个“js简易的日历控件”压缩包可能包含了一个简单的JavaScript实现，用于创建一个自定义的日历组件。下面我们将深入探讨JavaScript中的日历控件及其相关知识。 首先，我们需要理解JavaScript的基础。JavaScript是...
js 简易的日历控件
06-06
1. **DOM操作**：日历控件需要动态地在网页上生成元素，这需要利用JavaScript对文档对象模型（DOM）进行操作。例如，可以使用`document.createElement()`创建新的HTML元素，`appendChild()`将元素添加到指定父节点，...
My97DatePicker
weixin_30872499的博客
07-14 2751
1. 简介 目前的版本是:4.0 Prerelease 发布于2008-04-02 2. 注意事项 My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名 My97DatePicker.htm是必须文件,不可删除 各目录及文件的用途: WdatePicker.js 配置文件,在调用的地方仅需使用...
js 是实现网页日期控件
Query!
07-03 997
var calenderMonth = 0; function JCalendar(year, month, date) { var _date = arguments.length == 0 ? new Date() : new Date(year, month - 1, date); this.year = _date.getFullYear(); this.month = _date.get
jquery年月日时分秒控件_jQuery DateTimePicker 日期和时间插件
weixin_39907311的博客
12-21 342
1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],monthStatus: '选择月份',yearStatus: '选择年份',weekHeader: '周',weekStatus: '年内周次',dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],dayN...
DatePicker - 基于jQuery 1.7的日期选择控件
zwx622的专栏
10-20 953
单文件高度自定义完善的配置参数　jquery.DatePicker.js(未压缩) 基本的文本框选区 $('#picker_1').datePicker({followOffset : [0, 24]}}); 给定默认值 $('#picker_2').val('2012-12-12').datePicker({followOffset:[0
可能是第十好的Android 开源 日历 Calendar 仿小米
天海行者的专栏
10-25 1万+
SuperCalendar 简介 博主现在工作在一家教育公司，最近公司的产品狗扔过来一个需求，说要做一个可以周月切换的课表，可以展示用户在某一天的上课安排。接到这个任务之后我研究了很多的日历控件，并且抽出了一个calenderlib。先看一下最后的项目中的效果： 月模式.png 周模式.png 看到本篇文章的同学估计也是实验课或者项目需求中需要一个日历表，当我接到这个需求的时候，当时脑
AzurePyblobLogging-1.0.8-py3-none-any.whl.zip
09-11
AzurePyblobLogging-1.0.8-py3-none-any.whl.zip
基于ssm的大学运动场地管理系统设计与实现.docx
09-11
基于ssm的大学运动场地管理系统设计与实现.docx
Sigrity-SPEED2000-What’s New in Sigrity SPEED2000 Technology.rar
最新发布
09-11
Sigrity-SPEED2000_What’s New in Sigrity SPEED2000 Technology.rar 在Sigrity 2022.1基础版本中，Sigrity没有重大增强 SPEED2000技术。 相关文件 ■ SPEED2000用户指南 ■ SPEED2000入门指南 注：要了解其他Sigrity产品中的新功能和增强功能，请参阅Cadence Sigrity和系统分析2022.1中的新增功能。
基于ssm的青少年体质健康数据管理与分析系统设计与实现.docx
09-11
基于ssm的青少年体质健康数据管理与分析系统设计与实现.docx
vue-calendar.rar-vue -elementui 日历控件-考勤日历表
05-01
这个“vue-calendar.rar”文件是一个基于Vue和ElementUI框架开发的日历控件，可以用于创建考勤日历表。它提供了丰富的功能和组件，例如可以设置日期范围、选择日期、添加事件和定制样式等。在使用这个日历控件时，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值