1.4.5. 日期选择

框架提供了方便的日期选择组件实现机制，例子代码如下：

<input id="mycal2" type="text" class="comp" comp="type:'calendar',ifFormat:'%Y-%m-%d'">

只需要指定class为comp，并对comp属性进行组件设置，JSON对象数据格式(不含大括号)。type为calendar表示该组件为日历选择组件，将来还会扩展 为其它组件支持，比如选人组件等；其它参数为日期选择组件相关参数，例子中ifFormat为日期格式定义。框架将对该文本框自动处理为日期选择组件。 选择日期时间并显示时间的示例如下 

<input id="mycal2" type="text" class="comp" comp="type:'calendar',ifFormat:'%Y-%m-%d %H:%M',showsTime:true">

实例

开始时间:<input class="comp" id="fromdate" type="text" value="" comp="type:'calendar',dateString:'2012-12-16 17:59',onUpdate:checkfrom,ifFormat:'%Y-%m-%d %H:%M',showsTime:true,cache:false">
结束时间：<input class="comp" id="todate" type="text" value="2012-12-16 17:59" comp="type:'calendar',onUpdate:checkto,ifFormat:'%Y-%m-%d %H:%M',showsTime:true,cache:false">
<script type="text/javascript">
$(function(){
 var date=new Date();
 var fromDate=date.print("%Y-%m-%d %H:%M");
 toDate=date.getTime() + 1800000;//结束时间：默认显示当前时间加30分钟
 $("#fromdate").val(fromDate);//开始时间：默认显示当前时间
 $("#todate").val(new Date(toDate).print("%Y-%m-%d %H:%M"));
})
function checkfrom(obj){
 var beginDate = $("#fromdate").attr("value");//初始时间 string
 var endDate = $("#todate").attr("value");//结束时间 string
 var p=obj.params;
 var format=p.ifFormat;//日期格式
 var now=new Date().print(format);//当前时间
 var formDate=obj.date;//开始时间对象
 var update = (obj.dateClicked || p.electric);
 if (update && p.singleClick && obj.dateClicked){//判断日历是否关闭
  if(beginDate>now&&beginDate!=endDate){  //如果开始时间大于当前时间且不等于结束时间
   var toDate=formDate.getTime() + 1800000//借宿时间加30分钟
   $("#todate").val(new Date(toDate).print(format))
  }
 } 
}
function checkto(obj){
 var endDate = $("#todate").attr("value");//结束时间 string
 var p=obj.params;
 var format=p.ifFormat;//日期格式
 var now=new Date().print(format);//当前时间
 var toDate=initDate(endDate);//结束时间对象
 var update = (obj.dateClicked || p.electric);
 if (update && p.singleClick && obj.dateClicked){//判断日历是否关闭
  if(endDate<now){ //如果结束时间小于开始时间
   var formDate=toDate.getTime() - 1800000//开始时间减30分钟
   $("#fromdate").val(new Date(formDate).print(format))
  }
 }
}
</script>

<a id="calendar" href="javascript:fff('calendar')">时间控件</a>
<script type="text/javascript">

 function fff(id){
  $.calendar({
   displayArea:id,
   //position:[500,200],
   returnValue: true,
   date:new Date(),
   onUpdate:test,
   autoShow:true,
   ifFormat:"%Y-%m-%d %H:%M",
   daFormat:"%Y-%m-%d %H:%M",
   showsTime:true,
   isClear:false
     });
 }

 function test(date){
  //alert(date)
 }
</script>

属性

属性 类型 描述
displayArea string 要绑定日期控件的ID
ifFormat string 日期选择结果的格式
showsTime boolean 是否显示时间选择
autoShow boolean 是否直接显示时间日历
dateString string 控件打开显示的默认日期
position [] 显示的相对位置[10,10]
onUpdate function 选择日期后执行的方法

Prev  Up  Next
  Home