jh-date-selector v1.0.3

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();
		});
	},
};

属性介绍

selector.show() 显示弹窗

selector.hide() 关闭弹窗

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

开发流程

$ npm install
$ npm run dev
$ npm run build