123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151 |
- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
- <%
- String path = request.getContextPath();
- %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>日期</title>
- <!--框架必需start-->
- <script type="text/javascript" src="<%=path%>/libs/js/jquery.js"></script>
- <script type="text/javascript" src="<%=path%>/libs/js/language/cn.js"></script>
- <script type="text/javascript" src="<%=path%>/libs/js/framework.js"></script>
- <link href="<%=path%>/libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
- <link rel="stylesheet" type="text/css" id="skin" prePath="<%=path%>/"/>
- <link rel="stylesheet" type="text/css" id="customSkin"/>
- <!--框架必需end-->
- <!-- 日期选择框start -->
- <script type="text/javascript" src="<%=path%>/libs/js/form/datePicker/WdatePicker.js"></script>
- <!-- 日期选择框end -->
- </head>
- <body>
- <div class="box1" panelWidth="800">
-
- <fieldset>
- <legend>1、基本日期控件</legend>
- <input type="text" class="date"/>
- </fieldset>
- <div class="height_15"></div>
-
- <fieldset>
- <legend>2、选择日期+时间</legend>
- <input type="text" class="date" style="width:200px;" dateFmt="yyyy-MM-dd HH:mm:ss"/>
- </fieldset>
- <div class="height_15"></div>
-
- <fieldset>
- <legend>3、只选择时间</legend>
- <input type="text" class="date" dateFmt="HH:mm:ss"/>
- </fieldset>
- <div class="height_15"></div>
-
- <fieldset>
- <legend>4、自定义时间格式</legend>
- <input type="text" class="date" style="width:200px;" dateFmt="yyyy年MM月dd日HH时mm分ss秒"/>
- </fieldset>
- <div class="height_15"></div>
-
- <fieldset>
- <legend>5、日期控件默认有值</legend>
- <input type="text" class="date" value="2012-07-08"/>
- </fieldset>
- <div class="height_15"></div>
-
- <fieldset>
- <legend>6、动态生成日期控件</legend>
- <input type="button" value="点击生成日期控件" id="testBtn" onclick="createDate()"/>
- </fieldset>
- <div class="height_15"></div>
-
- <fieldset>
- <legend>7、日期控件动态赋值</legend>
- <input type="text" class="date" id="date-7"/>
- <input type="button" value="点击赋值" onclick="setValue()"/>
- </fieldset>
- <div class="height_15"></div>
-
- <fieldset>
- <legend>8、禁用/启用</legend>
- <input type="text" class="date" disabled="true" id="date-8"/>
- <br/>
- <input type="button" value="启用" onclick="enableSelect()" style="width:105px;"/>
- <input type="button" value="禁用" onclick="disableSelect()" style="width:105px;"/>
- </fieldset>
- <div class="height_15"></div>
-
- <fieldset>
- <legend>9、双日历</legend>
- <input class="date" type="text" doubleCal="true"/>
- </fieldset>
- <div class="height_15"></div>
-
- <fieldset>
- <legend>10、起止日期联动</legend>
- <input type="text" id="beginTime" class="dateIcon"/>
- <input type="text" id="endTime" class="dateIcon"/>
- </fieldset>
- <div class="height_15"></div>
-
- <fieldset>
- <legend>11、平面显示</legend>
- <div id="div1"></div>
- </fieldset>
- <div class="height_15"></div>
-
- <fieldset>
- <legend>12、选择今天之前</legend>
- <input class="dateIcon" type="text" onfocus="WdatePicker({skin:themeColor,maxDate:'%y-%M-%d'})"/>
- </fieldset>
- <div style="height:300px;"></div>
- </div>
- <script type="text/javascript">
- var dateSkin="blue";
- function initComplete(){
- //获取当前主题风格,用于设置日期控件的皮肤
- try {
- dateSkin=themeColor;
- }
- catch(e){}
-
- //自定义点击触发日期控件
- document.getElementById('beginTime').onfocus=function(){
- var endtimeTf=$dp.$('endTime');
- WdatePicker({
- skin:dateSkin,onpicked:function(){endtimeTf.focus();},maxDate:'#F{$dp.$D(\'endTime\')}'
- });
- }
- document.getElementById('endTime').onfocus=function(){
- //这里设置了最大日期为当前日期,如果不需要则把maxDate:'%y-%M-%d'去掉
- WdatePicker({skin:dateSkin,maxDate:'%y-%M-%d',minDate:'#F{$dp.$D(\'beginTime\')}'});
- }
-
- //平面显示
- WdatePicker({skin:dateSkin,eCont:'div1',onpicked:function(dp){alert('你选择的日期是:'+dp.cal.getDateStr())}})
- }
-
- //动态生成
- function createDate(){
- var $date=$('<input type="text" class="date" style="width:140px;" dateFmt="yyyy-MM-dd HH:mm:ss"/>');
- $("#testBtn").after($date);
- $date.render();
- }
-
- //设为不可用
- function disableSelect(){
- $("#date-8").attr("disabled",true);
- }
- //设为可用
- function enableSelect(){
- $("#date-8").attr("disabled",false);
- }
-
- //动态赋值
- function setValue(){
- $("#date-7").val("2012-07-08");
- }
- </script>
- </body>
- </html>
|