jquery easyui datebox 的使用
2012-05-03 11:03
423 查看
看了jquery easyui databox的官方api,还可以加入倒是很简单,但是想要获得他的值和修改值就很费劲,不知道怎么弄,试了n次终于搞定。这里总结一下,供有相同问题的人查询。
1、 官方api介绍
calendar
$('#dd').datebox({
required:true
});
2、 基本用法:
1) 加入日期选择框
在id为dd的input type=text的输入框加入iquery easyui的日期选择框,且该日期必须输入时,使用(required: true),否则使用required:false;
2) javascript获取日期选择框的值
使用常用的jquery获取input type=text的值的方式
发现没有反应,取不到值。问了度娘只有才发现原来是使用下面的方式取值:
$("#dd").val()获取选中的日期值了。
具体代码如下:
3) javascript设置datebox的值
补充:
需求场景:当我们需要把datebox中的设置的值,取得后返回一个Date类型的时候,就发现有些不好办了?
错误用法:
查了下Date的API发现,new Date(str) 调用了 Date.parse(str) 函数, 但是在IE下该函数默认支持Str格式为:
所以我们给定的字符串不是这种格式的,那么就解析不了。
找到原因之后,就好解决了,下面提供一个自己是是实现的函数 parseDate(dateStr)
ok,终于知道怎么用了。
参考资料:
easyui: http://www.jeasyui.com/documentation/datebox.php
javascript api: http://www.qefqei.com/javascript/Date-parse%28%29
1、 官方api介绍
DateBox
Extend from $.fn.combo.defaults. Override defaults with $.fn.datebox.defaultsDependencies
combocalendar
Usage
<input id="dd" type="text"></input>$('#dd').datebox({
required:true
});
Properties
The properties extend from combo, below is the added properties for datebox.Name | Type | Description | Default |
---|---|---|---|
panelWidth | number | The drop down calendar panel width. | 180 |
panelHeight | number | The drop down calendar panel height. | auto |
currentText | string | The text to display for the current day button. | Today |
closeText | string | The text to display for the close button. | Close |
okText | string | The text to display for the ok button. | Ok |
disabled | boolean | When true to disable the field. | false |
formatter | function | A function to format the date, the function take a 'date' parameter and return a string value. | |
parser | function | A function to parse a date string, the function take a 'date' string and return a date value. |
Events
Name | Parameters | Description |
---|---|---|
onSelect | date | Fires when user select a date. |
Methods
The methods extend from combo, below is the overridden methods for datebox.Name | Parameter | Description |
---|---|---|
options | none | Return the options object. |
calendar | none | Get the calendar object. |
setValue | value | Set the datebox value. |
1) 加入日期选择框
$("#dd").datebox({"required":true});
在id为dd的input type=text的输入框加入iquery easyui的日期选择框,且该日期必须输入时,使用(required: true),否则使用required:false;
2) javascript获取日期选择框的值
使用常用的jquery获取input type=text的值的方式
$("#dd").val()
发现没有反应,取不到值。问了度娘只有才发现原来是使用下面的方式取值:
$("#dd").datebox("getValue");当然这种方式不是太符合我们习惯,那么我们可以给它添加一个事件监听,在datebox onSelect 日期选中后,自动为input id="dd" type="text"赋值,然后我们就可以使用
$("#dd").val()获取选中的日期值了。
具体代码如下:
<script type="text/javascript"> $(document).ready(function(){ $("#dd").datebox({ required:true, onSelect: function(date){ $("#dd").val(date); } }); }); </script>
3) javascript设置datebox的值
$("#dd").datebox("setValue", "2012-01-01");
补充:
需求场景:当我们需要把datebox中的设置的值,取得后返回一个Date类型的时候,就发现有些不好办了?
错误用法:
var tempStr = $("#dd").datebox("getValue");var tempDate = new Date(tempStr);发现在FireFox下,这样做是没有问题的;但是IE下就不起作用了,datebox("getValue")能返回正确的只字符串,例如“2012-01-01",但是new Date(str)的时候返回为NaN;
return tempDate;
查了下Date的API发现,new Date(str) 调用了 Date.parse(str) 函数, 但是在IE下该函数默认支持Str格式为:
MM-dd-yyyy HH:mm:ss
所以我们给定的字符串不是这种格式的,那么就解析不了。
找到原因之后,就好解决了,下面提供一个自己是是实现的函数 parseDate(dateStr)
/** * 解析输入的dateStr,返回Date类型。 * dateStr: XXXX-XX-XX */ 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,终于知道怎么用了。
参考资料:
easyui: http://www.jeasyui.com/documentation/datebox.php
javascript api: http://www.qefqei.com/javascript/Date-parse%28%29
相关文章推荐
- jquery easyui datebox 的使用
- jquery easyui datebox 的使用 .
- jquery easyui datebox 的使用需要注意的问题
- jquery easyui datebox 的使用
- jquery easyui datebox 的使用
- jquery easyui datebox 的使用
- jQuery easyui datebox 使用
- jquery easyui datebox 的使用
- jquery easyui datebox 的使用
- HTML Jquery EasyUI 日期选择框[easyui-datebox]的使用【格式自定】
- jquery easyui datebox 的使用 .
- 在动态插入Easyui datebox控件时,使用$.parser.parse()手工渲染时,解决日期控件原有的值被清除问题
- jquery easyUI组件easyui-datebox限制时间范围
- jquery easyui datebox 时间控件默认显示当前日期的实现方法
- EasyUI - Datebox和Numberbox的使用
- 关于easyui datagrid中使用datebox设置默认值的方法
- jQueryEasyUI DateBox的基本使用
- 使用Jquery EasyUI中DateTimeBox控件设置考试开始结束时间,并对其验证
- jQuery EasyUI中的日期控件DateBox修改方法
- 第二百一十五节,jQuery EasyUI,DateBox(日期输入框)组件