jQuery 日期時間範圍選擇器 Date Range Picker (Bootstrap 外掛)

woff

過去網頁表單要輸入日期不容易，往往得另外裝個外掛，例如基於 jQuery 的套件 datepicker。

而現在的瀏覽器使用 HTML5 已成為標準，Input 標籤內建就有簡易的選擇日期功能，只要加入屬性 type="date" 就可使用，不必另裝外掛。

不過最近處理一個需求，需要輸入一段日期區間，也就是要選取頭尾 2 個日期，例如 2017/8/1 ~ 2017/9/1。不用外掛的話要做到這件事挺麻煩，版面效果也不佳。

來介紹一下這個強大的 Date Range Picker 外掛，以 jQuery、Bootstrap 為基礎而發展出來，不但功能完善，介面也十分美觀。

一、CDN 安裝法
二、中文化版本
參數修改(中文化版本)(新版已經不符合這版)


一、CDN 安裝法

1. 官網介紹

date-range-picker-1-jQuery 日期時間範圍選擇器﹍Date Range Picker(Bootstrap 外掛)

http://www.daterangepicker.com/

進入以上官網後，右上的「Download ZIP」可以下載外掛程式，但必須放在自己的網路空間，可使用「Dropbox 外連產生器」、或放在「Github」。

不過最方便的還是使用 CDN，速度又快，後面會說明。

官網的使用說明，請見上圖左邊紅框：

Usage：說明所有要引用的連結，以及啟動外掛的語法
Examples：這部分提供基礎的使用範例，可明白各種狀況下的使用語法，基本上看完這些就夠用了。
Configuration Generator：這裡提供一個快捷的 API 調用器，可根據自己需求勾選項目，可立即看到效果，可快速幫助學習使用。
Options, Methods & Evens：需要使用進階、或自訂功能時，就必須讀一下這裡的 API　使用說明書


2. CDN 安裝法

Date Range Picker 算是很強大的外掛，因此不少 CDN 都有提供檔案連結。

使用前必須先載入 jQuery、Bootstrap，全部的 CDN 連結及啟動語法如下：

1. <!--載入連結-->
   
2. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
   
3. <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"></link>
   
4. <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/moment.min.js"></script>
   
5. <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.min.js"></script>
   
6. <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.min.css" rel="stylesheet"></link>
   
7. <!--載入連結-->
   
8. 
   
9. <!--要選取日期的元素-->
   
10. <input class="default" type="text"/>
    
11. <!--要選取日期的元素-->
    
12. 
    
13. <!--執行 Date Range Picker-->
    
14. <script>
    
15. $("input.default").daterangepicker();
    
16. </script>
    
17. <!--執行 Date Range Picker-->

複製代碼

執行後就可看到最基本的效果，就像下面這個輸入框：

02/01/2026 - 02/01/2026

二、中文化版本

Date Range Picker 預設顯示英文字元，讀一下說明書可修改參數，將所有字串改為中文。

有網友做了中文化版本，且改善了介面，會更好操作，有需要的話可參考這個 Github 專案：

https://github.com/lanleiming/daterangepicker-extend

展示網址：https://kingliwei.com/appointment.html

jQuery 日期範圍選擇器 Bootstrap date-range-picker

來源：https://tw.wfublog.com/2017/08/j ... cker-bootstrap.html