`

jQuery EasyUI - DateTimeBox 日期时间框

阅读更多

扩展自 $.fn.datebox.defaults。用 $.fn.datetimebox.defaults 重写了 defaults。

 

 

依赖

  • datebox
  • timespinner

用法

<input id="dt" type="text"></input>

$('#dt').datetimebox({  
     showSeconds:false
}); 

  取值:

 

$('#dt).datetimebox('getValue')

  

特性

其特性扩展自 datebox,下列是为 datetimebox 增加的特性。

名称

类型

说明

默认值

showSeconds

boolean

定义是否显示秒的信息。

true

方法

其方法扩展自 datebox,下列是为 datetimebox 重写的方法。

名称

参数

说明

options

none

返回 options 对象。

spinner

none

返回 timespinner 对象。

setValue

value

设置 datetimebox 的值。

 

 

问:easyui DateTimeBox 下面ok按钮

有点击事件吗

 

ok按钮没有点击事件,但是可以通过onSelect事件模拟出“点击了ok按钮一样的效果”.
关键:
0,理解DateTimeBox控件,这个控件是由DateBox+TimeSpinner这2个控件组成的,而DateBox又继承自combo控件。
1,使用setText方法,设置控件文本框的内容,这个方法是DateTimeBox从combo控件中继承过来的。不能使用setValue方法,因为这个方法是从DateBox继承过来的,但是DateTimeBox控件并没有重写这个方法,由于DateTimeBox还包含"时分秒",所以无法使用这个DateBox的方法。
2,使用spinner方法,获取“时分秒”信息,这个方法返回DateTimeBox中包含的TimeSpinner控件,使用TimeSpinner控件的getValue方法可以获得时间信息
3,使用onSelect方法,获取“日期”信息,onSelect:function(date){},其中date是事件触发时选中的日期,是js的Date类型数据
4,使用hidePanel方法,把下拉日期面板关闭,该方法也是继承自combo控件
代码并格式化:让日期2014-8-6变成2014-08-06格式的代码:

$('#TextStartTime').datetimebox({
   showSeconds:false,
   required:true,
   onSelect:function(date){
		var y = date.getFullYear();
		var m = date.getMonth() + 1;
		var d = date.getDate();
		var time=$('#TextStartTime').datetimebox('spinner').spinner('getValue');
		var dateTime = y + "-" + (m < 10 ? ("0" + m) : m) + "-" + (d < 10 ? ("0" + d) : d) +' '+time;
		$('#TextStartTime').datetimebox('setText', dateTime);
		$('#TextStartTime').datetimebox('hidePanel');
		// $('#TextStartTime').val(dateTime);
   }
});
分享到:
评论

相关推荐

    easyui 日期选择器

    &lt;input type="text" class="easyui-datetimebox" placeholder="选择日期和时间"&gt; ``` 或者与日期范围选择器(DateRangeBox)配合,方便用户选择一个日期范围: ```html &lt;div class="easyui-datebox" data-options=...

    EasyUI datetimebox修改按钮 添加清空

    首先,联动时间是指当用户在开始时间的datetimebox中选择一个日期和时间后,结束时间的datetimebox将不允许选择早于开始时间的任何日期和时间。这种功能在许多需要指定时间范围的应用中非常常见,比如日程安排或预约...

    jquery easyui-1.3.4帮助API与DEMO

    6. **plugins** 目录:可能包含EasyUI的扩展插件,这些插件是对基础组件功能的补充,例如增强的日期选择器(datetimebox)、上传组件(filebox)等。 jQuery EasyUI 的核心特性包括: - **数据绑定**:通过JSON或...

    EasyUI修改DateBox和DateTimeBox的默认日期格式示例

    在 EasyUI 中,DateBox 和 DateTimeBox 是两个常用的日期选择控件,它们提供了方便的方式来输入和显示日期或日期时间信息。这两款控件在功能上非常相似,主要的区别在于 DateTimeBox 还包含了时间部分。 DateBox ...

    jquery-easyui-1.4.2

    3. 新增组件和功能:添加了一些新的组件,如日期选择器(datebox)、时间选择器(datetimebox)等。 4. 错误修复:修复了上一版本中已知的bug,提高了系统的稳定性。 5. 文档更新:提供了详细的API文档和示例代码,...

    jquery-easyui-1.4.1.zip

    更新日志 Bug The combogrid has different height than other...datetimebox: Add 'cloneFrom' method to create the datetimebox component quickly.(Datetimebox:加入“cloneFrom”方法来快速创建日期时间组件。)

    jQuery_EasyUI中文帮助手册(带目录)

    - 日期时间组合框(datetimebox):输入框,用于选择日期和时间。 - 日历(calendar):用于选择日期。 - 调节器(spinner):允许用户通过点击按钮增加或减少数值。 - 数字调节器(numberspinner):与spinner相似,但...

    jquery easyui 周历 周选择下拉控件

    首先,jQuery EasyUI提供了一套完整的日期选择器(datebox)和日期时间选择器(datetimebox),但它们默认并不支持直接选择一周。为了满足周选择的需求,我们需要对原有的控件进行扩展和改造。这个"周历 周选择下拉...

    jquery easyui 帮助文档

    jQuery EasyUI 的核心在于其组件系统,这些组件包括但不限于数据网格(datagrid)、下拉菜单(combobox)、对话框(dialog)、表单(form)、布局(layout)、菜单(menu)、面板(panel)、进度条(progressbar)、...

    jQuery EasyUI API 中文文档 DateTimeBox日期时间框

    **jQuery EasyUI API 中文文档 DateTimeBox 日期时间框** DateTimeBox 是 jQuery EasyUI 框架中的一个组件,它扩展了 $.fn.datebox.defaults 的功能,并且利用了 datebox 和 timespinner 两个组件的功能。这个组件...

    jQuery EasyUI 1.2.4 API 中文文档.chm

    DateTimeBox 日期时间框 Calendar 日历 Spinner 微调器 NumberSpinner 数值微调器 TimeSpinner 时间微调器 Window 窗口 Window 窗口 Dialog 对话框 Messager 消息框 DataGrid and Tree 数据表格和树 ...

    jQuery EasyUI 1.4.5 版 API 中文版.rar

    2. **表单组件**:包括`form`(表单)、`textbox`(文本框)、`passwordbox`(密码框)、`datetimebox`(日期时间框)等,为表单数据的输入和验证提供了便利。 3. **数据展示组件**:`datagrid`(数据网格)和`...

    jquery-ui-datepicker加入时分秒 jquery.easyui时分秒

    源码修改!绝对原创!不粘贴复制!实现日期时间框,支持中文格式! 扩展了jquery-ui-datepicker的功能。在jquery easyui datetimebox 基础上汉化,并且添加一种jquery方式调用。强化了my97的onclick事件。

    jquery easyui 中文版 API,chm 格式

    9. **其他组件**:如日期选择器`datebox`、时间选择器`datetimebox`、滑块`slider`等,丰富了页面的交互方式。 10. **事件和方法**:每个组件都有一系列的事件(如`onOpen`、`onClick`)和方法(如`open`、`close`...

    jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数

     1) 使用 datetimebox 日期控件, 选择开始日期 startdate, 结束日期 leavedate ,然后求两日期间相隔天数 numdays ;  2) 天数 x 补助 = 包干费用; (numdays * allowance = def11 ) 下面是效果图: 一. form 表单:...

    jQuery_EasyUI_jc.rar_JQ_easyui_jquery_jquery easyui

    11. **插件扩展**:jQuery EasyUI 社区提供了许多扩展插件,比如日期选择器(datebox)、时间选择器(datetimebox)等,它们可以增强你的应用功能。 通过这个教程,你应该能够掌握如何利用jQuery EasyUI快速构建...

    easyui-1.zip

    EasyUI 社区提供了很多扩展插件,如日期选择器(datebox)、时间选择器(datetimebox)等,进一步丰富了组件库。 6. **移动支持**: 虽然 EasyUI 主要面向桌面应用,但也有一定的移动设备适应性,可通过简单的...

    jQuery easyui

    6. **插件扩展**:除了基础组件,社区还提供了许多第三方插件,进一步增强了框架的功能,如日期选择器(datetimebox)、轮播图(carousel)等。 7. **易用性**:jQuery EasyUI 的API 设计简洁,通过简单的 ...

Global site tag (gtag.js) - Google Analytics