jQuery cxCalendar 日期選擇器


cxCalendar 是基于 jQuery 的日期選擇器插件。

它靈活自由,你可以自定義外觀,日期的范圍,返回的格式等。

  • 版本:
  • jQuery v1.7+
  • jQuery cxCalendar v1.5

  • github

使用方法

載入 CSS 文件

<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'
}

參數說明

名稱默認值說明
startDate1950

起始日期

若指定年份,設置值為 4 位數的數字

若指定某一天,設置值為字符串或時間戳,該值能被new Date(value)處理

endDate2030

結束日期

若指定年份,設置值為 4 位數的數字

若指定某一天,設置值為字符串或時間戳,該值能被new Date(value)處理

dateundefined

默認日期

默認獲取當前日期,自定義可使用字符串或時間戳,該值能被new Date(value)處理

※ input 中的 value 值優先級要高級此值

type'date'

日期類型(v1.5 新增)

'date': 只選擇日期

'datetime': 選擇日期和時間

format'YYYY-MM-DD'

日期值格式(自 v1.5 開始,之前版本的 type 更名為 format)

'YYYY': 年份,完整 4 位數字

'YY': 年份,僅末尾 2 位數字

'MM': 月份,數字帶前導零(01-12)

'M': 月份(1-12)

'DD': 月份中的第幾天,數字帶前導零(01-31)

'D': 月份中的第幾天(1-31)

'HH': 小時,24 小時格式,數字帶前導零(00-23)

'H': 小時,24 小時格式(0-23)

'hh': 小時,12 小時格式,數字帶前導零(01-12)

'h': 小時,12 小時格式(1-12)

'mm': 分鐘,數字帶前導零(00-59)

'm': 分鐘(0-59)

'ss': 分鐘,數字帶前導零(00-59)

's': 分鐘(0-59)

'TIME': 時間戳

'STRING': 日期的字符串,例:Wed Jul 28 1993

wday0星期開始于周幾,可設置為:0-6 之間的數字

0: 星期日

1: 星期一

2: 星期二

3: 星期三

4: 星期四

5: 星期五

6: 星期六

positionundefined面板顯示的位置
baseClassundefined給面板容器增加 class,不會覆蓋默認的 class
languageundefined

自定義語言,值類型可是是字符串或對象

若為字符串,為語言配置文件中的屬性名稱(需要載入jquery.cxcalendar.languages.js

若為對象,則按照對象所設置的語言

data 屬性參數

名稱說明
data-start-date起始日期
data-end-date結束日期
data-type日期類型
data-format日期值格式
data-position面板顯示的位置
data-wday星期開始于周幾
data-language自定義語言
<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,即可根據用戶的語言環境,自動顯示對應的語言。

名稱默認值說明
monthList['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']月份的名稱。
weekList['日', '一', '二', '三', '四', '五', '六']星期的名稱。從星期日開始排序。
holiday[]節假日配置。

API 接口

var Api; 
$('#element_id').cxCalendar(function(api){ 
  Api = api; 
}); 
// 或者作為第二個參數傳入 
$('#element_id').cxCalendar({ 
  type: 'YYYY/M/D' 
}function(api){ 
  Api = api; 
});
   
名稱說明
show()顯示面板
hide()隱藏面板
getDate(style)獲取當前選擇的日期(style 格式與參數 format 相同)
setDate(value)傳入一個字符串來設置日期
setDate(year, month, day)分別傳入年、月、日來設置日期
gotoDate(value)傳入一個字符串來調整日期(只是顯示面板變化,不會進行設置值)
gotoDate(year, month)分別傳入年、月來調整日期(只是顯示面板變化,不會進行設置值)
clearDate()清除日期值
setOptions(opt)重新設置參數

在線實例

基礎示例實例預覽
選擇日期和時間實例預覽
日期范圍實例預覽
位置設定實例預覽
多語言和節假日實例預覽
API接口實例預覽


下載地址


股票配资平台l选一直牛