API Docs for: 0.2
Show:

JC.Calendar Class

日期选择组件
全局访问请使用 JC.Calendar 或 Calendar
DOM 加载完毕后 , Calendar会自动初始化页面所有日历组件, input[type=text][datatype=date]标签
Ajax 加载内容后, 如果有日历组件需求的话, 需要手动使用Calendar.init( _selector )
_selector 可以是 新加载的容器, 也可以是新加载的所有input

require: JC.common

JC Project Site | API docs | demo link

可用的html attribute, (input|button):(datatype|multidate)=(date|week|month|season)

defaultdate = ISO Date
默认显示日期, 如果 value 为空, 则尝试读取 defaultdate 属性
datatype = string
声明日历控件的类型:
date: 日期日历
week: 周日历
month: 月日历
season: 季日历
year: 年日历
monthday: 多选日期日历
multidate = string
与 datatype 一样, 这个是扩展属性, 避免表单验证带来的逻辑冲突
calendarshow = function
显示日历时的回调
function calendarshow( _selector, _ins ){
   var _selector = $(this);
   UXC.log( 'calendarshow', _selector.val() );
}
calendarhide = function
隐藏日历时的回调
function calendarhide( _selector, _ins ){
   var _selector = $(this);
   UXC.log( 'calendarhide', _selector.val() );
}
calendarlayoutchange = function
用户点击日历控件操作按钮后, 外观产生变化时触发的回调
function calendarlayoutchange( _selector, _ins ){
   var _selector = $(this);
   JC.log( 'calendarlayoutchange', _selector.val() );
}
calendarupdate = function
赋值后触发的回调
function calendarupdate( _startDate, _endDate, _ins ){
   var _selector = $(this);
   JC.log( 'calendarupdate', _selector.val(), _startDate, _endDate );
}
calendarclear = function
清空日期触发的回调
function calendarclear( _selector, _ins ){
   var _selector = $(this);
}
minvalue = ISO Date
日期的最小时间, YYYY-MM-DD
maxvalue = ISO Date
日期的最大时间, YYYY-MM-DD
currentcanselect = bool, default = true
当前日期是否能选择
multiselect = bool (目前支持 month: default=false, monthday: default = true)
是否为多选日历
calendarupdatemultiselect = function
多选日历赋值后触发的回调
参数: _data:
[{"start": Date,"end": Date}[, {"start": Date,"end": Date}... ] ]
function calendarupdatemultiselect( _data, _ins ){
   var _selector = $(this);
   window.JSON && ( _data = JSON.stringify( _data ) );
   JC.log( 'calendarupdatemultiselect:'
       , JC.f.printf( 'val:{0}, data:{1}', _selector.val(), _data ) );
}
dateFormat = string
自定义日期格式化显示, 使用 JC.f.dateFormat 函数进行格式化
如果日期去除非数字后不是 8/16 位数字的话, 需要 显式声明 dateParse 属性, 自定义日期解析函数
fullDateFormat = string
针对 日期类型: 月/季/年 定义显示格式, default: "{0} 至 {1}"
{0}代表开始日期, {1}代表结束日期
ignoreInitCalendarDate = bool, default = false
是否忽略初始化 控件的值
dateParse = function
自定义日期格式函数, 针对日期不能解析为 8 位数字的特殊日期
例子:
//
/// 针对月份日期格式化 YY-MM
//
function parseYearMonthDate( _dateStr ){
   _dateStr = $.trim( _dateStr || '' );
   var _r = { start: null, end: null };
   if( !_dateStr ) return _r;
   _dateStr = _dateStr.replace( /[^\d]+/g, '' );
   var _year = _dateStr.slice( 0, 4 ), _month = parseInt( _dateStr.slice( 4 ), 10 ) - 1;
   _r.start = new Date( _year, _month, 1 );
   return _r;
}
//
/// 针对季度日期格式化 YY-MM ~ YY-MM
//
function parseSeasonDate( _dateStr ){
   _dateStr = $.trim( _dateStr || '' );
   var _r = { start: null, end: null };
   if( !_dateStr ) return _r;
   _dateStr = _dateStr.replace( /[^\d]+/g, '' );
   _r.start = JC.f.parseISODate( _dateStr.slice( 0, 6 ) + '01' );
   _r.end = JC.f.parseISODate( _dateStr.slice( 6 ) + '01' );
   return _r;
}
//
/// 针对年份日期格式化 YY
//
function parseYearDate( _dateStr ){
   _dateStr = $.trim( _dateStr || '' );
   var _r = { start: null, end: null };
   if( !_dateStr ) return _r;
   _dateStr = _dateStr.replace( /[^\d]+/g, '' );
   var _year = _dateStr.slice( 0, 4 );
   _r.start = new Date( _year, 0, 1 );
   return _r;
}

Methods

_init

() private

内部初始化函数

_initHanlderEvent

() private

初始化相关操作事件

cancel

()

用户点击取消按钮时隐藏日历外观

clear

()

清除控件源内容

clone

(
  • _model
  • _view
)

克隆 Calendar 默认 Model, View 的原型属性

Parameters:

  • _model NewModel
  • _view NewView

defaultDate

(
  • _selector
)

获取控件源的初始日期对象

Parameters:

  • _selector Selector

getCnNum

(
  • _num
)
static

转换 100 以内的数字为中文数字

Parameters:

  • _num Int

Returns:

string

getDate

(
  • _selector
)
static

获取初始日期对象

这个方法将要废除, 请使用 instance.defaultDate()

Parameters:

  • _selector Selector

    显示日历组件的input return { date: date, minvalue: date|null, maxvalue: date|null, enddate: date|null }

getInstance

(
  • _selector
)
Calendar instance static

获取或设置 Calendar 的实例

Parameters:

  • _selector Selector

Returns:

Calendar instance:

hide

() static

隐藏日历组件

Example:

       <script>JC.Calendar.hide();</script>

hide

()

隐藏 Calendar

Returns:

CalendarInstance

init

(
  • _selector
)
private

初始化日历组件的触发按钮

Parameters:

  • _selector Selector

isCalendar

(
  • _selector!~YUIDOC_LINE~!return
)
static

判断选择器是否为日历组件的对象

Parameters:

  • _selector!~YUIDOC_LINE~!return Selector

    bool

layout

()

获取 Calendar 外观的 选择器

Returns:

selector

on

(
  • _evtName
  • _cb
)

使用 jquery on 绑定事件

Parameters:

Returns:

CalendarInstance

pickDate

(
  • _selector
)
static

弹出日期选择框

Parameters:

  • _selector Selector

    需要显示日期选择框的input[text]

Example:

       <dl>
           <dd>
               <input type="text" name="date6" class="manualPickDate" value="20110201" />
               manual JC.Calendar.pickDate
           </dd>
           <dd>
               <input type="text" name="date7" class="manualPickDate" />
               manual JC.Calendar.pickDate
           </dd>
       </dl>
       <script>
           $(document).delegate('input.manualPickDate', 'focus', function($evt){
           JC.Calendar.pickDate( this );
           });
       </script>

position

(
  • _ipt
)
static

设置日历组件的显示位置

Parameters:

  • _ipt Selector

    需要显示日历组件的文本框

selector

()

获取 显示 Calendar 的触发源选择器, 比如 a 标签

Returns:

selector

show

()

显示 Calendar

Returns:

CalendarInstance

trigger

(
  • _evtName
)

使用 jquery trigger 绑定事件

Parameters:

Returns:

CalendarInstance

type

(
  • _selector
)
static

获取控件源的实例类型
目前有 date, week, month, season 四种类型的实例

Parameters:

  • _selector Selector

Returns:

string

updateLayout

()

用户操作日期控件时响应改变

updateMonth

(
  • _offset
)

用户改变月份时, 更新到对应的月份

Parameters:

  • _offset Int

updatePosition

()

显示日历外观到对应的控件源

updateSelected

(
  • _userSelectedItem
)

把选中的值赋给控件源
用户点击日期/确定按钮

Parameters:

  • _userSelectedItem Selector

updateSelector

(
  • _selector
)

切换到不同日期控件源时, 更新对应的控件源

Parameters:

  • _selector Selector

updateYear

(
  • _offset
)

用户改变年份时, 更新到对应的年份

Parameters:

  • _offset Int

visible

()

返回日历外观是否可见

Returns:

bool

Properties

autoInit

Bool static

设置是否在 DOM 加载完毕后, 自动初始化所有日期控件

Default: true

cnUnit

String static

100以内的中文对应数字

Default: 十一二三四五六七八九

cnWeek

String static

每周的中文对应数字

Default: 日一二三四五六

defaultDateSpan

Int static

设置默认显示的年份数, 该数为前后各多少年 默认为前后各10年

Default: 20

domClickFilter

Function static

DOM 点击的过滤函数
默认 dom 点击时, 判断事件源不为 input[datatype=date|daterange] 会隐藏 Calendar
通过该回调可自定义过滤, 返回 false 不执行隐藏操作

Default: null

lastIpt

Selector static

最后一个显示日历组件的文本框

layoutHideCallback

Function static

日历隐藏后的回调函数

Default: null

layoutInitedCallback

Function static

初始化外观后的回调函数

Default: null

layoutShowCallback

Function static

显示为可见时的回调

Default: null

monthdayHeadAppendText

String static

多先日期弹框标题末尾的附加字样

Default: empty

monthdayTpl

String static

多选日期弹框的模板HTML

Default: empty

monthTpl

String static

自定义月份弹框的模板HTML

Default: empty

seasonTpl

String static

自定义周弹框的模板HTML

Default: empty

tpl

String static

自定义日历组件模板

默认模板为_logic.tpl

如果用户显示定义JC.Calendar.tpl的话, 将采用用户的模板

Default: empty

weekDayOffset

Int static

自定义周日历每周的起始日期
0 - 6, 0=周日, 1=周一

Default: 1

weekTpl

String static

自定义周弹框的模板HTML

Default: empty

yearTpl

String static

自定义周弹框的模板HTML

Default: empty

Events

calendar button click

private

日历组件按钮点击事件

cancel click

private

取消日历组件, 相当于隐藏

监听 取消按钮

clear click

private

清除文本框内容

监听 清空按钮

confirm click

private

选择当前日期

监听确定按钮

date click

private

日期点击事件

dom click

private

dom 点击时, 检查事件源是否为日历组件对象, 如果不是则会隐藏日历组件

dom ready

private

DOM 加载完毕后, 初始化日历组件相关事件

month map click

private

增加或者减少一个月

监听 月份map

next year

private

捕获用户更改月份

监听 下一月按钮

next year

private

捕获用户更改年份

监听 下一年按钮

previous year

private

捕获用户更改月份

监听 上一月按钮

previous year

private

捕获用户更改年份

监听 上一年按钮

UXCCalendar click

private

日历组件点击事件, 阻止冒泡, 防止被 document click事件隐藏

window scroll, window resize

private

监听窗口滚动和改变大小, 实时变更日历组件显示位置

year change

private

捕获用户更改年份

监听 年份下拉框

year map click

private

增加或者减少一年

监听 年份map