簡介

cxCalendar 是基於 jQuery 的日期選擇器外掛。
它靈活自由，你可以自定義外觀，日期的範圍，返回的格式等。

版本：

• jQuery v1.7+


• jQuery cxCalendar v1.5.3

下載地址及演示

線上演示地址：http://www.jqhtml.com//wp-content/uploads/2017/05/wz/jQuery.cxCalendar-1.5.3/
下載地址：點選下載

GitHub地址：https://github.com/ciaoca/cxCalendar/

使用方法

<link rel="stylesheet" href="jquery.cxcalendar.css">
 

載入 JavaScript 檔案

<script src="jquery.js"></script>
<script src="jquery.cxcalendar.js"></script>

DOM 結構

<input id="element_id" type="text">

呼叫 cxCalendar

$('#element_id').cxCalendar();

設定全域性預設值

// 需在引入 <script src="jquery.cxcalendar.js"></script> 之後，呼叫之前設定 
$.cxCalendar.defaults.startDate = 1980; 
$.cxCalendar.defaults.language = {
  monthList: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  weekList: ['Sun', 'Mon', 'Tur', 'Wed', 'Thu', 'Fri', 'Sat']
};
 

引數說明

data 屬性引數

<input id="element_id" type="text" value="1988-1-31" data-start-date="2000" data-end-date="2015" data-format="YYYY/M/D" data-language="en">

data 屬性設定的引數優先順序要高於呼叫時引數設定的值

多語言配置說明

只需載入jquery.cxcalendar.languages.js，即可根據使用者的語言環境，自動顯示對應的語言。

API 介面

var Api;
$('#element_id').cxCalendar(function(api){
  Api = api;
});
// 或者作為第二個引數傳入
$('#element_id').cxCalendar({
  type: 'YYYY/M/D'
}, function(api){
  Api = api;
});