jquery easyui datebox 的使用 .
看了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
- <</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.
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) 加入日期选择框
在id为dd的input
type=text的输入框加入iquery easyui的日期选择框,且该日期必须输入时,使用(required:
true),否则使用required:false;
2) javascript获取日期选择框的值
使用常用的jquery获取input
type=text的值的方式
发现没有反应,取不到值。问了度娘只有才发现原来是使用下面的方式取值:
当然这种方式不是太符合我们习惯,那么我们可以给它添加一个事件监听,在datebox onSelect 日期选中后,自动为input
id="dd" type="text"赋值,然后我们就可以使用
$("#dd").val()获取选中的日期值了。
具体代码如下:
- "text/javascript">
- $(document).ready(function(){
- $("#dd").datebox({
- required:true,
- onSelect: function(date){
- $("#dd").val(date);
- }
- });
- });
- "text/javascript">
- $(document).ready(function(){
- $("#dd").datebox({
- required:true,
- onSelect: function(date){
- $("#dd").val(date);
- }
- });
- });
3) javascript设置datebox的值
补充:
需求场景:当我们需要把datebox中的设置的值,取得后返回一个Date类型的时候,就发现有些不好办了?
错误用法:
- var tempStr = $("#dd").datebox("getValue");
- var tempDate = new Date(tempStr);
- return tempDate;
- 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)
- function parseDate(dateStr){
- var strArray = dateStr.split("-");
- if(strArray.length == 3){
- return new Date(strArray[0], strArray[1], strArray[2]);
- }else{
- return new Date();
- }
- }
- 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,终于知道怎么用了
版权声明:本文为博主原创文章,未经博主允许不得转载。
最新文章
- php PDO:数据访问抽象层
- mysql 只导数据不含表结构
- c#部分---好题--顺便练练“类的知识”
- hdu2021(很闲~~)
- java内存模型 年轻代/年老代 持久区
- 清空session的方法
- [Raobin] Ext.net在多重子父窗体中找到当前窗体的父窗体,并关闭IFrame父窗体
- hibernate符合主键
- ASP.NET MVC 缓存使用示例
- CentOS6无法本地登陆,ssh远程登陆没问题
- TabHost+RadioGroup搭建基础布局
- Java异常体系简析
- [异常解决] 奇巧淫技——VirtualBox中的linux无显示启动,并在win7上远程控制
- linux 启动springboot项目
- Ubuntu server 16.04安装,无网卡驱动解决
- MVC基本登陆与验证码功能实现
- CentOS7 添加开机启动项
- 黄聪:C# webBrowser控件禁用alert,confirm之类的弹窗解决方案
- Matlab编辑器背景修改
- smali注入常用代码
热门文章
- CAS实现单点登录理解
- iOS开发 僵尸调试
- 【BZOJ2229】[Zjoi2011]最小割 最小割树
- linq to xml操作XML(转)
- toitorsegit and toitorstsvn文件夹icon冲突不显示
- servlet 复习笔记
- SpringBoot学习笔记(12):计划任务
- Algorithm: inversion
- 《avascript 高级程序设计(第三版)》 ---第一章 Javascript简介
- ubuntu mysql 配置(远程访问&;&;字符集设置&;&;忽略大小写)