1、 官方api介绍
DateBox
Extend from $.fn.combo.defaults. Override defaults with $.fn.datebox.defaults
Dependencies
- combo
- calendar
Usage
- <input id="dd" type="text"></input>
- $('#dd').datebox({
- required:true
- });
Properties
The properties extend from combo, below is the added properties for datebox.
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
onSelect | date | Fires when user select a date. |
Methods
The methods extend from combo, below is the overridden methods for datebox.
options | none | Return the options object. |
calendar | none | Get the calendar object. |
setValue | value | Set the datebox value. |
2、 基本用法:
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);
- return tempDate;
发现在FireFox下,这样做是没有问题的;但是IE下就不起作用了,datebox("getValue")能返回正确的只字符串,例如“2012-01-01",但是new Date(str)的时候返回为NaN;
查了下Date的API发现,new Date(str) 调用了 Date.parse(str) 函数, 但是在IE下该函数默认支持Str格式为:
所以我们给定的字符串不是这种格式的,那么就解析不了。
找到原因之后,就好解决了,下面提供一个自己是是实现的函数 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,终于知道怎么用了。
相关推荐
资源名称:Jquery easyui 使用说明内容简介:Jquery easyui 使用说明 中文PDF版主要讲述的是Jquery easyui 使用说明;感兴趣的朋友可以过来看看。jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的...
基于jquery easyui改造的周选择控件 可指定周起始星期,默认周日为本周的第一天
最近我在做一个安全监测系统,选择了用easyui进行搭建,easyui是一种基于jQuery的用户界面插件集合。使用easyui可以省去很多代码,功能上需要加一些样式。下面小编给大家介绍下给Easyui-Datebox设置隐藏或者不可用的...
jQuery EasyUI 1.3.5版本更新内容: Bug(修复) searchbox:修复“searcher”函数提供的“name”参数值错误的问题; combo:修复“isValid”方法无法返回布尔值的问题; combo:修复点击页面某一个combo组件的...
本 chm 文档是根据博客园“风流涕淌”的《jQuery EasyUI 1.2.4 API 中文文档(完整)目录》整理而成 http://www.cnblogs.com/Philoo/archive/2011/11/17/jeasyui_api_index.html Base 基础 Documentation 文档 ...
jQuery EasyUI中的日期控件DateBox很好用的,首先需要引入jquery文件,代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic DateBox - jQuery EasyUI Demo&...
jQuery EasyUI 1.4.1版本更新内容: Bug(修复) combogrid:修复combogrid组件和其他combo组件高度不一致的问题; datagrid:修复在datagrid行元素调用“updateRow”方法的时候丢失某些类样式的问题; ...
jQuery EasyUI API 中文文档 - DateBox日期框,需要的朋友可以参考下。
jQuery EasyUI 1.5.5 版本更新内容 Bug(修复) tabs:修复当标题包含符合元素时,所选择的历史顺序错误的问题; combo:修复当设置了一个较大的'delay'值的时候下拉面板可能不会被隐藏的问题; layout:修复当鼠标...
Bug(修复) combogrid:修复combogrid组件和其他combo组件高度不一致的问题;...datebox:添加“cloneFrom”方法来快速创建“datebox”组件; datetimebox:添加“cloneFrom”方法来快速创建“datetimebox”组件。
jQuery easyUI 培训 教程 1 Accordion(可折叠标签) 2 1.1 实例 2 1.2 参数 3 2 DateBox(日期框) 4 2.1 实例 4 2.2 参数 6 2.3 事件 6 2.4 方法 6 3 ComboBox(组合框) 7 3.1 实例 7 3.2 参数 9 3.3 事件 9 3.4 ...
主要介绍了浅谈jQuery.easyui的datebox格式化时间的方法,需要的朋友可以参考下
jQuery EasyUI 1.4.1版本更新内容: Bug(修复) combogrid:修复combogrid组件和其他combo组件高度不一致的问题; datagrid:修复在datagrid行元素调用“updateRow”方法的时候丢失某些类样式的问题; ...
日期输入框 - DateBox 日期时间输入框 - DateTimeBox 数字输入框 - NumberBox 格式化数字输入框 - Format NumberBox 数字调节器 - NumberSpinner 进度条 - ProgressBar 搜索框 - SearchBox 时间调节器...
一个自定义样式,通过颜色选择器来控制自己想要的样式。
用 $.fn.datebox.defaults 重写了 defaults。 依赖 combo calendar 用法 复制代码 代码如下: <input id=”dd” type=”text”></input> 复制代码 代码如下: $(‘#dd’).datebox({ required:true }); ...
其中增加了1:DateBox清空功能,2:1776个图片扩展
jquery+easyui学习文档 1 Accordion(可折叠标签) 2 DateBox(日期框)等