一個開源、美觀的日期選擇器(bootstrap datepicker)

bootstrap-datepicker是一個開源、基於bootstrap的日期選擇器，內建60+種語言，基於bootstrap也使得選擇器非常美觀適合現代網站，功能強大，通過內建屬性、方法、事件組合配置可以滿足幾乎所有日期選擇需求，唯一遺憾的是不支援時間選擇，只能選擇年月日。

1、下載及初始化

然後在頁面body元素中建立一個容器，如下所示。

最後在id為sandbox-container的div元素中建立input元素，並執行以下程式碼指令碼，一個日期選擇器就建立好了。

2、特色展示

⑴元件選擇


⑵內聯選擇

⑶範圍選擇


⑷格式化日期


⑸最大最小日期


⑹選擇器開始介面

0：天（預設）

1：月

2：年

3：十年

4：世紀


⑺最大最小選擇精度

minViewMode最小、maxViewMode最大

0：天（最小預設）

4：世紀（最大預設）

⑻今日、清除按鈕

⑼選擇器方向

auto：自動（預設）

top auto：向上自動

bottom auto：向下自動

auto left：自動向左

top left：左上

bottom left：左下

auto right：自動向右

top right：右上

bottom right：右下

⑽星期禁用、高亮

⑾多選、分隔符


⑿顯示第幾周

⒀選擇後自動關閉

⒁今日高亮

⒂選擇器介面顯示之前的回撥函式

有世紀、十年、年、月、日五種型別，如下所示是（日的例子）

⒃禁用日期

⒄選中取消

⒅預設初始化檢視

⒆鍵盤操作

⒇星期幾作為一週的開始

線上演示網站：

https://uxsolutions.github.io/bootstrap-datepicker/

API文件：

https://bootstrap-datepicker.readthedocs.io/en/latest/index.html

bootstrap datepicker內建8個事件（顯示、隱藏選擇器事件、清除日期選中事件和世紀、十年、年、月、日改變事件），內建20個方法（如銷燬、顯示、隱藏、更新選擇器方法等），支援鍵盤操作選擇日期，支援日期校驗等，功能豐富，希望以後能夠加入時間選擇。