myDate97用法

 

myDate97用法

CreateTime--2017年5月12日11:00:32
Author:Marydon

一、基本用法

官網鏈接：http://www.my97.net/index.asp 

在頁面中引入文件，例如：

<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，非原創，摘自：http://blog.csdn.net/u013803303/article/details/46049781

　　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];
}

 

 相關推薦：

• myDate97 設置開始時間和結束時間
• js獲取時間戳的三種方式
• js 獲取系統當前時間
• 另一日期控件：bootstrap-datetimepicker