實(shí)現(xiàn)my97DatePicker/WdatePicker 的周日歷

最終效果如下:開(kāi)始日期與結(jié)束日期最小間隔一周,最大間隔30周,開(kāi)始日期結(jié)束日期都在當(dāng)前周之前,且從周一至周日算為一整周,現(xiàn)在是周二

默認(rèn)日歷的第一天是從周日開(kāi)始的,需要在配置項(xiàng)加入firstDayOfWeek:1,使開(kāi)始的一周從星期一開(kāi)始計(jì)算

image.png
image.png
        // 周歷開(kāi)始時(shí)間 配置項(xiàng)
        function beginWeek(begin, end) {
          // 獲取當(dāng)天時(shí)間 周幾
          var now = new Date(); 
          var curday = 7 - now.getDay(); // 7 - 當(dāng)前周幾
          WdatePicker({
            onpicked:function() {
              // 設(shè)置了一個(gè)隱藏的input存 年-月-日信息,供結(jié)束日期使用
              $('#' + begin + 'hidden').val($dp.cal.getP('y')+'-'+$dp.cal.getP('M')+'-'+$dp.cal.getP('d'))
              // 設(shè)置顯示的值 2018/10
              $dp.$(begin).value=$dp.cal.getP('y')+'-'+$dp.cal.getP('W','WW');
            },
            isShowWeek:'true',errDealMode:3,
            minDate:'%y-%M-{%d-210}', // 最小時(shí)間 當(dāng)前時(shí)間-210天
            maxDate:'%y-%M-{%d-14+'+ curday +'}', // 最大時(shí)間 當(dāng)前時(shí)間-14天再減去當(dāng)前的周幾數(shù)目,使高亮在周日那天
          });
        }

        // 周歷結(jié)束時(shí)間 配置項(xiàng)
        function endWeek(begin, end) {
          // 獲取當(dāng)天時(shí)間 周幾
          var now = new Date(); 
          var curday = now.getDay(); // 當(dāng)前周幾

          // 獲取開(kāi)始時(shí)間,后面拼接字符串是隨意寫(xiě)的,為了獲取時(shí)間戳
          var now = $('#beginDateWeekhidden').val() + ' ' +  '18:55:49:123'
          var nowTi = new Date(now)
          var nowTime = new Date(now).getTime(); // 獲取當(dāng)前時(shí)間戳
          var day = 7- nowTi.getDay() // 7 - 開(kāi)始時(shí)間選擇的周幾
          // 選擇周日時(shí)候可能會(huì)出現(xiàn)0的狀態(tài),這里處理一下
          day === 7 ? day = 0 : void 0
          WdatePicker(
          {onpicked:function(){ 
                $dp.$(end).value=$dp.cal.getP('y')+'-'+$dp.cal.getP('W','WW');
            },
            isShowWeek:'true',errDealMode:3,
            // 最小時(shí)間從周一開(kāi)始
            minDate:'#F{$dp.$D(\'beginDateWeekhidden\',{d:1+'+ day +'})}',
            // 最大時(shí)間到周日
            maxDate:'%y-%M-{%d-'+curday +'}',                        
          });
        }
<input id="beginDateWeek" name="beginDate" id="beginDate" type="text" readonly="readonly"
                    value="${beginDate}" maxlength="20" class="input-mini Wdate"
                    onclick="beginWeek('beginDateWeek','endDateWeek');"
                />
                <input id="beginDateWeekhidden" type="hidden" value=""/>
                -
                <input id="endDateWeek" name="endDate" id="endDate" type="text" value="${endDate}" readonly="readonly"
                    maxlength="20" class="input-mini Wdate" value="${beginDate.endDate}"
                    data-option='{"dateFmt":"yyyy-MM-dd","isShowWeek":"true"}'
                    onclick="endWeek('beginDateWeek','endDateWeek');"
                />

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容