JS Bootstrap-DateRangePicker 如何設置默認值為空


DateRangePicker是一款時間范圍選擇器,界面良好,非常適合短時間范圍選擇的插件,具體源碼可以在http://www.daterangepicker.com/找到

,但是目前使用中,感覺功能不甚齊全,所以將遇到的問題和解決方法記錄下來。

1無法默認值為空

DateRangePicker可以通過在初始化時設置startDate和endDate屬性,來實現設置初始默認值。其中可以引用moment這一款專門針對date的時間管理插件,例如使用options.startDate=moment() 設置初始默認值為當前時間

但是當想設置初始默認值為空時,即使設置startDate和endDate為 ' '也不行,會提示日期格式不對,無法實現。

所以,在此我們可以使用autoUpdateInput屬性,autoUpdateInput是用來打開和關閉daterangepicker選擇時,是否自動傳值到input[text] 這個DOM的屬性,通過設置初始autoUpdateInput為false,可以實現初始值為空,這是在input中設置的placeholder才能正常顯現出來。

但是設置該屬性之后,不管怎么選擇daterangePikcer的日期,都不會有傳值到input中,也就是沒有辦法正常顯示選擇的日期了,所以要在恰當的時刻,調用$(id).data('daterangepicker').autoUpdateInput=true,就可以了。

作者最初設置為,最初默認值為空,當daterangepicker 的input發生點擊時,autoUpadateInput=true,但是這時出現input不管是否選中日期,都會自動有值,所以為了修改這個問題,我在daterangepicker的源碼中進行了修改,當然也可以重新更改需要的onclick事件。

在源碼中,當autoUpdateInput設置為false之后,我們想要在點擊確定,選中日期和點擊range三個地方,將autoUpdateInput改變回來,所以,在三處設置了this.autoUpdateInput=true屬性,

在1207行左右,clickrange函數中,當點擊選擇了range時,改變autoUpdateInput屬性,在else中加入,是因為當選擇自定義標簽時,如果沒有選擇日期,依舊不改變默認值。選擇日期的改變,在后文所示。

 } else if (!this.endDate && date.isBefore(this.startDate)) {
            this.autoUpdateInput=true;
                //special case: clicking the same date for start/end,
                //but the time of the end date is before the start date
                this.setEndDate(this.startDate.clone());
            } else { // picking end
            this.autoUpdateInput=true;
                if (this.timePicker) {

在1335行左右,clickdate函數中,當點擊選擇了enddate也就是完整的選擇了日期時

 } else if (!this.endDate && date.isBefore(this.startDate)) {
            this.autoUpdateInput=true;
                //special case: clicking the same date for start/end,
                //but the time of the end date is before the start date
                this.setEndDate(this.startDate.clone());
            } else { // picking end
            this.autoUpdateInput=true;
                if (this.timePicker) {

在1400行左右,還有一種情況,就是當有時分秒的時間顯示時,有可能用戶會直接點擊確認,或更改時分秒,來選擇日期,所以在clickapply函數中,也改變autoUpdateInput值

clickApply: function(e) {
        this.autoUpdateInput=true;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM