Skip to content

DateTimeBox(日期时间输入框)

扩展自$.fn.iDatebox.defaults,使用$.fn.iDatetimebox.defaults重写默认值对象。

和日期输入框类似,日期时间输入框允许用户选择日期和指定的时间并按照指定的输出格式显示。相比日期输入框,它在下拉面板中添加了一个时间微调器。

依赖关系

使用案例

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

html
<input name="birthday" value="3/4/2010 2:3" data-toggle="topjui-datetimebox" data-options="required:true,width:150,showSeconds:false">

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

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

属性

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

属性名属性值类型描述默认值
currentTextstring文本显示为当前天按钮。Today
closeTextstring文本显示为关闭按钮。Close
okTextstring文本显示为确定按钮。Ok
spinnerWidthnumber定义datetimebox组件嵌入的时间微调器的宽度。100%
showSecondsboolean定义是否显示秒钟信息。TRUE
timeSeparatorstring定义在小时、分钟和秒之间的时间分割字符。:

方法

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

方法名方法参数描述
optionsnone返回属性对象。
spinnernone返回时间微调器对象。
setValuevalue设置日期时间输入框值。见下方代码示例。
cloneFromfrom克隆一个datetimebox控件。见下方代码示例。

方法代码示例

setValue方法示例:

javascript
$('#dt').iDatetimebox('setValue', '2020-02-02 12:30:56');    // 设置日期时间输入框的值
var v = $('#dt').iDatetimebox('getValue');               // 获取日期时间输入框的值
alert(v);

cloneFrom方法示例:

html
<input id="from" data-toggle="topjui-datetimebox">
javascript
// 克隆一个存在的datebox组件
$('.dt').iDatetimebox('cloneFrom', '#from');

基于最新稳定版jQuery EasyUI构建的前端框架