forked from cocoo/easyui-bootstrap
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdatetimebox.html
105 lines (95 loc) · 5.27 KB
/
datetimebox.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>datetimebox</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/SyntaxHighlighter.css" />
<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>
<script type="text/javascript" src="js/shBrushXml.js"></script>
</head>
<body style="text-align:left">
<div style="padding:10px">
<h3>DateTimeBox</h3>
<p>Extend from $.fn.datebox.defaults, Override defaults with $.fn.datetimebox.defaults.</p>
<p>
Similar to the datebox, the datetimebox allows the user to select a date and a time to display the date and time with specified format.
It adds a timespinner component to the drop-down panel.
</p>
<img src="images/datetimebox.png">
<h4>Dependencies</h4>
<ul>
<li>datebox</li>
<li>timespinner</li>
</ul>
<h4>Usage Example</h4>
<p>Create datetimebox from markup.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag"><</span><span class="tag-name">input</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-datetimebox"</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"birthday"</span><span> </span></span></li><li class=""><span> <span class="attribute">data-options</span><span>=</span><span class="attribute-value">"required:true,showSeconds:false"</span><span> </span><span class="attribute">value</span><span>=</span><span class="attribute-value">"3/4/2010 2:3"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:150px"</span><span class="tag">></span><span> </span></span></li></ol></div><textarea class="html" name="code-datetimebox" style="display: none;"> <input class="easyui-datetimebox" name="birthday"
data-options="required:true,showSeconds:false" value="3/4/2010 2:3" style="width:150px">
</textarea>
<p>Create datetimebox using javascript.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag"><</span><span class="tag-name">input</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"dt"</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"text"</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"birthday"</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">input</span><span class="tag">></span><span> </span></span></li></ol></div><textarea class="html" name="code-datetimebox" style="display: none;"> <input id="dt" type="text" name="birthday"></input>
</textarea>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">'#dt'</span><span>).datetimebox({ </span></span></li><li class=""><span> value: <span class="string">'3/4/2010 2:3'</span><span>, </span></span></li><li class="alt"><span> required: <span class="keyword">true</span><span>, </span></span></li><li class=""><span> showSeconds: <span class="keyword">false</span><span> </span></span></li><li class="alt"><span>}); </span></li></ol></div><textarea class="js" name="code-datetimebox" style="display: none;"> $('#dt').datetimebox({
value: '3/4/2010 2:3',
required: true,
showSeconds: false
});
</textarea>
<br>
<h4>Properties</h4>
<p>The properties extend from datebox, below is the added properties for datetimebox:</p>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Type</strong></th>
<th><strong>Description</strong></th>
<th><strong>Default</strong></th>
</tr>
<tr>
<td>showSeconds</td>
<td>boolean</td>
<td>Defines if to display the second information.</td>
<td>true</td>
</tr>
<tr>
<td>timeSeparator</td>
<td>string</td>
<td>The time separator between hour and minute and second. This property is available since version 1.3.</td>
<td>:</td>
</tr>
</tbody></table>
<h4>Methods</h4>
<p>The methods extend from datebox, below is the overridden methods for datetimebox.</p>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Parameter</strong></th>
<th><strong>Description</strong></th>
</tr>
<tr>
<td>options</td>
<td>none</td>
<td>Return the options object.</td>
</tr>
<tr>
<td>spinner</td>
<td>none</td>
<td>Return the timespinner object.</td>
</tr>
<tr>
<td>setValue</td>
<td>value</td>
<td>
Set the datetimebox value.
<p>Code example:</p>
<pre>$('#dt').datetimebox('setValue', '6/1/2012 12:30:56'); // set datetimebox value
var v = $('#dt').datetimebox('getValue'); // get datetimebox value
alert(v);
</pre>
</td>
</tr>
</tbody></table>
</div>
</body>
</html>