使用须知
如何开始
安装
全局元素
样式重置
文字
颜色
徽章
提示框
表格
图标
栅格
原生组件
Panel
Accordion
Tabs
Layout
DataGrid
DataList
PropertyGrid
Tree
TreeGrid
LinkButton
Menu
MenuButton
SplitButton
SwitchButton
TabButton
Pagination
ProgressBar
SearchBox
Form
CheckBox
RadioBox
TextBox
PasswordBox
FileBox
TagBox
Combo
ComboBox
ComboGrid
ComboTree
ComboTreeGrid
ComboFilter
NumberBox
NumberSpinner
Calendar
DateBox
DateRangeBox
DateTimeBox
DateTimeRangeBox
TimeSpinner
DateTimeSpinner
Slider
ValidateBox
ImagesBox
Window
Dialog
Messager
Draggable
Droppable
Resizable
Tooltip
MaskedBox
扩展组件
头像
上传
时间轴
聊天
用户面板
消息面板
统计数据面板
Echart面板
圆形统计图
评论
相册
评分
文件
滚动条
二维码
条形码
天气
AT
编辑器
课程表
日程表
项目管理
客户管理
浏览器
FAQ
兼容插件
IconFont
Font Awesome
Ueditor
Ckeditor
Echarts
Plupload
Cropper
BaiduMap
AMap
Colpick
Nprogress
Gantt
GanttEditor
Raty
WebUploader
匿名
匿名 您还未登录

DateTimeBox

Document
Native
Basic
Initialize Value for DateTime
Display Seconds
Fluid DateTimeBox
Plus
Extend

DateTimeBox Document

扩展自$.fn.datebox.defaults,使用$.fn.datetimebox.defaults重写默认值对象。
和日期输入框类似,日期时间输入框允许用户选择日期和指定的时间并按照指定的输出格式显示。相比日期输入框,它在下拉面板中添加了一个时间微调器。

文档汉化:

汉化人:王锦阳
汉化语言:简体中文
个人博客:http://blog.sina.com.cn/richie696

依赖关系:

用法:

使用标签创建日期时间输入框。

				
<input class="easyui-datetimebox" name="birthday"     
        data-options="required:true,showSeconds:false" value="3/4/2010 2:3" style="width:150px"> 
				
			

使用Javascript创建日期时间输入框。

				
<input id="dt" type="text" name="birthday"></input>  
<script type="text/javascript">
$('#dt').datetimebox({    
    value: '3/4/2010 2:3',    
    required: true,    
    showSeconds: false   
}); 
</script> 
				
			

属性:

日期时间输入框扩展自datebox(日期输入框),日期时间输入框新增的属性如下:

属性名 属性值类型 描述 默认值
currentText string 文本显示为当前天按钮。(该属性自1.4版开始可用) Today
closeText string 文本显示为关闭按钮。(该属性自1.4版开始可用) Close
okText string 文本显示为确定按钮。(该属性自1.4版开始可用) Ok
spinnerWidth number 定义datetimebox组件嵌入的时间微调器的宽度。 100%
showSeconds boolean 定义是否显示秒钟信息。 true
timeSeparator string 定义在小时、分钟和秒之间的时间分割字符。(该属性自1.3版开始可用) :

方法:

日期时间输入框的方法扩展自datebox(日期输入框),日期时间输入框重写的方法如下:

方法名 方法属性 描述
options none 返回属性对象。
spinner none 返回时间微调器对象。
setValue value 设置日期时间输入框值。

代码示例:
				
<script type="text/javascript">
$('#dt').datetimebox('setValue', '6/1/2012 12:30:56');    // 设置日期时间输入框的值
var v = $('#dt').datetimebox('getValue');            // 获取日期时间输入框的值
alert(v);
</script> 
				
			
cloneFrom from 克隆一个datetimebox控件。(该方法自1.4.1版开始可用)

代码示例:
				
<input id="from" class="easyui-datetimebox">
<script type="text/javascript">
// 克隆一个存在的datebox组件
$('.dt').datetimebox('cloneFrom', '#from');
</script>