斑马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_。需要记住的一件重要事情是，如果属性的值是一个数组，则必须在方括号内使用双引号，因此在属性周围使用单引号。见例子。
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
| always_visible | 杂 | false | 日期选择器应该始终可见吗？ 将此属性设置为jQuery元素将导致日期选择器始终可见，指示的元素充当日期选择器的容器; 将此属性设置为boolean true将导致日期选择器在选择日期时不关闭，但仅在用户在日期选择器外部单击时才会关闭。 |
| 容器 | jQuery的 | $('body') | 默认情况下，日期选择器被注入文档的<body>元素中; 使用此属性告诉库将日期选择器注入自定义元素 - 当您希望日期选择器在特定位置打开时非常有用。 |
| custom_classes | 排列 | false | 应该有自定义类的日期。 以 {'myclass1': [dates_to_apply_the_custom_class_to],'myclass2': [dates_to_apply_the_custom_class_to]}… 形式的对象，其中dates_to_apply_the_custom_class_to是与 disabled_dates属性所需格式相同的日期数组。自定义类仅适用于日期选择器视图，而不适用于月/年视图！另请注意，如果禁用了应用类的日期，则类名将添加“_disabled”后缀。 为了应用自定义类中的样式，请确保使用以下语法： .Zebra_DatePicker .dp_daypicker td.myclass1 { .. }.Zebra_DatePicker .dp_daypicker td.myclass1_disabled { .. } |
| 天 | 排列 | ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] | 星期日到星期六的星期几。 |
| days_abbr | 杂 | false | 天数的缩写名称。 默认情况下，一天的缩写名称包含当天全名的前两个字母。虽然这在大多数语言中都很常见，但对于泰语，Loa，缅甸等语言也有例外，这是不正确的。对于这些情况，请指定一个数组，其中包含用于一周中7天的缩写; 让它 false使用一天名字的前两个字母作为缩写。 |
| DEFAULT_POSITION | 串 | 'above' | 日期选择器相对于其所连接元素的位置。 请注意，无论此设置如何，如果需要，日期选择器的位置将自动调整以适合视口。 可能的值是 above和below。此属性将如果被忽略 |
| 方向 | 杂 | 0 | 日历的方向
[1, 7]日历从明天[true, 7]开始，在该日历从参考日期开始后七天结束，并在该['2013-01-01', false]日历从2013年1月1日开始后七天结束，并且没有结束日期（“格式”为YYYY-MM-DD）[false, '2012-01-01']日历结束于参考日期并于2012年1月1日开始（“格式”为YYYY-MM-DD）
请注意，该
的 |
| disable_time_picker | 布尔 | false | 默认情况下，设置的格式，还包括时间（h，H，g，G，i，s，a，A）会自动启用时间选择器。如果要使用涉及时间但不需要时间选择器的格式，请将此属性设置为true。 |
| disabled_dates | 杂 | false没有禁用日期 | 一系列禁用日期，格式如下：'day month year weekday'其中工作日是可选的，可以是0-6（星期六到星期日）。语法类似于cron的语法：值由空格分隔，可能包含 *（星号）-（破折号）和,（逗号）分隔符。例如： ['1 1 2012']将禁止2012年1月1，['* 1 2012']将禁止在2012年1月所有天数['1-10 1 2012']将通过在2012年10禁用1月1日['1,10 1 2012']将在2012年禁用1月1日和10 ['1-10,20,22,24 1-3 *']将通过10停用1，再加上每年的22月和1月24日到三月['* * * 0,6']会禁用所有星期六和星期日['01 07 2012', '02 07 2012', '* 08 2012'] 将禁用2012年7月1日和2日以及2012年8月的所有活动禁用所有日期，而不是指定至少一个启用日期将把脚本发送到一个无限循环搜索一个有效的日期显示！ |
| enabled_dates | 杂 | false所有日期已启用 | 一系列已启用的日期，格式与disabled_dates属性所需的格式相同。要与disabled_dates属性一起使用，首先将disabled_dates属性设置为类似[* * * *] （将禁用所有内容）并将enabled_dates属性设置为，例如，[* * * 0,6]仅启用周末。 |
| enabled_hours | 杂 | false所有时间都是可选择的 | 一系列可选择的小时数。 只有当有道理 format：包含下列字符之一H，G，h，g。当包含或字符时，有效值介于0-24（未填充0！）之间，有效值介于（不填充！）时包含或字符。formatHG1-120formathg |
| enabled_minutes | 杂 | false所有分钟都可以选择 | 一系列可选分钟。 仅在 format包含i角色时才有意义。有效值介于0-59（未填充0！）之间 |
| enabled_seconds | 杂 | false所有秒都可以选择 | 一系列可选秒。 仅在 format包含s角色时才有意义。有效值介于0-59（未填充0！）之间 |
| FIRST_DAY_OF_WEEK | 整数 | 1星期一 | 周的开始日。 有效值是 0到6，周日到周六。 |
| 格式 | 串 | 'Y-m-d' | 返回日期的格式。 接受日期格式下列字符： d，D，j，l，N，w，S，F，m，M，n，Y，y，h，H，g，G，i，s，a，A，从PHP的借用语法日期功能。如果 format属性包含时间相关的字符（g，G，h，H，i，s，a，A），时间选择器将自动启用。
如果要使用涉及时间但不需要时间选择器的格式，请将该
请注意，设置无天的日期格式时（d，j），用户将能够选择只有年和月，并设置无月日（格式时F，m，M，n，t，d，j），用户将能够选择只有几年。同样，设置仅包含与时间相关的字符的格式将导致用户只能选择时间。另请注意， view如果是这种情况，则可以覆盖属性的值（即，如果日期格式不允许选择天数days，则view属性的值无效）。 |
| header_captions | 目的 | header_captions: {days: 'F, Y',months: 'Y',years: 'Y1 - Y2'} | 字幕在日期选择器的头，对于3周可能的观点：days，months，years对于每一个3次以下特殊字符可以从PHP的使用借用日期功能的语法： m，n，F，M，y和Y; 其中任何一个都将在运行时替换为适当的日期片段，具体取决于当前查看的日期。还有两个特殊字符Y1，Y2（大写字母代表4位数字，小写字母代表2位数字）代表currently selected year - 7和currently selected year + 4仅在years视图中使用的字符。尽管这些特殊字符，可以在任何的3次使用，你应该使用 m，n，F，M的days观点和y，Y，Y1，Y2，y1，y2为months和years看法，或者你可能会得到意想不到的效果！也可以使用文本和HTML，并且将按原样呈现，如下例所示（该库足够智能，在单词或HTML标记中使用时不能替换特殊字符）： header_captions: { days: 'Departure:<br>F, Y', months: 'Departure:<br>Y', years: 'Departure:<br>Y1 - Y2'} |
| icon_margin | 杂 | false | 图标周围的左右白色空间 如果 inside属性设置为true，则会更改目标元素的填充，以便元素的左边或右边填充（取决于值icon_position）将2 x icon_margin加上图标的宽度。如果 inside属性设置为false，则这将是元素和图标之间的距离。保留它以 false使用元素的现有填充 |
| icon_position | 串 | 'right' | 图标的位置。 接受的值是 left和right |
| 内 | 布尔 | true | 打开日期选择器的图标是否应该在元素内？ 如果设置为 false，则图标将放置在父元素的右侧，而如果设置为true，则将放置在父元素的右侧，但在元素本身 内部 |
| lang_clear_date | 串 | 'Clear' | 清除按钮 的标题。 |
| 个月 | 排列 | ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], | 月份名称 |
| months_abbr | 杂 | false | 月份的缩写名称。 默认情况下，月份的缩写名称包含月份全名的前3个字母。虽然这在大多数语言中都很常见，但对于泰语，Loa，缅甸等语言也有例外，这是不正确的。对于这些情况，请指定一个数组，其中包含一年中所用月份的缩写; 让它 false使用一个月的名字的前3个字母作为缩写。 |
| 导航 | 排列 | navigation: ['◀', '▶', '▲', '▼'] | 按顺序用于上一个/下一个和上/下按钮的HTML。 |
| 抵消 | 排列 | [5, -5] | 以像素（x，y）为单位的偏移量，用于移动日期选择器相对于图标右上角的位置，以切换日期选择器，或者，如果图标被禁用，则相对于元素的右上角，插件附加到。 请注意，这仅适用于日历相对于浏览器视口的位置不需要自动放置日期选择器以使其可见！ |
| open_icon_only | 布尔 | false | 设置true为时，日期选择器仅在用户单击关联图标时显示，而不是在单击关联元素时显示。 |
| open_on_focus | 布尔 | false | true如果希望在父元素（如果open_icon_only未设置为false）或关联的日历图标（如果show_icon设置为true）获得焦点时显示日期选择器，请 将此属性设置为。 |
| 对 | 目的 | false没有与另一个日期选择器配对 | 如果设置为附加了Zebra Datepicker的一个或多个jQuery元素，那些特定日期选择器将使用当前日期选择器的值作为开始日期 请注意， direction属性中设置的规则仍将适用，但引用日期将不是当前系统日期但是在当前日期选择器中选择的值。仅在包含“开始日期”的日期选择器上使用此属性，而不在具有“结束日期”的日期选择器上使用此属性，否则 |
| readonly_element | 布尔 | true | 日历附加到的元素是否应该是只读的？ 如果设置为 true，则只能通过日期选择器设置日期，并且无法手动输入。 |
| select_other_months | 布尔 | false | 是否可以选择上一个月和/或下个月的天数？ 请注意，如果将此属性的值设置为 true，则无论实际值如何，show_other_months都将考虑true值！ |
| show_clear_date | 杂 | 0 | 应清除日期按钮可见？ 可接受的值是：
|
| show_icon | 布尔 | true | 是否应将日历图标添加到插件所附加的元素中？ 设置为 true插件时，会将日历图标附加到插件所附加的元素。 |
| show_other_months | 布尔 | true | 是否可以看到上个月和/或下个月的天数？ |
| show_select_today | 杂 | 'Today' | 如果在今天按钮可见？ 将此属性设置为除布尔值之外的任何内容都 false将启用该按钮，并将使用属性的值作为按钮的标题。将其设置为false将禁用该按钮。 |
| show_week_number | 杂 | false | 是否应显示ISO 8601周数？ 除此之外的任何内容 false都将启用此功能，并将给定值用作列标题。例如，show_week_number: 'Wk'将启用此功能并将Wk作为列的标题。 |
| 开始日期 | 杂 | false | 启动日期选择器的默认日期 必须以 format属性定义的格式指定，或者作为JavaScript Date对象指定如果您的日期格式包含时间，您需要设置默认时间但日期应该是当前date，这是一种方法： 版本之前 1.9.11：var date = new Date(); // have this somewhere// set the start_date property likestart_date: date.getFullYear() + '-' + (date.getMonth() + 1 < 10 ? '0' : '') + (date.getMonth() + 1) + '-' + (date.getDate() < 10 ? '0' : date.getDate()) + ' 12:00'从版本开始 1.9.11：start_date: new Date()请注意，仅当日期选择器附加到的字段中没有值时才使用此值！ 从版本1.9.11开始，属性的值可以是JavaScript Date对象 |
| 严格 | 布尔 | false | 如果附加日期选择器的输入字段中的默认值，如果它们根据direction和/或无效，则应删除disabled_dates吗？ |
| 视图 | 串 | 'days' | 日期选择器应该如何开始： 有效值是 days，months和years。请注意，日期选择器总是 days -> months -> years在单击日期选择器的标题时循环，并且years -> months -> days在选择日期时（跳过由于日期格式而丢失的视图）如果日期的格式需要，则可以覆盖属性的值 view！（即如果日期格式不允许选择天数days，则view属性没有意义） |
| weekend_days | 排列 | [0, 6]周六和周日 | 这被认为是星期几周末 有效值是 0到6，周日到周六。 |
| zero_pad | 布尔 | false | 天数<10应该填零吗？ 设置 true为时，日期数<10将以前缀为前缀0。 |
活动
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 = {
//任何有效选项
}
任何这样设置的选项都将应用于所有新创建的日期选择器。显然，在创建任何新的日期选择器时设置的选项将覆盖相应的默认值。
支持这个项目的开发
赞助商
跨浏览器/设备测试完成
6663
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
