My97DatePicker日历控制按日、按周和按月选择

最新推荐文章于 2023-03-16 13:44:23 发布

iteye_8264

最新推荐文章于 2023-03-16 13:44:23 发布

阅读量688

点赞数

文章标签：前端 javascript java ViewUI

My97DatePicker日历控制按日、按周和按月选择

1、设计源码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>日历控件</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="scripts/jquery-1.11.1.js"></script>
	<script type="text/javascript" src="scripts/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript">
         $(function(){
              $("#reset").click(function(){
                    
              });
         });
    </script>
  </head>
  
  <body>
     <table>
        <tr>
          <td>
            <label>按日统计：</label>
            <input id="byDay" type="text" class="Wdate" onClick="WdatePicker({dateFmt:'yyyy-MM-dd'})"/>
          </td>
          <td>
            <label>按周统计：</label>
            <input type="text" class="Wdate" id="byWeek" onFocus="WdatePicker({isShowWeek:true,onpicked:function() {$dp.$('d122_1').value=$dp.cal.getP('W','W');$dp.$('d122_2').value=$dp.cal.getP('W','WW');}})"/>
          </td>
          <td>
            <label>按月统计：</label>
            <input class="Wdate" type="text" id="byMonth" onFocus="WdatePicker({dateFmt:'yyyy-MM'})"/>
          </td>
          <td>
            <input type="reset" id="reset" value="重置"/>
          </td>
        </tr>
     </table>
  </body>
</html>

2、设计结果