打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
jquery easyui datebox 的使用 .
看了jquery easyui databox的官方api,还可以加入倒是很简单,但是想要获得他的值和修改值就很费劲,不知道怎么弄,试了n次终于搞定。这里总结一下,供有相同问题的人查询。
1、 官方api介绍
DateBox
Extend from $.fn.combo.defaults. Override defaults with $.fn.datebox.defaults
Dependencies
combo calendar
Usage
<</span>input id="dd" type="text"></</span>input>
$('#dd').datebox({       required:true   });
Properties
The properties extend from combo, below is the added properties for datebox.
NameTypeDescriptionDefault
panelWidthnumberThe drop down calendar panel width.180
panelHeightnumberThe drop down calendar panel height.auto
currentTextstringThe text to display for the current day button.Today
closeTextstringThe text to display for the close button.Close
okTextstringThe text to display for the ok button.Ok
disabledbooleanWhen true to disable the field.false
formatterfunctionA function to format the date, the function take a 'date' parameter and return a string value.
parserfunctionA function to parse a date string, the function take a 'date' string and return a date value.
Events
NameParametersDescription
onSelectdateFires when user select a date.
Methods
The methods extend from combo, below is the overridden methods for datebox.
NameParameterDescription
optionsnoneReturn the options object.
calendarnoneGet the calendar object.
setValuevalueSet the datebox value.
2、 基本用法:
1) 加入日期选择框
[javascript] view plaincopyprint?
$("#dd").datebox({"required":true});
[javascript] view plaincopyprint?
$("#dd").datebox({"required":true});
在id为dd的input type=text的输入框加入iquery easyui的日期选择框,且该日期必须输入时,使用(required: true),否则使用required:false;
2) javascript获取日期选择框的值
使用常用的jquery获取input type=text的值的方式
[javascript] view plaincopyprint?
$("#dd").val()
[javascript] view plaincopyprint?
$("#dd").val()
发现没有反应,取不到值。问了度娘只有才发现原来是使用下面的方式取值:
[javascript] view plaincopyprint?
$("#dd").datebox("getValue");
[javascript] view plaincopyprint?
$("#dd").datebox("getValue");
当然这种方式不是太符合我们习惯,那么我们可以给它添加一个事件监听,在datebox onSelect 日期选中后,自动为input id="dd" type="text"赋值,然后我们就可以使用 $("#dd").val()获取选中的日期值了。
具体代码如下:
[javascript] view plaincopyprint?
"text/javascript">      $(document).ready(function(){       $("#dd").datebox({           required:true,           onSelect: function(date){               $("#dd").val(date);           }       });   });
[javascript] view plaincopyprint?
"text/javascript">      $(document).ready(function(){       $("#dd").datebox({           required:true,           onSelect: function(date){               $("#dd").val(date);           }       });   });
3) javascript设置datebox的值
[javascript] view plaincopyprint?
$("#dd").datebox("setValue", "2012-01-01");
[javascript] view plaincopyprint?
$("#dd").datebox("setValue", "2012-01-01");
补充:
需求场景:当我们需要把datebox中的设置的值,取得后返回一个Date类型的时候,就发现有些不好办了?
错误用法:
[javascript] view plaincopyprint?
var tempStr = $("#dd").datebox("getValue");   var tempDate = new Date(tempStr);   return tempDate;
[javascript] view plaincopyprint?
var tempStr = $("#dd").datebox("getValue");   var tempDate = new Date(tempStr);   return tempDate;
发现在FireFox下,这样做是没有问题的;但是IE下就不起作用了,datebox("getValue")能返回正确的只字符串,例如“2012-01-01",但是new Date(str)的时候返回为NaN;
查了下Date的API发现,new Date(str) 调用了 Date.parse(str) 函数, 但是在IE下该函数默认支持Str格式为:
MM-dd-yyyy HH:mm:ss所以我们给定的字符串不是这种格式的,那么就解析不了。
找到原因之后,就好解决了,下面提供一个自己是是实现的函数 parseDate(dateStr)
[javascript] view plaincopyprint?
function parseDate(dateStr){           var strArray = dateStr.split("-");           if(strArray.length == 3){               return new Date(strArray[0], strArray[1], strArray[2]);           }else{               return new Date();           }       }
[javascript] view plaincopyprint?
function parseDate(dateStr){           var strArray = dateStr.split("-");           if(strArray.length == 3){               return new Date(strArray[0], strArray[1], strArray[2]);           }else{               return new Date();           }       }
ok,终于知道怎么用了
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
jQuery EasyUI中的日期控件DateBox修改
jQuery Mobile 插件Mobiscroll 2.6(201308可以用)
EasyUi日期控件datebox设置,只显示年月,也只能选择年月
JQuery爱好者们的福音:jQuery EasyUI
9.JavaScript获取当前时间,返回格式年-月-日 时:分:秒
Jquery EasyUi实战教程布局篇
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服