Skip to content

seajs calendar.js(日期选择器)

awei.yu edited this page May 29, 2016 · 2 revisions

说明:基于calendar.js封装而成,用于日期选择

改变内容:

  1. 优化原有calendar.css,减少对其它节点样式的影响
  2. 可批量绑定输入框,并自动创建wrapper
  3. date视图下点击年份可进入编辑模式来快速定位到所需日期(新增:canEditYear属性)
  4. 修改默认显示日期为selectedRang中的结束日期,并支持字符串类型的日期默认值

API:

//inputNodes:input节点/input集合
bind(inputNodes,{
 canEditYear:是否允许手动输入年份以便能够快速定位(默认:true),
    // 宽度
 width: 280,
    // 高度, 不包含头部,头部固定高度
 height: 280,
  zIndex: 1,
    // 相对于目标节点的偏移位置,可设正负值
 offset: [0, 1],
    // 自定义类,用于重写样式
 customClass: '',
    // 显示视图
 // 可选:date, month
 view: 'date',
   // 设置选择范围
 // 格式:[开始日期, 结束日期]
 // 开始日期为空,则无上限;结束日期为空,则无下限
 // 如设置2015年11月23日以前不可选:[new Date(), null] or ['2015/11/23']
 selectedRang: null,
    // 默认日期。默认值:selectedRang中的结束日期或当前日期
 date: new Date(),
  format: 'yyyy/mm/dd',
    // 一周的第一天
 // 0表示周日,依次类推
 startWeek: 0,
    // 星期格式
 weekArray: ['日', '一', '二', '三', '四', '五', '六'],
    // 日期关联数据 [{ date: string, value: object }, ... ]
 // 日期格式与 format 一致
 // 如 [ {date: '2015/11/23', value: '面试'} ]
 data: null,
    // 展示关联数据
 // 格式化参数:{m}视图,{d}日期,{v}value
 // 设置 false 表示不显示
 label: '{d}\n{v}',
    // 切换字符
 prev: '<',
  next: '>',
  // 切换视图回调
 viewChange:function(view, year, month){
      
  },
  // view: 视图
 // date: 不同视图返回不同的值
 // value: 日期关联数据
 onSelected: function(view, date, value) {
        // body...
 },
  // 参数同上
 onMouseenter: $.noop,
  onClose: $.noop
})
You can’t perform that action at this time.