分类: jquery-easyui2012-10-09
19:07 266人阅读 评论(0) 收藏 举报

目录(?)[+]


看了jquery easyui
databox的官方api,还可以加入倒是很简单,但是想要获得他的值和修改值就很费劲,不知道怎么弄,试了n次终于搞定。这里总结一下,供有相同问题的人查询。

1、 官方api介绍

DateBox

Extend from
$.fn.combo.defaults. Override defaults with
$.fn.datebox.defaults

easyui datebox 的使用 ." />

Dependencies

  • combo
  • calendar

Usage


  1. <</span>input id="dd" type="text"></</span>input>


  1. $('#dd').datebox({
  2. required:true
  3. });

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.

2、 基本用法:

1) 加入日期选择框

[javascript] view
plain
copyprint?



  1. $("#dd").datebox({"required":true});

[javascript] view
plain
copyprint?



  1. $("#dd").datebox({"required":true});

在id为dd的input
type=text的输入框加入iquery easyui的日期选择框,且该日期必须输入时,使用(required:
true),否则使用required:false;

2) javascript获取日期选择框的值

使用常用的jquery获取input
type=text的值的方式

[javascript] view
plain
copyprint?



  1. $("#dd").val()

[javascript] view
plain
copyprint?



  1. $("#dd").val()

发现没有反应,取不到值。问了度娘只有才发现原来是使用下面的方式取值:

[javascript] view
plain
copyprint?



  1. $("#dd").datebox("getValue");

[javascript] view
plain
copyprint?



  1. $("#dd").datebox("getValue");


当然这种方式不是太符合我们习惯,那么我们可以给它添加一个事件监听,在datebox onSelect 日期选中后,自动为input
id="dd" type="text"赋值,然后我们就可以使用

$("#dd").val()获取选中的日期值了。

具体代码如下:

[javascript] view
plain
copyprint?



  1. "text/javascript">
  2. $(document).ready(function(){
  3. $("#dd").datebox({
  4. required:true,
  5. onSelect: function(date){
  6. $("#dd").val(date);
  7. }
  8. });
  9. });

[javascript] view
plain
copyprint?



  1. "text/javascript">
  2. $(document).ready(function(){
  3. $("#dd").datebox({
  4. required:true,
  5. onSelect: function(date){
  6. $("#dd").val(date);
  7. }
  8. });
  9. });

3) javascript设置datebox的值

[javascript] view
plain
copyprint?



  1. $("#dd").datebox("setValue", "2012-01-01");

[javascript] view
plain
copyprint?



  1. $("#dd").datebox("setValue", "2012-01-01");

补充:

需求场景:当我们需要把datebox中的设置的值,取得后返回一个Date类型的时候,就发现有些不好办了?

错误用法:

[javascript] view
plain
copyprint?



  1. var tempStr = $("#dd").datebox("getValue");
  2. var tempDate = new Date(tempStr);
  3. return tempDate;

[javascript] view
plain
copyprint?



  1. var tempStr = $("#dd").datebox("getValue");
  2. var tempDate = new Date(tempStr);
  3. 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
plain
copyprint?



  1. function parseDate(dateStr){
  2. var strArray = dateStr.split("-");
  3. if(strArray.length == 3){
  4. return new Date(strArray[0], strArray[1], strArray[2]);
  5. }else{
  6. return new Date();
  7. }
  8. }

[javascript] view
plain
copyprint?



  1. function parseDate(dateStr){
  2. var strArray = dateStr.split("-");
  3. if(strArray.length == 3){
  4. return new Date(strArray[0], strArray[1], strArray[2]);
  5. }else{
  6. return new Date();
  7. }
  8. }

ok,终于知道怎么用了



版权声明:本文为博主原创文章,未经博主允许不得转载。

最新文章

  1. php PDO:数据访问抽象层
  2. mysql 只导数据不含表结构
  3. c#部分---好题--顺便练练“类的知识”
  4. hdu2021(很闲~~)
  5. java内存模型 年轻代/年老代 持久区
  6. 清空session的方法
  7. [Raobin] Ext.net在多重子父窗体中找到当前窗体的父窗体,并关闭IFrame父窗体
  8. hibernate符合主键
  9. ASP.NET MVC 缓存使用示例
  10. CentOS6无法本地登陆,ssh远程登陆没问题
  11. TabHost+RadioGroup搭建基础布局
  12. Java异常体系简析
  13. [异常解决] 奇巧淫技——VirtualBox中的linux无显示启动,并在win7上远程控制
  14. linux 启动springboot项目
  15. Ubuntu server 16.04安装,无网卡驱动解决
  16. MVC基本登陆与验证码功能实现
  17. CentOS7 添加开机启动项
  18. 黄聪:C# webBrowser控件禁用alert,confirm之类的弹窗解决方案
  19. Matlab编辑器背景修改
  20. smali注入常用代码

热门文章

  1. CAS实现单点登录理解
  2. iOS开发 僵尸调试
  3. 【BZOJ2229】[Zjoi2011]最小割 最小割树
  4. linq to xml操作XML(转)
  5. toitorsegit and toitorstsvn文件夹icon冲突不显示
  6. servlet 复习笔记
  7. SpringBoot学习笔记(12):计划任务
  8. Algorithm: inversion
  9. 《avascript 高级程序设计(第三版)》 ---第一章 Javascript简介
  10. ubuntu mysql 配置(远程访问&amp;&amp;字符集设置&amp;&amp;忽略大小写)