一个超轻量级、高度可配置的跨浏览器日期时间选择器jQuery插件
Posted
tags:
中文标题：一个超轻量级、高度可配置的跨浏览器日期时间选择器jQuery插件 原文标题：A super-lightweight, highly configurable, cross-browser date time picker jQuery plugin 项目评级：Star:395 Fork:184 下载地址：https://github.com/stefangabos/Zebra_Datepicker 详情介绍斑马日期选择器
一个超轻量级、高度可配置的跨浏览器日期时间选择器jQuery插件
使用功能强大且高度可配置的Zebra Datepicker日期时间选择器jQuery插件增强您的表单。此日期时间选择器添加了一个直观的日历界面，用于选择日期和时间，并具有方便的月份和年份跳跃功能。所选日期将根据您指定的选项进行格式化并输入到输入字段中。只需将插件附加到您的输入字段，然后让日历图标完成其余操作。
特征
支持本项目的开发
非常感谢您的支持，这让我有动力继续从事开源项目。如果你喜欢这个项目，请点击页面顶部的星号按钮进行星号标记。如果你觉得慷慨，你也可以通过PayPal给我买杯咖啡，或者成为赞助商。
感谢您的支持！
演示
查看演示
要求
Zebra Datepicker除了jQuery 1.7.0+之外没有其他依赖项，并且要求您正在使用插件的页面具有严格的doctype，如：
安装
Zebra Datepicker作为一个npm软件包提供。要安装它，请使用：
Zebra Datepicker也可以作为Bower软件包提供。要安装它，请使用：
如何使用
首先，从CDN加载jQuery，并向本地源提供回退，如：
加载Zebra Datepicker jQuery插件：
或者，您可以从JSDelivr CDN加载Zebra Datepicker，如下所示：
从本地源加载样式表文件
…或来自JSDelivr CDN
Zebra Datepicker也可以在cdnjs上使用，cdnjs是最著名的免费和公共网络前端CDN服务之一
现在，在DOM就绪事件中，将Zebra Datepicker插件附加到<input type="text">控件。
这会将日历和附加到指定的元素。单击图标，将使日期选择器可见。
要获得对附加到元素的Zebra DatePicker实例的引用，请执行以下操作：
配置选项
属性
所有参数都是可选的。
请注意，以下任何属性也可以通过数据属性进行设置。为此，您需要在要设置的属性名称前面加上data-zdp_。需要记住的一件重要事情是，如果属性的值是一个数组，则必须在方括号内使用双引号，因此必须在属性周围使用单引号。请参见示例
<表格>
属性 类型 默认 描述
false日期选择器是否应该始终可见？
将此属性设置为jQuery元素将导致日期选择器始终可见，指示的元素充当日期选择器的容器；
将此属性设置为booleantrue将导致日期选择器在选择日期时不关闭，而仅在用户单击日期选择器外部时关闭。
$('body')默认情况下，日期选择器被注入到文档的<body>元素中；使用此属性可以告诉库将日期选择器注入到自定义元素中——当您希望在特定位置打开日期选择器时，这很有用。
false默认情况下，当前日期（Today的值）取自运行日期选择器的系统。将其设置为YYYY-MM-DD格式的日期以使用其他日期。
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”后缀。
为了猪圈
要应用自定义类中的les，请确保使用以下语法：
.Zebra_DatePicker .dp_daypicker td.myclass1 ..
.Zebra_DatePicker .dp_daypicker td.myclass1_disabled ..
['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']一周中的几天，周日到周六。
false天数的缩写。
默认情况下，一天的缩写名称由当天全名的前两个字母组成。虽然这在大多数语言中都很常见，但泰语、洛亚语、缅甸语等语言也有例外，因为这是不正确的。对于这些情况，指定一个数组，其中包含一周中7天要使用的缩写；保留false，使用一天名称的前两个字母作为缩写。
'above'日期选择器相对于它所附加的元素的位置。
请注意，无论此设置如何，如果需要，都会自动调整日期选择器的位置以适应视图端口。
可能值为above和below。
如果设置了always_visible或container属性，此属性将被忽略！
0您也可以将此属性设置为具有以下组合中的两个元素的数组：
示例：
[1, 7]日历从明天开始，七天后结束
[true, 7]日历从＜em＞参考日期
['2013-01-01', false]日历从2013年1月1日开始，没有结束日期（“格式”为YYYY-MM-DD）
[false, '2012-01-01']日历结束于＜em＞参考日期
请注意，disabled_dates属性仍然适用！
reference date是当前日期，除非日期选择器是另一个日期选择器的pair，在这种情况下，参考日期是在该日期选择器中选择的日期。
禁用计时器
falseh、H、g、['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']、＜3＞、＜12＞、＜22＞、＜25＞、＜26＞）将自动启用时间选择器。如果要使用包含时间的格式，但不需要时间选择器，请将此属性设置为true。禁用日期
false无禁用日期禁用日期的数组，格式如下：'day month year weekday'，其中＜em＞工作日0-6（周六至周日）。
语法与cron的语法类似：值由空格分隔，可以包含*（星号）-（短划线）和,（逗号）分隔符。
示例：
['1 1 2012']将于2012年1月1日失效
['* 1 2012']将禁用2012年1月的所有天数
['1-10 1 2012']将于2012年1月1日至10日禁用
['1,10 1 2012']将于2012年1月1日和10日禁用
['1-10,20,22,24 1-3 *']将禁用1到10，加上每年1月22日和3月24日
['* * * 0,6']将禁用所有周六和周日
['01 07 2012', '02 07 2012', '* 08 2012']将使2012年7月1日和2日以及2012年8月全部失效
禁用所有日期和
不指定至少一个启用日期将使脚本进入无限循环，搜索要显示的启用日期！
false上午/下午均可选择可选择的上午/下午阵列。
允许值为['am']、['pm']或['am', 'pm']。
仅当format包含A或a时适用。请注意，即使只有一个被启用，当点击时间选择器上AM/PM旁边的向上/向下按钮时，onChange()仍将被触发
启用日期
false所有日期已启用启用日期的数组，其格式与disabled_dates属性所需的格式相同。通过首先将disabled_dates属性设置为[* * * *]＜em>（这将禁用所有功能），并将enabled_dates属性设置（例如，[* * * 0,6]）以仅在周末启用，与disabled_dates特性一起使用。
启用小时数
false所有小时均可选择一组可选择的小时。
仅当format包含以下字符之一时适用：H、G、['am']、g。当format包含H或G字符时，有效值在0-24（不加0！）之间；当＜124＜包含h或g字符时有效值在＞1226＞（不加＜1222＜！）之间
启用分钟数
false所有分钟均可选择可选择的分钟数组。
仅当format包含i字符时适用。有效值介于0-59之间（未填充0！）
false所有秒均可选择可选择的秒数组。
仅当format包含s字符时适用。有效值介于0-59之间（未填充0！）
true允许用户通过单击日期选择器的顶部标签快速浏览月份和年份。
1周一本周的开始日。
有效值为0至6，周日至周六。
'Y-m-d'返回日期的格式。
接受以下字符进行日期格式设置：d、D、y、format、N、A、＜12＞、＜3＞、＜25＞、＜5＞、＜12506＞、＞1257＞、＞125＞、＞1219＞、H、〈1220＞、['am']、i、＞1238＞、＞126＞、false，借用PHP的日期函数语法。
如果format属性包含与时间相关的字符（g、G、＜121 9＞、＜12 17＞、i、＜123 8＞、＞126＞、A），时间选择器将自动启用。如果您想使用涉及时间的格式，但不需要时间选择器，请将disable_time_picker属性设置为true。
请注意，当设置不带天的日期格式（d，j）时，用户将只能选择年和月，而当设置不含月和天的格式（F，m，＜12505＞，A，＜代码＞t<
/代码>，d，j），用户将只能选择年份。同样，设置一个只包含与时间相关的字符的格式，用户将只能选择时间。设置一个包含a或A的时间格式（12小时格式），但使用H或G作为小时格式，将导致小时格式分别自动更改为h或g。
还要注意的是，如果是这种情况，view属性的值可能会被覆盖（即，如果日期格式不允许选择天数，＜128＜属性的days值就没有意义了）。
header_captions:
days: 'F, Y',
months: 'Y',
years: 'Y1 - Y2'
日期选择器标题中的标题，适用于3个视图：days、months、j
对于这3个视图中的每一个，可以借用PHP的日期函数语法使用以下特殊字符：m、n、F、a、＜3＞和Y；根据当前查看的日期，这些字符中的任何一个都将在运行时替换为适当的日期片段。另外还有两个特殊字符Y1和Y2（大写表示年份，4位数字，小写表示年份，2位数字），表示currently selected year - 7和a，仅在years视图中使用。
即使这些特殊字符中的任何一个可以在3个视图中的任何视图中使用，但对于days视图，应使用m、n、F、＜122 2＞，对于months和years视图，则应使用y、＞1224＞、＜12.25＞、＜1.226＞、y1、＞1240＞，否则可能会得到意想不到的结果！
文本和HTML也可以使用，并将按原样呈现，如下例所示（库足够智能，在单词或HTML标签中使用时不会替换特殊字符）：
header_captions:
days: 'Departure:<br>F, Y',
months: 'Departure:<br>Y',
years: 'Departure:<br>Y1 - Y2'
false图标周围的左右空白
如果inside属性设置为true，则目标元素的填充将被更改，使得元素的左或右填充（取决于icon_position的值）将2 x icon_margin加上图标的宽度。
如果inside属性设置为false，则这将是元素和图标之间的距离。
将其保留为false以使用元素的现有填充
'right'图标的位置。
接受值为left和right
true用于打开日期选择器的图标是否应位于元素内部？
如果设置为false，图标将被放置在父元素的右侧，而如果设置为＞1250＞，则图标将被置于父元素的左侧，但在元素内部
语言清除日期
'Clear'清除按钮的标题。
['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],月份名称
缩写
false月份的缩写。
默认情况下，一个月的缩写名称由该月全名的前3个字母组成。虽然这在大多数语言中都很常见，但泰语、洛亚语、缅甸语等语言也有例外，因为这是不正确的。对于这些情况，请指定一个数组，其中包含一年中月份要使用的缩写；保留false，使用一个月名称的前3个字母作为缩写。
navigation: ['◀', '▶', '▲', '▼']用于上一个/下一个和向上/向下按钮的HTML，按顺序排列。
[5, -5]该插件已附加到。
请注意，这仅适用于日历相对于浏览器视口的位置不需要自动放置日期选择器以使其可见的情况！
false当设置为true时，日期选择器将仅在用户单击关联图标时显示，而不在单击关联元素时显示。
false如果希望在父元素（如果open_icon_only未设置为false）或相关日历图标（如果show_icon未设置成false时）接收焦点时显示日期选择器，请将此属性设置为true。
false未与其他日期选择器配对如果设置为一个或多个带有Zebra日期选择器的jQuery元素，则这些特定的日期选择器将使用当前日期选择器的值作为开始日期
请注意，direction属性中设置的规则仍将适用，但参考日期将不是当前系统日期，而是当前日期选择器中选择的值。
仅在包含“开始日期”的日期选择器上使用此属性，而不在包含“结束日期”的选择器上使用，否则第二个日期选择器的direction属性将无法按预期工作！
只读元素
true日历所附加的元素是否应该是只读的？
如果设置为true，则只能通过日期选择器设置日期，不能手动输入。
false是否应从右向左绘制文本。
false上个月和/或下个月的天数是否可以在可见时选择？
请注意，如果此属性的值设置为true，则无论实际值如何，show_other_months的值都将被视为＜125＜！
0清除日期按钮是否可见？
可接受的值为：
Pick a date是否应将日历图标添加到
插件所附加的元素？
如果不需要日历图标，请将此属性的值设置为布尔值false。
请注意，由于text-indentation在CSS中被设置为一个大负值，因此默认情况下文本是不可见的，因此如果您想使文本可见，您可能需要更改它。
当未设置为booleanfalse时，插件会将日历图标附加到插件所附加的元素上。
true上个月和/或下个月的天数是否可见？
'Today'今日按钮是否可见？
将此属性设置为布尔值false以外的任何值都将启用该按钮，并将使用该属性的值作为按钮的标题。将其设置为false将禁用该按钮。
false是否应显示ISO 8601周数？
false以外的任何值都将启用此功能，并使用给定的值作为列标题。例如，show_week_number: 'Wk'将启用此功能，并将＜em＞Wk
false启动日期选择器的默认日期
必须以format属性定义的格式指定，或作为JavaScript Date对象指定
如果您的日期格式包含时间，并且需要设置默认时间，但日期应为当前日期，那么有一种方法：
版本1.9.11之前：
var date = new Date(); // have this somewhere
// set the start_date property like
start_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、1.9.11和time。
请注意，单击日期选择器的标题时，日期选择器始终循环days -> months -> years，选择日期时循环years -> months -> days（跳过因日期格式而丢失的视图）
如果日期格式需要，则view属性的值可能会被重写！（即，如果日期格式不允许选择日期，则view属性的days没有意义）
[0, 6]周六和周日一周中被视为周末的天数
有效值为0至6，周日至周六。
false应该是天数<；10加零？
当设置为true时，天数<；10将是
前缀为0。
事件
onChange
每当用户更改视图时（天/月/年/时间），以及当用户通过单击任何视图中的next/previous图标进行导航时，都将执行回调；
回调函数接收2个参数
回调函数中的this关键字是指日期选择器附加到的元素，作为jQuery对象。
为了简化对特定日期的搜索，每个元素都会得到一个date的数据属性，其格式取决于view参数的值，如下所示：
请注意，time视图中的元素也没有设置此数据属性。
以下是我们如何强调每年每个月的第24天：
onClear
当用户单击清除按钮时要执行的回调函数。
回调函数不接受任何参数。回调函数中的this关键字是指日期选择器附加到的元素，作为jQuery对象。
onClose
关闭日期选择器时要执行的回调函数。
回调函数不接受任何参数。回调函数中的this关键字是指日期选择器附加到的元素，作为jQuery对象。
onOpen
显示日期选择器时要执行的回调函数。
回调函数不接受任何参数。回调函数中的this关键字是指日期选择器附加到的元素，作为jQuery对象。
onSelect
选择日期时要执行的回调函数。
回调函数采用3个参数：
this回调函数内部是指日期选择器所附加的元素，作为jQuery对象
方法
首先，获取插件的引用，如
然后调用一个方法
clear_date()
清除所选日期（如果有）
destroy()
从元素中删除插件
set_date(date)
将日期选择器所附加的元素的值设置为指定的日期；
日期必须采用format属性或JavaScriptDate对象定义的格式。
如果禁用（因为disabled_dates或因为direction属性），则不会设置日期
该方法的参数可以是JavaScriptDate对象，因为版本1.9.11
show()
显示日期选择器（除非always_visible属性设置为true）
hide()
隐藏日期选择器（除非always_visible属性设置为true）
update([options])
在运行时更新配置选项，并重新计算日期选择器相对于父元素的图标位置。无论何时显示/隐藏/重新定位父元素，或更改父元素的尺寸，都应该调用此方法。
该方法接受一个可选参数-一个具有要更新的配置选项的对象：
如果您只想更新图标的位置，只需调用不带任何参数的方法：
全局选项
如果您有多个共享公共选项的日期选择器，您可以这样设置这些选项：
像这样设置的任何选项都将应用于所有新创建的日期选择器。显然，在创建任何新的日期选择器时设置的选项都会覆盖相应的默认值。
发起人
使用进行跨浏览器/设备测试
是否有一个轻量级的跨浏览器范围输入解决方案，不需要像 jQuery 这样的库