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

1、 官方api介绍

DateBox

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

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 plaincopyprint?

 
  1. $("#dd").datebox({"required":true});
[javascript] view plaincopyprint?

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

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

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

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

[javascript] view plaincopyprint?

 
  1. $("#dd").val()
[javascript] view plaincopyprint?

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

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

[javascript] view plaincopyprint?

 
  1. $("#dd").datebox("getValue");
[javascript] view plaincopyprint?

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

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

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

具体代码如下:

[javascript] view plaincopyprint?

 
  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 plaincopyprint?

 
  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 plaincopyprint?

 
  1. $("#dd").datebox("setValue", "2012-01-01");
[javascript] view plaincopyprint?

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

补充:

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

错误用法:

[javascript] view plaincopyprint?

 
  1. var tempStr = $("#dd").datebox("getValue");
  2. var tempDate = new Date(tempStr);
  3. return tempDate;
[javascript] view plaincopyprint?

 
  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 plaincopyprint?

 
  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 plaincopyprint?

 
  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,终于知道怎么用了

jquery easyui datebox 的使用的更多相关文章

  1. jquery easyui datebox 时间控件默认显示当前日期的实现方法

    jquery easyui datebox 时间控件默认显示当前日期的实现方法 直接class easyui-datebox后添加一个value="true"就可以

  2. jquery easyui datebox单击文本框显示日期选择

    jquery easyui的datebox日历控件,实现单击文本框出现日历选择,如下图: 代码: 修改jquery.easyui.min.js第9797行函数(jQuery EasyUI 1.3.2) ...

  3. 修改easyui datebox默认日期格式

    问题描述: 根据jquery easyui datebox demo中给的示例,导入和使用datebox, 发现日期格式为: 6/22/2011, 其他的今天和关闭也是 Today, Close, 对 ...

  4. jquery easyUI 日期格式化,DateBox只显示年

    jquery easyUI 日期格式化,DateBox只显示年 >>>>>>>>>>>>>>>>> ...

  5. 第二百一十五节,jQuery EasyUI,DateBox(日期输入框)组件

    jQuery EasyUI,DateBox(日期输入框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 DateBox(日期输入框)组件的使 ...

  6. jQuery EasyUI 使用笔记

    大家有四次抢票机会.第一次是放票时间之后的30分钟.第二次机会是开车前的15天.第三个机会是开车前的48小时.第四个机会是开车前的24小时. $("#gys_key").combo ...

  7. jquery.easyui代码详解,和遇到的问题,提供大家在使用的时候少走弯路(一)

    初次使用jquery.easyui这个东东,虽然简单,但还是很费力的去研究了一下使用,在使用过程中遇到的问题,下面代码会详细的注释到 引用的文件jquery.min.js              j ...

  8. HTML5界面开发工具jQuery EasyUI更新至v1.3.5

    本文转自:evget.com HTML5界面开发工具 jQuery EasyUI 最新发布v1.3.5,新版修复了多个bug,并改进了menu,tabs和slider等多个控件.jQuery Easy ...

  9. JavaScript UI选型及Jquery EasyUI使用经验谈

    最近由于项目需要,对js UI作了一些简单的了解和使用,有自己的一些想法,在这里留个记录. 当然,我的专注点在管理系统的范围内,所以互联网网站及其他形态的应用这里不提及,所以jQuery UI和Boo ...

随机推荐

  1. Python快速入门学习笔记(一)

    本篇文章适合有其他高级语言基础的人群阅读 使用的Python版本为python2.7 使用的编辑器为Sublime Text3 世界始于Hello World: print 'Hello world' ...

  2. 九度OJ 1504 把数组排成最小的数【算法】-- 2009年百度面试题

    题目地址:http://ac.jobdu.com/problem.php?pid=1504 题目描述: 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如 ...

  3. nodejs的调试

    js的调试始终是一个比较麻烦也是比较困难的事情,从最原始的alert调试,到火狐的firebug工具,在到后来各个浏览器厂商的调试工具.调试工具的发展历程,也可以看出由JS构建的业务和技术逻辑越来越复 ...

  4. 基于Jquery的banner轮播插件,简单粗暴

    新手练习封装插件,觉着在前端这一块的轮播比较多,各种旋转木马一类的3D旋转,技术不够,所以封装了一个简单的banner轮播插件,功能也比较简单,就是左右向的轮播. 先挂地址https://github ...

  5. Date、String、Calendar类型之间的转化

    原文出处:http://fjfj910.iteye.com/blog/1202219 1.Calendar 转化 String  //获取当前时间的具体情况,如年,月,日,week,date,分,秒等 ...

  6. C#线程总结

    using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using S ...

  7. 51nod1046快速幂取余

    给出3个正整数A B C,求A^B Mod C.   例如,3 5 8,3^5 Mod 8 = 3. Input 3个正整数A B C,中间用空格分隔.(1 <= A,B,C <= 10^ ...

  8. 002.TPerlRegEx简单测试

    我要做什么? 将一个字符串中的所有连续的数字替换成一个* 代码: program Project1; {$APPTYPE CONSOLE} uses System.SysUtils, PerlRegE ...

  9. HBase Shell(转)

    HBase 为用户提供了一个非常方便的使用方式, 我们称之为“HBase Shell”.HBase Shell 提供了大多数的 HBase 命令, 通过 HBase Shell 用户可以方便地创建.删 ...

  10. C# dynamic

    [TestMethod] public void DynamicTest() { dynamic Customer = new ExpandoObject(); Customer.Name = &qu ...