calendar日期控件的使用

最新推荐文章于 2024-02-10 19:54:31 发布

原创最新推荐文章于 2024-02-10 19:54:31 发布 · 871 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#控件

时间控件专栏收录该内容

0 篇文章

订阅专栏

该博客介绍了如何在HTML页面中使用JavaScript实现一个calendar日期控件，包括引入相关CSS和JS文件，设置校验日期的JavaScript函数以及展示日期选择器的触发方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="<%=request.getContextPath()%>/resources/js/common/calendar.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/common/calendar.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/common/calendar-setup.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/common/calendar-zh.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/jslib/jquery.js"></script>
<script type="text/javascript">
//校验日期
    function checkDateTime(str){
    var r = str.match(/^(\d{4})(\/)(\d{2})\2(\d{2})$/);
    if(r==null) {
      alert("日期格式不对,格式为YYYY/MM/DD!");
      return false;
    }
    var d= new Date(r[1], r[3]-1, r[4]);
    if(!(d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4])){
      alert("日期输入不正确!");
      return false;
    }
    return true;
}
</script>
</head>
<body>
开始日期 <input type="text" name="startDate" maxlength="10" value="2013/11/18" id="startDate"
onkeydown="javascript:if((this.value.length==4||this.value.length==7)&&event.keyCode!=8&&event.keyCode!=46){this.value=this.value+'/'}"
onblur="checkDateTime(this.value);"
/>
<a onclick="return showCalendar('start','startDate','y/mm/dd');">
  <img alt="时间" src="<%=request.getContextPath()%>/resources/js/common/calendar.jpg" height=18 width=24>
</a>
</body>
</html>