datetimepicker

1, Struts2里的datetimepicker(注意与JAAS的冲突)
把struts2-dojo-plugin-xxx.jar放到WEB-INF/lib下

<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<sx:head/> //parseContent="true",

<s:form action="dateAction">
<sx:datetimepicker name="startdate" label="myDate" displayFormat="yyyy-MM-dd" value="%{'today'}"/>
<s:submit value="submit"></s:submit>
</s:form>

生成java.util.Date类的startdate的属性,在dateAction中设置该属性的setter和getter,来获得该属性,并进而传递到目的jsp中。

onchange不触发的问题
There are 2 steps involved in registering an event listener with the widget.

1.Call the dojo.addOnLoad() function.
2.Register your callback function to fire on the onValueChanged event.

<script type="text/javascript">  
function initDatetimePicker() {  
     var datepicker = dojo.widget.byId("enddate");  
     dojo.event.connect(datepicker, "onValueChanged", myCallback );  
 }
function myCallback(){
    var sdt = dojo.widget.byId("startdate").getValue();
    var edt = dojo.widget.byId("enddate").getValue();
    if(sdt>edt){
        dojo.widget.byId("enddate").setValue(sdt);
    }
}  
dojo.addOnLoad(initDatetimePicker);      
</script>   
   
 <s:form theme="simple" action="someAction">  
     <sx:datetimepicker name="startdate" id="startdate" label="startDate"
        displayFormat="yyyy-MM-dd" value="%{'today'}"/>                
     <sx:datetimepicker name="enddate" id="enddate" label="endDate"
        displayFormat="yyyy-MM-dd" value="%{'today'}"/>

     <s:submit value="subbbb"/>
 </s:form>


注意:
To access the the date selected by the user in your callback function you simply call the getDate() function on the datetimepicker widget:
var date = dojo.widget.byId("datepicker").getDate();
在实际测试中
var sdt = dojo.widget.byId("startdate").getValue();
dojo.widget.byId("enddate").setValue(sdt);
就可以实现赋值和取值了。

2, jQuery的Datepicker
详细内容:http://docs.jquery.com/UI/Datepicker#option-navigationAsDateFormat
//直接在网页上显示一个Datepicker,或者通过点选文本框或按钮来显示Datepicker,具有相关联ID的组件都是<input type="text" id="myDatepicker"/>,
    而用$("#myDatepicker").datepicker({
    showOn: 'button',//或者 'focus'或'both',默认值是'focus'
    buttonText: 'Calendar'
    });
即其中的showOn类型来决定是点选文本框还是按钮来显示Datepicker。并且这个文本框会自动与Datepicker关联。
而要另外关联点击内容显示的话,通过altField属性来设置。
例:
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

//通过焦点进入文本框datepicker1出现Datepicker,点击Datepicker结果显示在本文本框,Datepicker自动消失
<script type="text/javascript">
  $(document).ready(function() {
      $("#myDatepicker").datepicker();        
  });
  </script>
</head>
...
<input type="text" id="myDatepicker"/>
...

//在创建Datepicker的时候设置多个属性
$("#datepicker2").datepicker({
    showOn: 'button',    //非末属性后加,分开
    buttonText: 'Calendar'    //末属性后不用加,
    });

//Datepicker的属性的设定
$.datepicker.setDefaults();好像不起作用。

//通过.datepicker('option',...,...);来设置,必须先init datepicker才能再设置datepicker的option
//代表设置datepicker的...的属性值为...,但不执行创建datepicker();   
$("#datepicker").datepicker('option',...,...); 

posted @ 2012-01-29 13:21  lastren  阅读(843)  评论(0编辑  收藏  举报