JGUI源碼：實現日期控件顯示(17)

時間 2019-12-08

標籤 jgui 源碼實現日期控件顯示简体版

原文原文鏈接

本文實現一個日期控件顯示，日期控件看起來很複雜，其實原理很簡單，大部分狀況下咱們直接使用別人作得好的日期控件就行，但有時候特殊需求，好比顯示提醒之類的，恐怕第三方控件就很差實現了，javascript

爲了使程序邏輯看起來簡單，切換日期，選擇日期等事件處理部分未實現，讀者能夠本身嘗試實現。html

一、日期控件分爲三個區域：頂部的顯示當前日期和選擇按鈕區域；中間的本月日期顯示列表，固定7*6=42個單元格；java

底部肯定、取消、當前日期選擇功能。數組

二、思路主要是：計算出應該顯示的單元格內容，而後替換tbody區域便可。函數

代碼以下ui

  <style>
         .jgui-datetimepicker
         {
             padding: 10px;
         }
         .jgui-datetimepicker .btn
         {
             padding: 5px;
         }
         .jgui-datetimepicker td
         {
            text-align:center;
         }
         .jgui-datetimepicker a
         {
            padding: 5px;
         }
         .jgui-datetimepicker .curyearmonth
         {
             margin:0px auto;
         }
    </style>

<body>
   <div>這是日期界面顯示代碼，事件函數將後續完善</div>
 <script type="text/javascript">
    //獲取指定日期當月的顯示數組
    function getMonthArray(date)
    {
        var arrDay = new Array(0)
        var htmlval="";
        var firstDayWeek=getWeekDay(getMonthBeginDate(date));
        var predays=firstDayWeek;
        for(var i=predays-1;i>0;i--)
        {
           var curdate= getDateMinus(date,-i);
           arrDay.push(curdate.getDate())
        }
        arrDay.push(date.getDate());
        for(var i=1;i<=8-predays;i++)
        {
           var curdate= getDateMinus(date,i);
           arrDay.push(curdate.getDate())
        }
        for(var i=8-predays+1;i<=42-predays;i++)
        {
            var curdate= getDateMinus(date,i);
           arrDay.push(curdate.getDate());
        }
        return arrDay;
    }
    //增長減小指定天數
    function getDateMinus(date,days)
    {
        var oneDay=1000*60*60*24;
        return new Date(date.getTime()+days*oneDay);
    }
    //獲取指定時間的年代
    function getYear(date){
        return date.getFullYear();
    }
    //獲取指定時間的月份
    function getMonth(date){
        return date.getMonth();
    }
    //獲取指定時間的月初日期
    function getMonthBeginDate(date){
        date.setDate(1);
        return date;
    }
    //獲取指定時間的月末日期
    function getMonthEndDate(date){
        var month=date.getMonth();
        var nextMonth=++month;
        var nextMonthFirstDay=new Date(endDate.getFullYear(),nextMonth,1).getTime();
        var oneDay=1000*60*60*24;
        return new Date(nextMonthFirstDay-oneDay);
    }
    //獲取指定時間的星期數
    function getWeekDay(date)
    {
        var a = new Array(0,1,2,3,4,5,6);  
        var week = new Date().getDay();  
        return a[week];  
    }
    //獲取指定時間的月初星期
    function getMonthBeginWeekDay(date){
        date.setDate(1);
        return startdate;
    }
    //獲取指定時間的月末星期
    function getMonthEndWeekDay(date){
    return date.getFullYear();
    }
    $(function() {
        var htmlval="";
        var index=0;
        var monthArray= getMonthArray(new Date());
        for(var line=0;line<6;line++)
        {
            var lineval="";
            for(var col=0;col<7;col++)
            {
                lineval=lineval+"<td>"+monthArray[index]+"</td>"
                index++;
            }
            htmlval=htmlval+"<tr>"+lineval+"</tr>";
        }
        $('.jgui-datetimepicker .value').html(new Date().Format("yyyy/MM/dd"));
        $('.jgui-datetimepicker .day').html(htmlval);
    });
    /**
     * 日期轉字符串
     * @param fmt
     * @returns
     */
    Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份 
            "d+": this.getDate(), //日 
            "h+": this.getHours(), //小時 
            "m+": this.getMinutes(), //分 
            "s+": this.getSeconds(), //秒 
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
            "S": this.getMilliseconds() //毫秒 
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o){
            if (new RegExp("(" + k + ")").test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            }
        }
        return fmt;
    }
 </script>
<div class="jgui-datetimepicker" style="position:relative;width:320px;height:220px;border: cadetblue 1px solid">
    <a class="btn preyear">上一年</a>
    <a class="btn preday">上一天</a>
    <a class="btn value">2019/3/15</a>
    <a class="btn nextday">下一天</a>
    <a class="btn nextyear">下一年</a>
    <hr style="margin:10px 0px"/>
    <table style="width:100%">
        <thead>
            <tr>
                <th>日</th>
                <th>一</th>
                <th>二</th>
                <th>三</th>
                <th>四</th>
                <th>五</th>
                <th>六</th>
            </tr>
        </thead>
        <tbody class="day">
            
        </tbody>
    </table>
    <hr style="margin:10px 0px"/>
    <div style="position:absolute;bottom: 10px;right: 10px;">
    <a>肯定</a>
    <a>取消</a>
    <a>如今</a>
    </div>
</div>
</body>