js 日历控件

最新推荐文章于 2025-12-01 22:54:44 发布

原创最新推荐文章于 2025-12-01 22:54:44 发布 · 697 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#日历 #float #date #function #class #html

本文介绍了一个基于HTML、CSS和JavaScript实现的简单日期选择器组件。该组件通过自定义脚本动态生成并显示指定月份的日历，并允许用户通过点击来选择日期。此外，还包含了前后翻页的功能。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <mce:script type="text/javascript"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .dateContain { width:200px;height:150px;border:1px solid #ccc;} .dateCt1{float:left;width:10%;height:20px;border-bottom:1px solid #ccc;text-align:center;cursor:pointer;} .dateCt2{float:left;width:80%;height:20px;border-bottom:1px solid #ccc;text-align:center;} .date_cen{float:left;width:100%;height:29px;} .date_dow{float:left;width:100%;height:100px;} .date_dow span,.date_cen span{float:left;width:14%;display:inline;cursor:pointer;} </style> </HEAD> <BODY> <input type="text" id="testDate" onclick="_initdate()"/> <div class="dateContain"> <div class="dateCt1" id="dateCtL" onclick="_click_month('L')"><</div> <div class="dateCt2" id="dateCt2"></div> <div class="dateCt1" id="dateCtR" onclick="_click_month('R')">></div> <div class="date_cen"> <span>sun</span><span>mon</span><span>tus</span><span>wen</span><span>tur</span><span>fri</span><span>sat</span> </div> <div class="date_dow" id="date_dow"></div> </div> <input type="text" id="testDate2" /> </BODY> </HTML>