jh-date-selector

Date selection component

live demo

快速上手

<div id="box">我是一个输入框</div>

浏览器环境

1. 引入 css 文件

<link rel="stylesheet" href="http://zhkumsg.gitee.io/date-selector/lib/index.css" />

2. 引入 js 文件

<script src="http://zhkumsg.gitee.io/date-selector/lib/index.min.js"></script>

3. 使用插件

var selector = new DateSelector({
	target: document.querySelector('#box'),
	data: [],
	max: 5,
	auto: true,
});

document.body.querySelector('#box').addEventListener('click', () => {
	this.selector.toggle();
});

webpack 环境

1. 安装

$ npm install jh-date-selector --save

2. 引入资源

import 'jh-date-selector';
import 'jh-date-selector/lib/index.css';

3. 使用插件

以vue为例

export default {
	data() {
		return {
			selector: null,
		};
	},
	mounted() {
		this.selector = new DateSelector({
			target: document.querySelector('#box'),
			data: [],
			max: 5,
			auto: true,
		});
		document.body.querySelector('#box').addEventListener('click', () => {
			this.selector.toggle();
		});
	},
};

属性介绍

| 属性 | 类型 | 必填 | 作用 | | :----------: | :------: | :--: | :--------------------------------------------: | | target | dom | 必填 | 目标元素，将在这下面显示 | | data | Array | 选填 | 为二元数组，内层数组为选中结果 | | max | Number | 选填 | 默认为 1，表示最多选中一组 | | auto | Bool | 选填 | 默认为 false,代表自动显示 | | className | String | 选填 | 自定义类名 | | change | Function | 选填 | 修改后触发 | | confirm | Function | 选填 | 确认后触发 | | disabledDate | Function | 选填 | 设置禁用状态，参数为当前日期，要求返回 Boolean |

selector.show() 显示弹窗

selector.hide() 关闭弹窗

selector.toggle() 显示/隐藏弹窗

开发流程

$ npm install
$ npm run dev
$ npm run build