bootstrap-4的datetimepicker實現多選日期且過期的日期不可選擇

     在實現之前,找了很多教程發現並不適用,結果參看了官網的實例,其實也就是幾行代碼解決的事情,貼出來希望能讓和我一樣迷惑的小夥伴能儘快解決自己的問題~

本文目錄:

1.先看一下官網給的多選日曆控件的實現代碼

2.實現設置過期日期不可選擇


1.先看一下官網給的多選日曆控件的實現代碼

     點這裏進官網看實例     

實現效果:

 


可以發現,官網給的代碼只能實現日期多選,並不能實現將過期的日期設置爲不可選擇

因此動手來改吧~~見小標題2

 

2.實現設置過期日期不可選擇

對1.中官網給出的實例進行修改:

在設置裏面加上一行代碼minDate:new Date(),//過期時間不可選擇

 

具體代碼如下:

<script type="text/javascript">

$(function () {

$('#datetimepicker14').datetimepicker({

format:'L',//顯示日期格式爲月日年

minDate:new Date(),//過期時間不可選擇

allowMultidate: true,//允許日期多選

multidateSeparator: ','//多個時間以逗號隔開

});

});

</script>

 

實現效果:可以看到,今日11號之前的日期變成了灰色,用戶不可選擇

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章