myDate97用法
原创
©著作权归作者所有:来自51CTO博客作者Marydon的原创作品,请联系作者获取转载授权,否则将追究法律责任
myDate97用法
CreateTime--2017年5月12日11:00:32
Author:Marydon
一、基本用法
在页面中引入文件,例如:
<script type="text/javascript" src="<c:url value="/commons/js/My97DatePicker/WdatePicker.js"/>"></script>
常用属性介绍
描述 | 属性名 | 属性值 |
是否显示清空按钮 | isShowClear | true/false,默认值:true |
开始日期 | startDate | 定义初始状态下,显示日历控件时的默认选中时间 (一般指定当月的第一天:'%y-%M-01'或系统当前日期:'%y-%M-%d') |
最小日期 | minDate | |
最大日期 | maxDate | |
对日期进行格式化 | dateFmt | 可以指定日期格式,一般为:'yyyy-MM-dd' |
用法1:查询条件指定 开始日期和结束日期
用法2:控制能选取的最大日期为系统当前日期
onclick="WdatePicker({maxDate:'%y-%M-%d'});"
最大开始日期
<input name="BIRTH_DAY" class="TextBox" readonly id="BIRTH_DAY" onclick="WdatePicker({maxDate:'%y-%M-%d'});" type="text"/>
用法3:控制能选取的最小日期为系统当前日期
onclick="WdatePicker({minDate:'%y-%M-%d'});"
最小开始日期
<input name="APPLY_DATE" class="TextBox" readonly id="APPLY_DATE" onclick="WdatePicker({minDate:'%y-%M-%d'});" type="text"/>
用法4:对日期进行格式化
onclick="WdatePicker({dateFmt:'yyyy-MM-dd'});"
格式化
<input name="CONSULT_DATE" class="TextBox" type="text" readonly onclick="WdatePicker({dateFmt:'yyyy-MM-dd'});"/>
UpdateTime--2017年6月1日09:23:59
用法5:支持el表达式
<input name="CONSULT_DATE" class="TextBox" type="text" readonly id="CONSULT_DATE" value="${fn:substring(model.SYSTEMDATE,0,16) }"
onclick="WdatePicker({isShowClear:false,minDate:'${fn:substring(model.SYSTEMDATE,0,16) }',dateFmt:'yyyy-MM-dd HH:mm'});" />
用法6:根据所选日期显示星期几
用法6,非原创
HTML
<tr>
<td class="tdbiejing">值班日期</td>
<td>
<input type="text" class="TextBox" id="SCHEDULE_DATE" name="SCHEDULE_DATE"
onclick="WdatePicker({isShowClear:false,firstDayOfWeek:1,onpicked:weekDay,minDate:'%y-%M-%d'});" readonly/>
</td>
<td class="tdbiejing">星期</td>
<td>
<input type="text" class="TextBox" id="WEEK_TXT" name="WEEK_TXT" readonly/>
</td>
</tr>
JAVASCRIPT
function weekDay(){
var date = $dp.cal.getP('y') + "-" + $dp.cal.getP('M') + "-" + $dp.cal.getP('d');
this.value = date;//this代表当前input框
// 星期数组
var weekDays = new Array('星期日','星期一','星期二','星期三','星期四','星期五','星期六');
// 星期几
var wk = weekDays[parseInt($dp.cal.getP('w'))];
$get('WEEK_TXT').value = wk;
}
二、综合运用
使myDate97显示系统默认时间,以javascript获取系统时间为例
1.开始时间和结束时间
2.显示系统当前时间
<input name="CONSULT_DATE" class="TextBox" type="text" id="CONSULT_DATE" readonly onclick="WdatePicker({dateFmt:'yyyy-MM-dd'});"/>
window.onload=function() {
var date = new Date();
var dateFormat = date.Format("yyyy-MM-dd");//format()方法是自定义的
document.getElementById("CONSULT_DATE").value = dateFormat;
};
3.显示系统日期及星期
<tr>
<td class="tdbiejing">值班日期</td>
<td>
<input type="text" class="TextBox" id="SCHEDULE_DATE" name="SCHEDULE_DATE"
onclick="WdatePicker({isShowClear:false,firstDayOfWeek:1,onpicked:weekDay,minDate:'%y-%M-%d'});" readonly/>
</td>
<td class="tdbiejing">星期</td>
<td>
<input type="text" class="TextBox" id="WEEK_TXT" name="WEEK_TXT" readonly/>
</td>
</tr>
window.onload=function() {
showDate();
};
/**
* 获取当前系统日期及星期
*/
function showDate () {
// 设置值班日期默认时间
var myDate = new Date();
var weekDays = new Array('星期日','星期一','星期二','星期三','星期四','星期五','星期六');
// 获取当前天数
var day = myDate.getDay();
myDate = myDate.formatDate('yyyy-MM-dd');//自定义的日期类格式化方法
// 值班日期
$get('SCHEDULE_DATE').value = myDate;
// 星期几
$get('WEEK_TXT').value = weekDays[day];
}
作者:Marydon