斑马Datepicker 
一个超轻量级，高度可配置的跨浏览器日期/时间选择器jQuery插件
Zebra_Datepicker是一个小而高度可配置的日期选择器/时间选择器jQuery插件，旨在通过向它们添加日期/时间选择器功能来丰富表单。这个jQuery插件会自动将一个日历图标添加到指示的输入字段，单击该字段时，将打开附加的日期选择器。由于日期选择器的直观界面，用户可以轻松地在数月和数年之间跳转。所选日期将使用所选日期格式输入到输入字段中，可在日期选择器选项中进行配置。
特征
- 它很小 - 它的重量约为30KB（压缩9.1KB），提供每个字节的最佳功能比
- 它既是日期选择器，也是时间选择器
- 它是跨浏览器 - 适用于所有主流浏览器; 也适用于Internet Explorer 6！
- 有一个默认的配色方案，几乎可以与任何设计融为一体，并且可以通过组织良好的CSS文件轻松定制; 包括两个额外的主题，其中一个用于Twitter Bootstrap
- 提供直观的界面，可以轻松导航数月和数年
- 提供了一种直观的机制，可以使用类似于cron语法的语法来禁用日期和日期范围
- 支持为周六和周日没有周末的国家定义自定义周末日
- 支持大多数你能想到的日期格式，借用PHP日期函数的语法
- 支持开始和结束日期的各种组合
- 日期选择器可以“配对” - 其中一个或多个日期选择器将使用另一个日期选择器的值作为开始日期
- 支持国际化
- 通过自动将小日历图标附加到指示的输入字段来工作，该字段在单击时显示附加的日期选择器。
- 它与AMD和CommonJS兼容
演示
看演示
要求
Zebra Datepicker没有jQuery 1.7.0+以外的依赖项，并要求您使用该插件的页面具有严格的doctype，如：
<！doctype html > 安装
Zebra Datepicker以npm包的形式提供。要安装它，请使用：
＃ “--save”参数将该插件添加为packages.json中的依赖项
npm install zebra_datepicker --save Zebra Datepicker也可作为Bower包提供。要安装它，请使用：
＃ “--save”参数将插件添加为bower.json中的依赖项
bower install zebra_datepicker --save 如何使用
首先，从CDN加载jQuery并提供对本地源的回退，如：
< script src = “ https://code.jquery.com/jquery-3.3.1.min.js ” > < / script >
< script > 窗口。jQuery || 文件。write（' <script src =“path / to / jquery-3.3.1.js”> < \ / script> '）< / script > 加载Zebra Datepicker jQuery插件：
< script src = “ path / to / zebra_datepicker.min.js ” > < / script > 或者，您可以从JSDelivr CDN加载Zebra Datepicker，如下所示：
<！ -对于最新版本，不建议在生产中使用- >
< script src = “ https://cdn.jsdelivr.net/npm/zebra_datepicker@latest/dist/zebra_datepicker.min.js ” > < / script ><！ -对于特定版本- >
< script src = “ https://cdn.jsdelivr.net/npm/zebra_datepicker@1.9.6/dist/zebra_datepicker.min.js ” > < / script ><！ -用“src”替换“min”将为您提供非压缩版本- > 从本地源加载样式表文件
< link rel = “ stylesheet ” href = “ path / to / theme / zebra_datepicker.min.css ” > ……或者来自JSDelivr CDN
<！ -最新版本的“默认”主题- >
< link rel = “ stylesheet ” href = “ https://cdn.jsdelivr.net/npm/zebra_datepicker@latest/dist/css/default/ zebra_datepicker.min.css “ ><！ -最新版本的“bootstrap”主题- >
< link rel = “ stylesheet ” href = “ https://cdn.jsdelivr.net/npm/zebra_datepicker@latest/dist/css/bootstrap/ zebra_datepicker.min.css “ ><！ -用“src”替换“min”将为您提供非压缩版本- > Zebra Datepicker也可用于cdnjs，这是最着名的免费和公共Web前端CDN服务之一
现在，在DOM-ready事件中，将Zebra Datepicker插件附加到<input type="text">控件
$（文件）。ready（function（）{//假设您想要附加插件的控件//使用“datepicker”类设置$（ ' input.datepicker '）。Zebra_DatePicker（）;}）; 这将附加日历和指定的元素。单击该图标将使日期选择器可见。
要获得对附加到元素的Zebra DatePicker实例的引用，请执行以下操作：
var datepicker = $（' selector '）。数据（' Zebra_DatePicker '）; 配置选项
属性
所有参数都是可选的。
请注意，下面的任何属性也可以通过数据属性设置。要执行此操作，您必须使用要设置的属性的名称作为前缀data-zdp_。需要记住的一件重要事情是，如果属性的值是一个数组，则必须在方括号内使用双引号，因此在属性周围使用单引号。见例子。
活动
onChange
每当用户更改视图（天/月/年）时，以及当用户通过单击next/previous任何视图中的图标进行导航时，都会执行回调;
调用的回调函数接收2个参数
- 当前视图（
days，months或years） - 包含视图中活动元素（未禁用）的数组，作为jQuery元素，允许在日期选择器视图中轻松自定义和与特定单元格交互
this回调函数中的关键字是指日期选择器附加到的元素，作为jQuery对象。
为了简化对特定日期的搜索，每个元素都获得一个date数据属性，其格式取决于view参数的值，如下所示：
YYYY-MM-DD对于days视图中的元素YYYY-MM对于months视图中的元素YYYY对于years视图中的元素
以下是我们如何突出每年每个月的第 24 天：
$（'选择器'）。Zebra_DatePicker（{// 执行每当用户改变视图的功能// （日/月/年），以及当用户// 通过点击“下一个” /“上一个”图标可前往[ // 任何的意见的onChange ： function（ view， elements）{// 在“天”视图中... if（view === ' days '）{// 遍历视图元素中的活动元素。each（ function（）{// 为了简化搜索特定日期，// 每个元素都获得一个“日期”数据属性// // 形式为：// - YYYY-MM-DD，用于“天”视图中的元素// - YYYY-MM对于“月”视图 中的元素// - 对于“年”视图中的元素，为YYYY// 所以，因为我们正处于“天”视图，// 让我们使用常规// 表达式找到第24天（注意这将适用于// 每年每个月的第24天）if（ $</font></font></span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">（</font></font><span class="pl-c1"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> this</font></font></span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">）</font></font><span class="pl-c1"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> .data</font></font></span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">（</font></font><span class="pl-s"><span class="pl-pds"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> '</font></font></span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> date </font></font><span class="pl-pds"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">'</font></font></span></span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">）。</font></font><span class="pl-c1"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> match</font></font></span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">（</font></font><span class="pl-sr"><span class="pl-pds"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> / </font></font></span><span class="pl-cce"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">\ -</font></font></span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 24 </font></font><span class="pl-k"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">$ /））//并突出显示它！$（这）。css（{backgroundColor ： '＃C40000 '，颜色： '＃FFF '}）;}）;}}}）; onClear
用户单击“ 清除”按钮时要执行的回调函数。
回调函数不带参数。this回调函数中的关键字是指日期选择器附加到的元素，作为jQuery对象。
onClose
关闭日期选择器时要执行的回调函数。
回调函数不带参数。this回调函数中的关键字是指日期选择器附加到的元素，作为jQuery对象。
onOpen
显示日期选择器时要执行的回调函数。
回调函数不带参数。this回调函数中的关键字是指日期选择器附加到的元素，作为jQuery对象。
onSelect
选择日期时要执行的回调函数。
回调函数有3个参数：
- 日期采用
format属性指定的格式 YYYY-MM-DD如果启用了时间选择器，则格式为日期，另外还有小时，分钟和秒- 日期作为JavaScript Date对象
this 回调函数内部是指日期选择器附加到的元素，作为jQuery对象
方法
首先，获得对插件的引用
var datepicker = $（' selector '）。数据（' Zebra_DatePicker '）; 然后调用类似的方法
datepicker。update（）; clear_date()
清除所选日期（如果有）
destroy()
从元素中删除插件
set_date(date)
将日期选择器附加到的元素的值设置为指定的日期;
日期必须采用format属性或 JavaScript Date对象定义的格式。
如果禁用日期（disabled_dates由于direction属性或由于属性），将不会设置日期
Date从版本开始，方法的参数可以是JavaScript 对象1.9.11
show()
显示日期选择器（除非always_visible属性设置为true）
hide()
隐藏日期选择器（除非always_visible属性设置为true）
update([options])
在运行时更新配置选项，并重新计算日期选择器相对于父元素的图标位置。每当显示/隐藏/重新定位父元素或更改父元素的尺寸时，都应调用此方法。
该方法接受一个可选参数 - 一个具有更新配置选项的对象：
var datepicker = $（' selector '）。数据（' Zebra_DatePicker '）;
datepicker。更新（{方向： 1
}）; 如果您只想更新图标的位置，只需调用不带任何参数的方法：
var datepicker = $（' selector '）。数据（' Zebra_DatePicker '）;
datepicker。update（）; 全球选择
如果您有多个共享常用选项的日期选择器，您可以设置这些选项，如下所示：
//这只需要调用一次，而且
//不必在“就绪”块内调用！
$。fn。Zebra_DatePicker。defaults = { //任何有效选项
} 任何这样设置的选项都将应用于所有新创建的日期选择器。显然，在创建任何新的日期选择器时设置的选项将覆盖相应的默认值。
支持这个项目的开发
赞助商
跨浏览器/设备测试完成
