国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

怎樣實現一個datePicker(日期選擇)組件

layman / 1383人閱讀

摘要:百度前端技術學院上有一個任務,要實現一個日期選擇組件,本文由此而來看看需求組件默認一直呈顯示狀態通過某種方式選擇年月,選擇了年月后,日期列表做相應切換通過單擊某個具體的日期進行日期選擇組件初始化時,可配置可選日期的上下限。

百度前端技術學院上有一個任務,要實現一個日期選擇組件,本文由此而來~

看看需求

組件默認一直呈顯示狀態

通過某種方式選擇年、月,選擇了年月后,日期列表做相應切換

通過單擊某個具體的日期進行日期選擇

組件初始化時,可配置可選日期的上下限。可選日期和不可選日期需要有樣式上的區別

提供設定日期的接口,指定具體日期,日歷面板相應日期選中

日期選擇面板默認隱藏,會顯示一個日期顯示框和一個按鈕,點擊這兩個部分,會浮出日歷面板。再點擊則隱藏。

點擊選擇具體日期后,面板隱藏,日期顯示框中顯示選取的日期

增加一個接口,用于當用戶選擇日期后的回調處理

增加一個參數及相應接口方法,來決定這個日歷組件是選擇具體某天日期,還是選擇一個時間段

當設置為選擇時間段時,需要在日歷面板上點擊兩個日期來完成一次選擇,兩個日期中,較早的為起始時間,較晚的為結束時間,選擇的時間段用特殊樣式標示

增加參數及響應接口方法,允許設置時間段選擇的最小或最大跨度,并提供當不滿足跨度設置時的默認處理及回調函數接口

在彈出的日期段選擇面板中增加確認和取消按鈕

先完成一個組件的基本結構

    (function(window,document){
       function Calendar(options){
          //傳入配置的中的參數
          this.init();
       } 
       Calendar.prototype={
            init:function(){
               this.createDom();
               this.loadCss();
               this.cacheDom();
               this.bindEvents();
               this.render();
            },
            loadCss:function(){
               // 把組件所需的樣式表動態加載進來
            },
            createDom:function(){
               // 創建dom對象或者創建html片段或者創建template
            },
            cacheDom:function(){
               // 存儲dom 對象
            },
            bindEvents:function(){
               //事件綁定
            },
            render:function(){
              //渲染函數,更新數據或樣式
            }
       }
       window.Calendar=Calendar;//把組件對象綁定到全局
    }(window,document));

通常我寫組件時的基本結構如上,你可以根據組件的需要或者自己習慣進行編寫。然后就可以在html里面添加以下的代碼就可以調用我們的組件了,

下面再看一下我們的需求,我們來一 一分析

需求也不是很多嘛,手動斜眼~
先上圖,根據圖再慢慢分析


其實我們看了需求之后,每個人都會有一個大概的思路,下面說一下我的思路
首先,要實現一個日期選擇器,最重要的就是要有一個日歷,根據不同的年份和月份,日期面板上回顯示每一天和對應的周幾~
其實實現這一點的話就兩點

第一,要根據年份和月份算出每月有多少天

第二,要計算出每月的第一天(1號)是周幾
偽代碼如下:

 /**
     * @param  {string} year  年份
     * @param  {string} month 月份
     * @param  {string} day   號
     * @return {object}  message
     * message{
     * year   年份
     * month  月份
     * monthLen  那個月的天數
     * whichDay  1號是周幾
     * day       號
     * }    
     */
     function calculate(year,month,day){
                 var date=year+"/"+month+"/"+"1";
                 var whichDay=new Date(date).getDay();
              var message={
                    year:year,
                    month:month,
                    monthLen:new Date(year,month,0).getDate(),
                    whichDay:whichDay,
                    day:day
              };
              return message;
     },

我想看完代碼之后大家應該比較疑惑的是獲取每個月天數的那句代碼,這個比較優雅的做法是從這里看到的,
注意:在Date對象里month為0代表的是1月份,month為5代表6月份,所以我new Date(year,5,0)代表的六月份的第0天,即5月份的最后一天,所以還可以用getDate()獲取5月份的長度,getDate方法是返回指定日期對象的月份中的第幾天(1-31)。
所以當我們點擊了月份加減/年份加減的按鈕時,向calculate函數傳入變化后的year,month參數,然后進行渲染,日歷面板改變

其次,”選擇時間段并且另處于開始時間和結束時間之間的日期添加特殊的樣式“這一點也是花了不少時間來寫,
偽代碼如下:

// 初始化
var firstDate,secondDate=[0,0,0];
//點擊日歷面板上的日期的點擊事件的執行函數的片段,每當點擊事件被觸發,就會執行該片段

if(self.isSelectRange){
             var date=[self.year.innerHTML,self.month.innerHTML,ele.innerHTML];            
             if(self.firstDate[0]===0){// 
                if(self.secondDate[0]===0){//兩個日期都沒有被設置
                     self.firstDate=date;
                }else{//firstDate沒有被設置,secondDate已經被設置,
                     
                }
             }else{
                if(self.secondDate[0]===0){//firstDate已經設置,
                    self.secondDate=date;
                    if(compareDate(self.firstDate.join("/"),self.secondDate.join("/"))){//如果第一個選擇的日期大于第二次選擇的日期,進行交換
                        self.firstDate=[self.secondDate,self.secondDate=self.firstDate][0];
                    } 
                }else{//兩個日期都已經被設置,已經選擇了兩個元素,再次選擇則都
                   self.secondDate=[0,0,0];
                   self.firstDate=date;
                   self.clearDayInRangeStyle();
                }
             }
             self.day.innerHTML=ele.innerHTML;
             self.render();

firstDate,secondDate分別代表開始時間和結束時間。每次觸發日期的點擊事件時,就會執行以上的代碼片段,對firstDate和secondDate進行更改,這樣的話,無論是我對日歷面板進行更新或者對開始時間和結束時間之間的日期顯示不同的樣式,都可以通過firstDate和secondDate來實現。

顯示不同的樣式就判斷日期是否在開始時間和結束時間之間,每次重新render的時候就給選擇過的firstDate和secondDate添加樣式。

包括計算開始時間和結束時間之間的跨度是否在設定的跨度內,我們點擊按鈕后進行判斷。
最后,看看render函數怎么實現
關于render函數,有以下幾點需要注意:

清除日歷面板上的所有內容和樣式,樣式通過清除每個單元格上的類實現

根據每月1號是周幾和每月的長度生成每月的日歷

根據記錄的fisrtDate和secondDate來顯示已經選擇過的選擇的樣式

以上大概是我的思路,我也實現了一個組件,有興趣的朋友可以點這里,歡迎找bug~
ps:文筆還是不行,文章寫的好爛。。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115287.html

相關文章

  • 怎樣實現一個datePicker日期選擇組件

    摘要:百度前端技術學院上有一個任務,要實現一個日期選擇組件,本文由此而來看看需求組件默認一直呈顯示狀態通過某種方式選擇年月,選擇了年月后,日期列表做相應切換通過單擊某個具體的日期進行日期選擇組件初始化時,可配置可選日期的上下限。 百度前端技術學院上有一個任務,要實現一個日期選擇組件,本文由此而來~ 看看需求 組件默認一直呈顯示狀態 通過某種方式選擇年、月,選擇了年月后,日期列表做相應切換 ...

    beanlam 評論0 收藏0
  • 使用Vue寫一個datepicker

    摘要:演示地址希望大家能給個功能期望這個目前僅實現了一些常用的功能選擇時間這話說得有點多余最大最小時間限制中英文切換其實也就星期和月份需要切換可以以形式使用,也可在瀏覽器環境中直接使用沒了。。。 前言 寫插件是很有意思,也很鍛煉人,因為這個過程中能發現許多的細節問題。在前端發展的過程中,jQuery無疑是一個重要的里程碑,圍繞著這個優秀項目也出現了很多優秀的插件可以直接使用,大大節省了開發者...

    luckyyulin 評論0 收藏0
  • 「react-mobile-datepicker一個移動端的react日期選擇組件

    摘要:一個輕量級的移動端日期選擇器,不依賴于只有不到大小。可以通過上下滑動來設置年月日。在模擬的移動端可上下滑動觸發事件。使用例子組件屬性名稱類型默認描述是否彈出日期選擇框的主題包括根據指定的年,月,日格式顯示日期。 react-mobile-datepicker 一個輕量級的react移動端日期選擇器,不依賴于moment.js, 只有不到4k大小。 react-mobile-datepi...

    娣辯孩 評論0 收藏0
  • 開發移動端react組件datepicker的總結與教訓

    摘要:背景前一陣,應公司的需求,需要一個在移動端運行的組件選擇日期。思考過后變決定自己寫一套移動端日期選擇器組件。而應該從用戶的角度出發,提高組件的易用性與靈活性。 背景 前一陣,應公司的需求,需要一個在移動端運行的react組件datepicker(選擇日期)。搜索查找過后,我并沒有找到一個既輕量級簡潔又滿足需求的組件。大部分現成的日期選擇器都是相對于pc端開發的。 思考過后變決定自己寫一...

    sewerganger 評論0 收藏0
  • 前端技術 博客文章、書籍 積累

    摘要:好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優雅地使用把標簽放在結束標簽之后結束標簽之前的差別什么是響應式設計怎樣進行 書籍 《JavaScriptDOM編程藝術》《JavaScript高級程序設計》《JavaScript框架設計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹(修訂版)》《JavaScript設計模式》《J...

    LiangJ 評論0 收藏0

發表評論

0條評論

layman

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<