EasyUI 日期时间框

来源：互联网发布：有网络无法连接编辑：程序博客网时间：2024/05/16 06:24

与日期框（datebox）相似，日期时间框（datetimebox）允许用户选择要显示的带有指定格式的日期和时间的日期和时间。它向下拉面板添加一个时间微调器（timespinner）组件。

1、用法

（1）、从标记创建日期时间框（datetimebox）。

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

（2）、使用 javascript 创建日期时间框（datetimebox）。

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

2、属性

该属性扩展自日期框（datebox），下面是为日期时间框（datetimebox）添加的属性。

名称

类型

描述

默认值

showSeconds

boolean

定义是否显示秒的信息。

true

timeSeparator

string

时分秒之间的时间分隔符。该属性自版本 1.3 起可用。

3、方法

该方法扩展自日期框（datebox），下面是为日期时间框（datetimebox）重写的方法。

名称

参数

描述

options

none

返回选项（options）对象。

spinner

none

返回时间微调器（timespinner）对象。

setValue

value

设置日期时间框（datetimebox）的值。

4、实例

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Basic DateTimeBox - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../css/easyui.css"><link rel="stylesheet" type="text/css" href="../css/icon.css"><link rel="stylesheet" type="text/css" href="../css/demo.css"><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/jquery.easyui.min.js"></script></head><body><h2>基础日期时间框</h2><input class="easyui-datetimebox" required style="width:200px"><div style="margin:20px 0;"></div><h2>日期时间框的初始化值</h2><input class="easyui-datetimebox" value="10/11/2012 2:3:56" style="width:200px"><div style="margin:20px 0;"><h2>显示到秒</h2><span>Show Seconds: </span><input type="checkbox" checked onchange="$('#dt').datetimebox({showSeconds:$(this).is(':checked')})"></div><input id="dt" class="easyui-datetimebox" style="width:200px"></body></html>

0 0