zoukankan      html  css  js  c++  java
  • 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];
    }
  • 相关阅读:
    一周精彩内容分享(第 5 期):货拉拉悲剧的背后
    关于 HTTP 后端人员需要了解的 20+ 图片!
    百度地图午夜暗蓝风格
    百度地图开发自定义信息窗口openInfoWindow样式
    百度地图infowindow上添加自定义点击事件
    js显示当前日期时间和星期几
    iview 树形异步加载,首次加载子节点不能选择,点击父节点后才可以选择
    js 修改属性名和值。并只保留需要的属性
    css 条形百分比
    echarts 3d饼图
  • 原文地址:https://www.cnblogs.com/Marydon20170307/p/6844544.html
Copyright © 2011-2022 走看看