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;