Awesome

cxCalendar

cxCalendar 是基于 JavaScript 的日期选择器插件，支持日期、时间、月份、年份等多种类型。

它灵活自由，你可以自定义外观，日期的范围，返回的格式等。

优点

• 无第三方依赖
• 支持单日期、日期范围
• 支持 CSS 自定义样式
• 支持多语言扩展
• 全局仅有一个选择器，减少 DOM 污染

Demo: https://ciaoca.github.io/cxCalendar/

从 v3.0 开始，已移除 jQuery 的依赖，如果需要使用旧版，可查看 v2 分支。

安装方法

浏览器端引入

<link rel="stylesheet" href="cxcalendar.css">
<script src="cxcalendar.js"></script>

从 NPM 安装，作为模块引入

npm install cxcalendar3

import 'cxcalendar.css';
import cxCalendar from 'cxcalendar3';

使用

// 绑定到输入框
cxCalendar.attach(document.getElementById('input'));

// 动态调用，适合 input 可能会新增或删除的情况
document.body.addEventListener('focus', (e) => {
  if (e.target.nodeName.toLowerCase() === 'input') {
    cxCalendar(e.target);
  };
});

设置默认参数

cxCalendar.defaults.type = 'datetime';
cxCalendar.defaults.language = {
  monthList: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
  weekList: ['Sun', 'Mon', 'Tur', 'Wed', 'Thu', 'Fri', 'Sat'] 
};

API 接口

cxCalendar(document.getElementById('input')); // 立即显示日期选择器
cxCalendar.attach(document.getElementById('input'));
cxCalendar.detach(document.getElementById('input'));

实例 API 接口

var input = document.getElementById('input');

// 获取实例
var api = cxCalendar.attach(input);
api.show();

// 销毁实例
cxCalendar.detach(input);

options 参数说明

cxCalendar(element, options);
cxCalendar.attach(element, options);

date, startDate, endDate 的优先级与范围

• 当 date 早于 startDate 时，则为 startDate，晚于 endDate 时，则为 endDate
• 当 startDate 日期晚于 endDate 时，调整为 endDate 的一年前

date, startDate, endDate 支持的时间格式

日期连接符 - 可替换为 . 或 /
月、日、时、分、秒，可为数字或带有前导零

• y
• y-m
• y-m-d
• y-m-d h:i
• y-m-d h:i:s
• m-d
• m-d h:i
• m-d h:i:s
• h:i
• h:i:s

data 属性参数

<input type="text" value="2020-12-1" data-start-date="2020" data-end-date="2021" data-format="Y/m/d" data-language="en">

※ data 属性参数优先级要高于调用时的 options 参数

操作按钮

• 按钮文字在 css 中设置；
• today 按钮会根据配置来决定是否存在。例如 startDate 和 endDate 范围不包含当前时间，则不会存在；
• confirm 按钮在选择时间和选择范围时存在，不支持配置。

多语言配置

在 cxcalendar.languages.js 文件中进行配置，载入即可根据用户的语言环境，自动显示对应的语言。

// 自定义语言示例
'zh-cn': {
  am: '上午',
  pm: '下午',
  monthList: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
  weekList: ['日', '一', '二', '三', '四', '五', '六'],
  holiday: [
    {day: '1-1', name: '元旦'},  // 指定每年重复的节日
    {day: '2021-2-12', name: '春节'}  // 指定具体日期的节日
  ]
}