同步操作将从 Yaohaixiao/calendar.js 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
一个简单实用的 JavaScript 日历控件!原生 JavaScript 编写,不依赖任何第三方库。支持日期、月份和年份试图切换;支持单选、多选、范围和星期选择模式;界面简介、配置简单、使用方便!
演示地址:https://yaohaixiao.github.io/calendar.js/
IE / Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
IE9, IE10, IE11, Edge | last 10 versions | last 10 versions | last 10 versions | last 10 versions |
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-7-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)
}
})
Type: String
Default: calendar
可选,用来指定显示日历控件的 DOM 节点的 ID。
Type: String|Number
Default: 今天
可选,用来指定日历控件初始化显示的时间字符串或者表示时间的数字。
Type: Number
Default: 0
可选,用来指定日历控件初始化显示的显示模式:
Type: String
Default: single
可选,用来指定日历控件的选择模式:
Type: Boolean
Default: true
可选,用来指定日历控件是否显示上下切换按钮(需要多日历显示时,可以配置为false)。
Type: Boolean
Default: true
可选,用来指定日历控件是否显示页脚(当前日期和时间)。
Type: Boolean
Default: true
可选,用来指定日历控件是否显示当前时间。
Type: Function
Default: Empty Function
可选,选择日期后的事件处理器。参数如下:
(说明:将日历控件作为日期选择器的时候需要配置此信息)
Type: Function
Default: Empty Function
可选,选择月份后的事件处理器。参数如下:
Type: Function
可选,选择年份后的事件处理器。参数如下:
Default: Empty Function
Type: Function
Default: Empty Function
可选,选择今天后的事件处理器。参数如下:
Type: Array
Default: ['日','一','二','三','四','五','六']
常量,星期栏的显示信息(如果想显示英文信息,可以调整这里的文本)。
Type: Object
常量,日历控件各个 DOM 节点的样式(如果希望自定义皮肤,可以针对性的调整配置)。
起初大致查询了一下关于公历日期和节气的计算,发现较为繁琐,加之时间有限,为确保 calendar.js 的代码简洁,移除了农历计算的方法,不过 wiki 中还是保留者之前查询的一些关于农历的算法,有兴趣的朋友可以参考一下:
JavaScript Code Licensed under MIT License.
API Documentation Licensed under CC BY 3.0
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。