126 lines
4.3 KiB
HTML
126 lines
4.3 KiB
HTML
<#def title = "日历控件"/>
|
|
<#def keyword = "ZhiqimUI"/>
|
|
<#def desc = "日历控件是在输入框触发时展开一个年月日时分秒的日期界面，按日历格式显示出来，通过点击和选择得到要求的日期或时间。当前日历控件支持选择日期、选择日期+时间、选择日期+时分三种。"/>
|
|
<#def prevUrl = "editable.htm"/>
|
|
<#def nextUrl = "../dialog/dialog.htm"/>
|
|
${zhiqim_com_header()}
|
|
${zhiqim_com_topnav()}
|
|
|
|
<script>
|
|
Z.onload(function()
|
|
{
|
|
Z(".example").each(function(elem)
|
|
{
|
|
Z(elem).next("td > pre").html(Z(elem).htmlt());
|
|
});
|
|
});
|
|
|
|
function onchangea()
|
|
{
|
|
}
|
|
</script>
|
|
|
|
<!--容器开始 -->
|
|
<div id="container" class="container">
|
|
<!--边导航-->
|
|
${zhiqim_com_ui("tutorial", "ui", "form", "calendar")}
|
|
|
|
<!--主体-->
|
|
<div id="mainbody" class="mainbody">
|
|
${zhiqim_com_breadcrumb("文库", "教程", "日历控件")}
|
|
<div class="content">
|
|
|
|
<#-- 标题 -->
|
|
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
|
<p class="z-text-blue">日历控件：</p>
|
|
<p class="z-color-333" style="text-indent:38px;">
|
|
日历控件是在输入框触发时展开一个年月日时分秒的日期界面，按日历格式显示出来，通过点击和选择得到要求的日期或时间。当前日历控件支持选择日期、选择日期+时间、选择日期+时分三种。
|
|
</p>
|
|
</div>
|
|
|
|
<#-- 一、日期选择器 -->
|
|
<div class="tutorial title">一、日期选择器</div>
|
|
|
|
<table class="z-table z-bordered z-pd10 z-bd-rd8">
|
|
<tr bgcolor="#f5f5f5">
|
|
<td width="20%">类型</td>
|
|
<td width="20%">事例</td>
|
|
<td width="*">代码</td>
|
|
</tr>
|
|
<tr>
|
|
<td>最简单的方式</td>
|
|
<td class="example"><input class="z-input" onfocus="Z.date(this);"></td>
|
|
<td><pre class="z-text-preline"></pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td>有默认值</td>
|
|
<td class="example"><input class="z-input" onfocus="Z.date(this);" value="2015-04-11"></td>
|
|
<td><pre class="z-text-preline"></pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td>有默认值和onchange方法</td>
|
|
<td class="example"><input class="z-input" onfocus="Z.date(this);" value="2015-04-11" onchange="alert('修改值为'+this.value)"></td>
|
|
<td><pre class="z-text-preline"></pre></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<#-- 二、日期+时间选择器 -->
|
|
<div class="tutorial title">二、日期+时间选择器</div>
|
|
|
|
<table class="z-table z-bordered z-pd10 z-bd-rd8 z-lh150p">
|
|
<tr bgcolor="#f5f5f5">
|
|
<td width="20%">类型</td>
|
|
<td width="20%">未指定</td>
|
|
<td width="*">代码</td>
|
|
</tr>
|
|
<tr>
|
|
<td>最简单的方式</td>
|
|
<td class="example"><input class="z-input" onfocus="Z.datetime(this);"></td>
|
|
<td><pre class="z-text-preline"></pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td>有默认值</td>
|
|
<td class="example"><input class="z-input" onfocus="Z.datetime(this);" value="2015-04-11 00:00:01"></td>
|
|
<td><pre class="z-text-preline"></pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td>有默认值和onchange方法<br><input id="datetime_value" class="z-input z-w150"></td>
|
|
<td class="example"><input class="z-input" onfocus="Z.datetime(this);" value="2015-04-11 00:00:01" onchange="Z('#datetime_value').val(this.value);"></td>
|
|
<td><pre class="z-text-preline"></pre></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<#-- 三、日期+时分选择器 -->
|
|
<div class="tutorial title">三、日期+时分选择器</div>
|
|
|
|
<table class="z-table z-bordered z-pd10 z-bd-rd8 z-lh150p">
|
|
<tr bgcolor="#f5f5f5">
|
|
<td width="30%">类型</td>
|
|
<td width="20%">未指定</td>
|
|
<td width="*">代码</td>
|
|
</tr>
|
|
<tr>
|
|
<td>最简单的方式</td>
|
|
<td class="example"><input class="z-input" onfocus="Z.datetimeNoSecond(this);"></td>
|
|
<td><pre class="z-text-preline"></pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td>有默认值</td>
|
|
<td class="example"><input class="z-input" onfocus="Z.datetimeNoSecond(this);" value="2015-04-11 00:00:00"></td>
|
|
<td><pre class="z-text-preline"></pre></td>
|
|
</tr>
|
|
<tr>
|
|
<td>有默认值和onchange方法<br><input id="datehourminute_value" class="z-input z-w150"></td>
|
|
<td class="example"><input class="z-input" onfocus="Z.datetimeNoSecond(this);" value="2015-04-11 00:00:00" onchange="Z('#datehourminute_value').val(this.value);"></td>
|
|
<td><pre class="z-text-preline"></pre></td>
|
|
</tr>
|
|
</table>
|
|
${zhiqim_com_chapter()}
|
|
</div>
|
|
|
|
<!-- 主体结束 -->
|
|
</div>
|
|
|
|
<!-- 容器结束 -->
|
|
</div>
|
|
${zhiqim_com_footer()} |