仿element-ui datapicker组件的jQuery日期选择器插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

datepicker是一个基于jQuery的日期选择器插件，它支持范围选择、最大和最小设置、时间格式自由转换、UI美观、易于使用，参考了element-ui datePicker的设计。

它不依赖于其他库，只需要引入两个文件就可以使用。它还提供了一些自定义属性和事件回调函数，让你可以根据你的需求来调整日期选择器的功能和样式。

它的特点有：

支持时分秒年月日范围选择
最大最小值限制
限制开始结束时间间隔最大值
快捷选项简易配置
支持只选年月，只选年

使用方法

安装

首先你需要在页面中引入你要的文件：

// picker css（加载了fonts,具体看scss文件夹）
<link rel="stylesheet" href="css/datepicker.css">

// rely on plugins
<script src="js/plugins/jquery.js"></script>
<script src="js/plugins/moment.min.js"></script>
// picker js
<script src="js/datepicker.all.min.js"></script>

使用

然后再页面中就可以使用了：

通过下面的代码来初始化日期选择器：

// 年月日单个(J-datepicker-day对应html里的input父元素div)
$('.J-datepicker-day').datePicker({
	hasShortcut: true,
	format:'YYYY-MM-DD',
	shortcutOptions: [{
	  name: '今天',
	  day: '0'
	}, {
	  name: '昨天',
	  day: '-1'
	}, {
	  name: '一周前',
	  day: '-7'
	}]
});

你也可以使用日期范围：

//年月日范围
$('.J-datepicker-range-day').datePicker({
	hasShortcut: true,
	format: 'YYYY-MM-DD',
	isRange: true,
	shortcutOptions: [{
		name: '最近一周',
		day: '-7,0'
	}, {
		name: '最近一个月',
		day: '-30,0'
	}, {
		name: '最近三个月',
		day: '-90, 0'
	}]
});

你还可以指定日期范围的最小值、最大值和显示格式：

$('.J-datepicker-range').datePicker({
    hasShortcut: true,
    min: '2018-08-31 00:00:00',
    max: '2019-08-31 23:59:59',
    isRange: true,
    shortcutOptions: [{
      name: '昨天',
      day: '-1,-1',
      time: '00:00:00,23:59:59'
    },{
      name: '最近一周',
      day: '-7,0',
      time:'00:00:00,'
    }, {
      name: '最近一个月',
      day: '-30,0',
      time: '00:00:00,'
    }, {
      name: '最近三个月',
      day: '-90, 0',
      time: '00:00:00,'
    }]
  });

配置参数

配置参数如下：

参数名	默认值（可选值）	作用	类型
format	YYYY-MM-DD HH:mm:ss	datepicker 类型	String
isRange	false	是否范围选择	Boolean
min	false	时间最小值	false/String
max	false	时间最大值	false/String
hasShortcut	false	是否开启快捷选项	Boolean
shortcutOptions	[]	快捷选项配置参数	Array
between	false	开始和结束值之间的时间间隔天数（只对范围有效）	false/Number
hide	function	时间插件选择框隐藏时调用这个函数	function
show	function	时间插件选择框显示后调用这个函数	function