|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
|
|
"http://www.w3.org/TR/html4/loose.dtd">
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
|
<title></title>
|
|
|
<script type="text/javascript" src="../internal.js"></script>
|
|
|
<script type="text/javascript" src="../../../jquery.js"></script>
|
|
|
<script type="text/javascript" src="../../../bootstrap/bootstrap.js"></script>
|
|
|
<link rel="stylesheet" href="../../../bootstrap/bootstrap.css">
|
|
|
<link rel="stylesheet" href="../../../bootstrap/bootstrap-responsive.css">
|
|
|
<style type="text/css">
|
|
|
*{color: #838383;margin: 0;padding: 0}
|
|
|
html,body {font-size: 12px;}
|
|
|
body {
|
|
|
padding-left: 20px;padding-right: 20px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="tblwrap">
|
|
|
<table class="table table-striped table-bordered" style="margin-top:18px;margin-bottom: 0;">
|
|
|
<tr>
|
|
|
<th><span>控件名称</span><span class="label label-important">*</span></th>
|
|
|
<th><span>格式类型</span> <span style="float:right;"><a title="显示日历控件使用帮助" onclick="fnShowGuide();" class="btn"><i class="icon-question-sign"></i></a></span></th>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td> <input id="txtName" placeholder="必填项" type="text" size="20" /> </td>
|
|
|
<td>
|
|
|
<select id="dateFormat" onchange="fnShowDef(this.value);">
|
|
|
<option value="yyyy-MM-dd">日期，形如：2010-09-09</option>
|
|
|
<option value="yyyy-MM-dd HH:mm:ss">日期，形如：2010-09-09 09:25:00</option>
|
|
|
<option value="">自定义格式</option>
|
|
|
</select>
|
|
|
<br/><br/>
|
|
|
<blockquote>
|
|
|
<input type="text" id="def_format" style="display:none;" value="">
|
|
|
</blockquote>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td colspan="2">
|
|
|
<div class="input-prepend input-append">
|
|
|
<span class="add-on">宽</span><input style="display:inline;" id="txtWidth" size="3" type="text"><span class="add-on">px</span>
|
|
|
<span class="add-on">高</span><input style="display:inline;" id="txtHeight" size="3" type="text"><span class="add-on">px</span>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
<div style="display:none;margin-bottom: 27px;">
|
|
|
<div class="page-header">
|
|
|
<h3>日历控件帮助<span style="position: fixed;right: 20px;"><a title="回到控件属性页" onclick="fnShowGuide();" class="btn"><i class="icon-home"></i></a></span></h3>
|
|
|
</div>
|
|
|
<div>
|
|
|
<blockquote>
|
|
|
<p>日历控件实现如下图的效果：</p>
|
|
|
</blockquote>
|
|
|
<img src="helper/calendar/calendar.jpg" />
|
|
|
<p>另外，日历控件除了有供选择的输入格式外，还支持自定义的格式，自定义格式设置要求如下：</p><br/>
|
|
|
<code>yMdHmswW</code><br/><br/>
|
|
|
分别代表：年月日时分秒星期周,可以任意组合这些元素来自定义你个性化的日期格式。<br/><br/>
|
|
|
日期格式表：<br/><br/>
|
|
|
<table class="table table-bordered table-condensed table-striped">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>格式</th>
|
|
|
<th>说明</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr>
|
|
|
<td><code>y</code></td>
|
|
|
<td>
|
|
|
将年份表示为最多两位数字，如果年份多于两位数，则结果中仅显示两位低位数。
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>yy</code></td>
|
|
|
<td>
|
|
|
同上，如果小于两位数，前面补零。
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>yyy</code></td>
|
|
|
<td>
|
|
|
将年份表示为三位数字。如果少于三位数，前面补零。
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>yyyy</code></td>
|
|
|
<td>
|
|
|
将年份表示为四位数字。如果少于四位数，前面补零。
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>M</code></td>
|
|
|
<td>
|
|
|
将月份表示为从 1 至 12 的数字
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>MM</code></td>
|
|
|
<td>
|
|
|
同上，如果小于两位数，前面补零。
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>MMM</code></td>
|
|
|
<td>
|
|
|
返回月份的缩写 一月 至 十二月 (英文状态下 Jan to Dec) 。
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>MMMM</code></td>
|
|
|
<td>
|
|
|
返回月份的全称 一月 至 十二月 (英文状态下 January to December) 。
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>d</code></td>
|
|
|
<td>
|
|
|
将月中日期表示为从 1 至 31 的数字。
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>dd</code></td>
|
|
|
<td>
|
|
|
同上，如果小于两位数，前面补零。
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>H</code></td>
|
|
|
<td>
|
|
|
将小时表示为从 0 至 23 的数字。
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>HH</code></td>
|
|
|
<td>
|
|
|
同上，如果小于两位数，前面补零。
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>m</code></td>
|
|
|
<td>
|
|
|
将分钟表示为从 0 至 59 的数字。
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>mm</code></td>
|
|
|
<td>
|
|
|
同上，如果小于两位数，前面补零。
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>s</code></td>
|
|
|
<td>
|
|
|
将秒表示为从 0 至 59 的数字。
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>ss</code></td>
|
|
|
<td>
|
|
|
同上，如果小于两位数，前面补零。
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>w</code></td>
|
|
|
<td>
|
|
|
返回星期对应的数字 0 (星期天) - 6 (星期六) 。
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>D</code></td>
|
|
|
<td>
|
|
|
返回星期的缩写 一 至 六 (英文状态下 Sun to Sat) 。
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>DD</code></td>
|
|
|
<td>
|
|
|
返回星期的全称 星期一 至 星期六 (英文状态下 Sunday to Saturday) 。
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>W</code></td>
|
|
|
<td>
|
|
|
返回周对应的数字 (1 - 53) 。
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>WW</code></td>
|
|
|
<td>
|
|
|
同上，如果小于两位数，前面补零 (01 - 53) 。
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
示例：<br/><br/>
|
|
|
<table class="table table-bordered table-condensed table-striped">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>格式字符串</th>
|
|
|
<th>值</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr>
|
|
|
<td><code>yyyy-MM-dd HH:mm:ss</code></td>
|
|
|
<td>2012-06-12 19:20:00</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>yy年M月</code></td>
|
|
|
<td> 12年8月 </td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>yyyyMMdd</code></td>
|
|
|
<td> 20080312 </td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>现在是:yyyy 年M年d HH时mm分</code></td>
|
|
|
<td> 现在是:2012 年8月12日 19时20分 </td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>H:m:s</code></td>
|
|
|
<td> 19:20:0 </td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>y年</code></td>
|
|
|
<td> 8年 </td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><code>MMMM d, yyyy</code></td>
|
|
|
<td> 三月 12, 2012 </td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script type="text/javascript">
|
|
|
var oNode = null;
|
|
|
window.onload = function() {
|
|
|
//弹出窗口初始化函数，这里主要是判断是编辑下拉列表还是新增
|
|
|
if( UE.plugins['calendar'].editdom ){
|
|
|
oNode = UE.plugins['calendar'].editdom;
|
|
|
$G('txtName').value = oNode.getAttribute('title');
|
|
|
var sDateFmt = oNode.getAttribute('date_format');
|
|
|
if ( sDateFmt == null ) {
|
|
|
$G('dateFormat').value = "yyyy-MM-dd";
|
|
|
} else if ( sDateFmt == "yyyy-MM-dd" ) {
|
|
|
$G('dateFormat').options[0].selected = true;
|
|
|
} else if ( sDateFmt == "yyyy-MM-dd HH:mm:ss" ) {
|
|
|
$G('dateFormat').options[1].selected = true;
|
|
|
} else {
|
|
|
$G('dateFormat').value = "";
|
|
|
$G('def_format').value = sDateFmt;
|
|
|
$G('def_format').style.display = "";
|
|
|
}
|
|
|
var sWidth = oNode.style.width;
|
|
|
$G('txtWidth').value = sWidth.substr(0, sWidth.length - 2);//这里的substr是为了去掉末尾的'px'
|
|
|
var sHeight = oNode.style.height;
|
|
|
$G('txtHeight').value = sHeight.substr(0, sHeight.length - 2);
|
|
|
}
|
|
|
$('#showTips').popover({placement:'top'});
|
|
|
}
|
|
|
function fnShowDef(val){
|
|
|
$G("def_format").style.display = val =="" ? "" : "none";
|
|
|
}
|
|
|
function fnShowGuide(){
|
|
|
$('#tblwrap').slideToggle().siblings().slideToggle();
|
|
|
}
|
|
|
dialog.oncancel = function () {
|
|
|
if( UE.plugins['calendar'].editdom ) {
|
|
|
delete UE.plugins['calendar'].editdom;
|
|
|
}
|
|
|
};
|
|
|
dialog.onok = function (){
|
|
|
if($G('txtName').value == '') {
|
|
|
alert('控件名称不能为空');
|
|
|
$G('txtName').focus();
|
|
|
return false;
|
|
|
}
|
|
|
if( !oNode ) {
|
|
|
var sUrl = parent.getItemUrl;
|
|
|
var nItemId = null;
|
|
|
ajax.request(sUrl, {timeout:60000,onsuccess:function (xhr) {
|
|
|
try {
|
|
|
nItemId = xhr.responseText;
|
|
|
oNode = document.createElement('input');
|
|
|
oNode.setAttribute('name','data_' + nItemId);
|
|
|
oNode.setAttribute('title',$G('txtName').value.replace("\"","""));
|
|
|
if( $G('dateFormat').value == '' ) {
|
|
|
oNode.setAttribute('date_format',$G('def_format').value);
|
|
|
} else {
|
|
|
oNode.setAttribute('date_format',$G('dateFormat').value);
|
|
|
}
|
|
|
if( $G('txtWidth').value!=''){
|
|
|
oNode.style.width = $G('txtWidth').value + 'px';
|
|
|
} else {
|
|
|
oNode.style.width = '100px';
|
|
|
}
|
|
|
if( $G('txtHeight').value!=''){
|
|
|
oNode.style.height = $G('txtHeight').value + 'px';
|
|
|
} else {
|
|
|
oNode.style.height = '25px';
|
|
|
}
|
|
|
oNode.setAttribute('class', 'date') ;
|
|
|
oNode.setAttribute('className', 'date');
|
|
|
editor.execCommand('insertHtml',oNode.outerHTML);
|
|
|
} catch (e) {
|
|
|
alert ( '插入控件出错，请联系OA管理员解决 ');
|
|
|
return false;
|
|
|
}
|
|
|
},
|
|
|
error:function () {
|
|
|
alert('Request TimeOut');
|
|
|
return false;
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
if( $G('txtWidth').value!=''){
|
|
|
oNode.style.width = $G('txtWidth').value + 'px';
|
|
|
} else {
|
|
|
oNode.style.width = '100px';
|
|
|
}
|
|
|
if( $G('txtHeight').value!=''){
|
|
|
oNode.style.height = $G('txtHeight').value + 'px';
|
|
|
} else {
|
|
|
oNode.style.height = '25px';
|
|
|
}
|
|
|
oNode.setAttribute('title',$G('txtName').value.replace("\"","""));
|
|
|
if( $G('dateFormat').value == '' ) {
|
|
|
oNode.setAttribute('date_format',$G('def_format').value);
|
|
|
} else {
|
|
|
oNode.setAttribute('date_format',$G('dateFormat').value);
|
|
|
}
|
|
|
delete UE.plugins['calendar'].editdom; //使用后清空这个对象，变回新增模式
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|