API Docs for: 0.1
Show:

UXC.Calendar Class

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

require: jQuery
require: window.cloneDate
require: window.parseISODate
require: window.formatISODate
require: window.maxDayOfMonth
require: window.isSameDay
require: window.isSameMonth

UXC Project Site | API docs | demo link

Methods

_logic.getLayout

() Selector private

获取日历组件的外观

Returns:

Selector: 日历组件的selector

_logic.initDateLayout

(
  • _dateObj
)
private

初始化日历组件的所有日期 _dateObj = { date: date, minvalue: date, maxvalue: date, initMinvalue: date, initMaxvalue: date };

Parameters:

  • _dateObj DateObjects

    保存所有相关日期的对象

_logic.initMonth

(
  • _dateObj
)
private

初始化月份

Parameters:

  • _dateObj DateObjects

    保存所有相关日期的对象

_logic.initMonthDate

(
  • _dateObj
)
private

初始化月份的所有日期

Parameters:

  • _dateObj DateObjects

    保存所有相关日期的对象

_logic.initTrigger

(
  • _selector
)
private

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

Parameters:

  • _selector Selector

_logic.initYear

(
  • _dateObj
)
private

初始化年份

Parameters:

  • _dateObj DateObjects

    保存所有相关日期的对象

_logic.onConfirm

() Int private

给文本框赋值, 日期为控件的当前日期

Returns:

Int: 0/1

_logic.pickDate

(
  • _selector
)
private

显示日历组件

Parameters:

  • _selector Selector

    input[type=text][datatype=date]

_logic.setDate

(
  • _timestamp
)
private

把日期赋值给文本框

Parameters:

  • _timestamp Int

    日期对象的时间戳

_logic.setNewMonth

(
  • _month
)
private

按月份更改日期

Parameters:

  • _month Int

    新的月份, mm

_logic.updateYear

(
  • _year
)
private

按年份更改日期

Parameters:

  • _year Int

    新的年份, YYYY

Calendar.getDate

(
  • _selector
)
static

获取初始日期对象

Parameters:

  • _selector Selector

    显示日历组件的input return Object { date: 0, minvalue: 0, maxvalue: 0, initMinvalue: 0, initMaxvalue: 0 }

Calendar.isCalendarElement

(
  • _selector!~YUIDOC_LINE~!return
)
static

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

Parameters:

  • _selector!~YUIDOC_LINE~!return Selector

    bool

Calendar.setPosition

(
  • _ipt
)
static

设置日历组件的显示位置

Parameters:

  • _ipt Selector

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

getCnNum

(
  • _num
)
static

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

Parameters:

  • _num Int

Returns:

string

hide

() static

隐藏日历组件

Example:

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

init

(
  • _selector
)
static

初始化 _selector 中的所有日历组件

Parameters:

  • _selector Selector

    需要初始化的日历组件父容器/日期选择input选择器

Example:

           <script>
               $.post( url, function( _d ){
                   _d = $(_d);
                   _d.appendTo(body);
                   UXC.Calendar.init( _d );
               });
           </script>

pickDate

(
  • _selector
)
static

弹出日期选择框

Parameters:

  • _selector Selector

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

Example:

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

pickMonth

(
  • _selector
)
static

弹出一年中所有月份的选择框

Parameters:

  • _selector Selector

pickSeason

(
  • _selector
)
static

弹出一年中所有季度的选择框

Parameters:

  • _selector Selector

pickWeek

(
  • _selector
)
static

弹出一年中所有周的选择框

Parameters:

  • _selector Selector

weekOfYear

(
  • _year
  • _dayOffset
)
static

取一年中所有的星期, 及其开始结束日期

Parameters:

  • _year Int
  • _dayOffset Int

    每周的默认开始为周几, 默认0(周日)

Returns:

Array

Properties

_logic

Object private static

私有逻辑处理对象, 基本上所有逻辑方法都存放于此对象

_logic.lastDateObj

Object private

最后一个显示日历组件的日期对象

_logic.lastDateObj

Object private

最后一个显示日历组件的日期对象

_logic.lastDateObj

Object private

最后一个显示日历组件的日期对象

_logic.lastDateObj

Object private

最后一个显示日历组件的日期对象

_logic.tpl

String private

日历组件模板

这是默认模板, 用户可以给 UXC.Calendar.tpl 赋值, 更改为自己的模板

autoInit

Bool static

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

Default: true

Calendar.lastIpt

Selector static

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

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

layoutHideCallback

Function static

日历隐藏后的回调函数

Default: null

layoutInitedCallback

Function static

初始化外观后的回调函数

Default: null

pickMonth.tpl

String static

自定义月份弹框的模板HTML

Default: empty

pickSeason.tpl

String static

自定义周弹框的模板HTML

Default: empty

pickWeek.dayOffset

Int static

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

Default: 1

pickWeek.tpl

String static

自定义周弹框的模板HTML

Default: empty

tpl

String static

自定义日历组件模板

默认模板为_logic.tpl

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

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 加载完毕后, 初始化日历组件相关事件

input focus

private

日历组件文本框获得焦点

month change

private

捕获用户更改月份

监听 月份下拉框

month map click

private

增加或者减少一个月

监听 月份map

next year

private

捕获用户更改年份

监听 下一年按钮

previous year

private

捕获用户更改年份

监听 上一年按钮

UXCCalendar click

private

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

window scroll, window resize

private

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

year change

private

捕获用户更改年份

监听 年份下拉框

year map click

private

增加或者减少一年

监听 年份map