客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称：calendar.js开源软件地址：https://gitee.com/yaohaixiao/calendar.js开源软件介绍：calendar.js
一个简单实用的 JavaScript 日历控件！原生 JavaScript 编写，不依赖任何第三方库。支持日期、月份和年份试图切换；支持单选、多选、范围和星期选择模式；界面简介、配置简单、使用方便！ Features
Example演示地址：https://yaohaixiao.github.io/calendar.js/ Browsers support
Usage日期视图模式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) }})APIOptionsparentType: Default: 可选，用来指定显示日历控件的 DOM 节点的 ID。 timeType: Default: 可选，用来指定日历控件初始化显示的时间字符串或者表示时间的数字。 viewModeType: Default: 可选，用来指定日历控件初始化显示的显示模式：
pickModeType: Default: 可选，用来指定日历控件的选择模式：
hasSwitcherType: Default: 可选，用来指定日历控件是否显示上下切换按钮（需要多日历显示时，可以配置为false）。 hasFooterType: Default: 可选，用来指定日历控件是否显示页脚（当前日期和时间）。 hasClockType: Default: 可选，用来指定日历控件是否显示当前时间。 onDatePickType: Default: 可选，选择日期后的事件处理器。参数如下：
（说明：将日历控件作为日期选择器的时候需要配置此信息） onMonthPickType: Default: 可选，选择月份后的事件处理器。参数如下：
onYearPickType: 可选，选择年份后的事件处理器。参数如下：
Default: onTodayPickType: Default: 可选，选择今天后的事件处理器。参数如下：
DAYSType: Default: 常量，星期栏的显示信息（如果想显示英文信息，可以调整这里的文本）。 STYLESType: 常量，日历控件各个 DOM 节点的样式（如果希望自定义皮肤，可以针对性的调整配置）。 MethodsPublic Methods
Static Methods
关于农历的计算起初大致查询了一下关于公历日期和节气的计算，发现较为繁琐，加之时间有限，为确保 calendar.js 的代码简洁，移除了农历计算的方法，不过 wiki 中还是保留者之前查询的一些关于农历的算法，有兴趣的朋友可以参考一下：
LicenseJavaScript Code Licensed under MIT License. API Documentation Licensed under CC BY 3.0  |
请发表评论