Calendar | 一个简单实用的 JavaScript 日历控件!

Calendar.jsv0.4.1

日期试图模式

new Calendar({
  // 设置显示位置
  parent: 'dates-view',
  // 初始化显示时间
  time: '2019-6-11',
  // viewMode:
  // 0 - 日期模式(默认值)
  viewMode: 0,
  // 配置日期选择的事件处理器 onDatePick,参数如下:
  // time - 选中的日期时间
  // $el - 点击的 DOM 节点
  // calendar - 日历控件的实例
  onDatePick: function (time, $el, calendar) {
    console.log('选择时间:', time)
    console.log('选择DOM:', $el)
    console.log('日历实例:', calendar)
  }
})

月份试图模式

new Calendar({
  parent: 'months-view',
  // 设置月份
  time: '2019-7',
  // viewMode:
  // 1 - 月份模式
  viewMode: 1,
  // 配置月份选择的事件处理器 onMonthPick,参数如下:
  // time - 选中的日期时间
  // $el - 点击的 DOM 节点
  // calendar - 日历控件的实例
  onMonthPick: function (time, $el, calendar) {
    console.log('选择时间:', time)
    console.log('选择DOM:', $el)
    console.log('日历实例:', calendar)
  }
})

年代试图模式

new Calendar({
  parent: 'years-view',
  // 设置年份
  time: '2021',
  // viewMode:
  // 1 - 年代模式
  viewMode: 2,
  // 配置月份选择的事件处理器 onYearPick,参数如下:
  // time - 选中的日期时间
  // $el - 点击的 DOM 节点
  // calendar - 日历控件的实例
  onYearPick: function (time, $el, calendar) {
    console.log('选择时间:', time)
    console.log('选择DOM:', $el)
    console.log('日历实例:', calendar)
  }
})

单选模式

new Calendar({
  // 设置显示位置
  parent: 'single-pick',
  // 初始化显示时间(默认选中时间)
  time: '2019-6-18',
  // viewMode:
  // 0 - 日期模式(默认值)
  viewMode: 0,
  // pickMode:
  // single - 单选模式
  pickMode: 'single',
  // 配置日期选择的事件处理器 onDatePick,参数如下:
  // time - 选中的日期时间
  // $el - 点击的 DOM 节点
  // calendar - 日历控件的实例
  onDatePick: function (time, $el, calendar) {
    console.log('选择时间:', time)
    console.log('选择的 DOM 节点:', $el)
    console.log('日历实例:', calendar)
  },
  // 配置今天选择的事件处理器 onTodayPick,参数如下:
  // 1. 先切换到日期试图模式;
  // 2. 触发日期选择的业务逻辑;
  onTodayPick: function (time, $el, calendar) {
    console.log('选择时间:', time)
    console.log('选择的 DOM 节点:', $el)
    console.log('日历实例:', calendar)
  }
})

多选模式

new Calendar({
  // 设置显示位置
  parent: 'multiple-pick',
  // 初始化显示时间(默认选中时间)
  time: '2019-6-19',
  // viewMode:
  // 0 - 日期模式(默认值)
  viewMode: 0,
  // pickMode:
  // multiple - 多选模式
  pickMode: 'multiple',
  // 配置日期选择的事件处理器 onDatePick,参数如下:
  // time - 选中的多个日期(已排序)时间
  // $el - 点击的 DOM 节点
  // calendar - 日历控件的实例
  onDatePick: function (time, $el, calendar) {
    console.log('选择时间:' + time)
    console.log('选择的 DOM 节点:' + $el)
    console.log('日历实例:' + calendar)
  },
  // 配置今天选择的事件处理器 onTodayPick,参数如下:
  // 1. 先切换到日期试图模式;
  // 2. 触发日期选择的业务逻辑;
  onTodayPick: function (time, $el, calendar) {
    console.log('选择时间:', time)
    console.log('选择的 DOM 节点:', $el)
    console.log('日历实例:', calendar)
  }
})

范围选择模式

new Calendar({
  // 设置显示位置
  parent: 'range-pick',
  // 初始化显示时间(默认选中时间)
  time: '2019-6-20',
  // viewMode:
  // 0 - 日期模式(默认值)
  viewMode: 0,
  // pickMode:
  // range - 多选模式
  pickMode: 'range',
  // 配置日期选择的事件处理器 onDatePick,参数如下:
  // time - 选中的日期时间范围
  // $el - 点击的 DOM 节点
  // calendar - 日历控件的实例
  onDatePick: function (time, $el, calendar) {
    console.log('选择时间:' + time)
    console.log('选择的 DOM 节点:' + $el)
    console.log('日历实例:' + calendar)
  },
  // 配置今天选择的事件处理器 onTodayPick,参数如下:
  // 1. 先切换到日期试图模式;
  // 2. 触发日期选择的业务逻辑;
  onTodayPick: function (time, $el, calendar) {
    console.log('选择时间:', time)
    console.log('选择的 DOM 节点:', $el)
    console.log('日历实例:', calendar)
  }
})

星期选择模式

new Calendar({
  // 设置显示位置
  parent: 'week-pick',
  // 初始化显示时间(默认选中时间)
  time: '2019-6-21',
  // viewMode:
  // 0 - 日期模式(默认值)
  viewMode: 0,
  // pickMode:
  // week - 多选模式
  pickMode: 'week',
  // 配置日期选择的事件处理器 onDatePick,参数如下:
  // time - 选中的日期时间范围
  // $el - 点击的 DOM 节点
  // calendar - 日历控件的实例
  onDatePick: function (time, $el, calendar) {
    console.log('选择时间:' + time)
    console.log('选择的 DOM 节点:' + $el)
    console.log('日历实例:' + calendar)
  },
  // 配置今天选择的事件处理器 onTodayPick,参数如下:
  // 1. 先切换到日期试图模式;
  // 2. 触发日期选择的业务逻辑;
  onTodayPick: function (time, $el, calendar) {
    console.log('选择时间:', time)
    console.log('选择的 DOM 节点:', $el)
    console.log('日历实例:', calendar)
  }
})

部件可见的配置
new Calendar({
  // 设置显示位置
  parent: 'visible-view',
  // 初始化显示时间
  time: '2019-6-11',
  // viewMode:
  // 0 - 日期模式(默认值)
  viewMode: 0,
  // 不显示切换按钮
  hasSwitcher: false,
  // 不显示页脚
  hasFooter: false,
  // 已经设置了不显示页脚,hasClock 也就无需配置了
  // hasClock: false,
  // 配置日期选择的事件处理器 onDatePick,参数如下:
  // time - 选中的日期时间
  // $el - 点击的 DOM 节点
  // calendar - 日历控件的实例
  onDatePick: function (time, $el, calendar) {
    console.log('选择时间:', time)
    console.log('选择DOM:', $el)
    console.log('日历实例:', calendar)
  }
})