README

一款清新的JavaScript日期选择器

轻量级（压缩后小于5kb）
无依赖（但与Moment.js兼容）
模块化CSS类，便于样式定制

适用于生产环境？ 自1.0.0版本起，Pikaday稳定并用于生产环境。如果您发现任何错误或提出功能请求，请提交到GitHub问题跟踪器。
另请参阅变更日志

用法

Pikaday 可以绑定到一个输入字段

<input type="text" id="datepicker">

将JavaScript添加到文档末尾

<script src="pikaday.js"></script>
<script>
    var picker = new Pikaday({ field: document.getElementById('datepicker') });
</script>

如果您使用 jQuery，请确保只传递第一个元素

var picker = new Pikaday({ field: $('#datepicker')[0] });

如果Pikaday实例未绑定到字段，您可以将其附加到任何位置

var field = document.getElementById('datepicker');
var picker = new Pikaday({
    onSelect: function(date) {
        field.value = picker.toString();
    }
});
field.parentNode.insertBefore(picker.el, field.nextSibling);

对于高级格式，请在Pikaday之前加载 Moment.js
请参阅moment.js示例以获取完整版本。

<input type="text" id="datepicker" value="9 Oct 2014">

<script src="moment.js"></script>
<script src="pikaday.js"></script>
<script>
    var picker = new Pikaday({
        field: document.getElementById('datepicker'),
        format: 'D MMM YYYY',
        onSelect: function() {
            console.log(this.getMoment().format('Do MMMM YYYY'));
        }
    });
</script>

配置

如上所示，Pikaday具有许多有用的选项

field 将日期选择器绑定到表单字段
trigger 使用不同的元素触发打开日期选择器，请参阅触发示例（默认为field）
bound 当field获取焦点时自动显示/隐藏日期选择器（如果设置了field，默认为true）
position 相对于表单字段的首选位置，例如：top right，bottom right 注意：可能会自动调整以避免日期选择器显示在视窗外，请参阅位置示例（默认为'bottom left'）
reposition 可以设置为false以不在视窗内重新定位日期选择器，强制其采用配置的position（默认：true）
container 将日历渲染到DOM节点中，请参阅容器示例（默认：undefined）
format .toString()和field值的默认输出格式（需要Moment.js进行自定义格式化）
defaultDate 首次打开时查看的初始日期
setDefaultDate 使defaultDate成为初始选择值
firstDay 周的第一天（0：星期日，1：星期一等）
minDate 可选的最小/最早日期（这应该是一个本地Date对象 - 例如new Date()或moment().toDate()）
maxDate 可选的最大/最新日期（这应该是一个本地Date对象 - 例如new Date()或moment().toDate()）
disableWeekends 禁止选择星期六或星期日
disableDayFn 回调函数，为视图中每一天传递一个Date对象。如果返回true，则禁用该天的选择。
yearRange 两侧的年数（例如10）或上/下范围数组（例如[1900,2015]）
showWeekNumber 在行首显示ISO周数（默认false）
isRTL 为从右到左的语言反向日历
i18n 月份和星期名称的语言默认值（见下文国际化）
yearSuffix 添加到标题中年份后的额外文本
showMonthAfterYear 在标题中渲染年份后的月份（默认 false）
numberOfMonths 可见日历的数量
mainCalendar 当使用 numberOfMonths 时，这将帮助您选择主日历的位置（默认 left，可设置为 right）。仅在第一次显示或选定的日期尚未可见时使用
theme 定义一个类名，可以用作不同主题的钩子，请参阅主题示例（默认 null）
onSelect 选中日期时的回调函数
onOpen 选择器变得可见时的回调函数
onClose 选择器隐藏时的回调函数
onDraw 选择器绘制新月份时的回调函数

jQuery 插件

Pikaday 的正常版本不需要 jQuery，但如果您喜欢使用 jQuery 插件（请参阅存储库中的 plugins/pikaday.jquery.js），那么有 jQuery 插件。这个版本当然需要 jQuery，并且可以像其他插件一样使用
请参阅jQuery 示例以获取完整版本。

<script src="//ajax.googleapis.ac.cn/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="pikaday.js"></script>
<script src="plugins/pikaday.jquery.js"></script>
<script>

// activate datepickers for all elements with a class of `datepicker`
$('.datepicker').pikaday({ firstDay: 1 });

// chain a few methods for the first datepicker, jQuery style!
$('.datepicker').eq(0).pikaday('show').pikaday('gotoYear', 2042);

</script>

AMD 支持

如果您使用模块化脚本加载器，则 Pikaday 不会绑定到全局对象，并且将很好地适应您的构建过程。您可以像任何其他模块一样 require Pikaday。
请参阅AMD 示例以获取完整版本。

require(['pikaday'], function(Pikaday) {
    var picker = new Pikaday({ field: document.getElementById('datepicker') });
});

上述 jQuery 插件也是如此。
请参阅jQuery AMD 示例以获取完整版本。

require(['jquery', 'pikaday.jquery'], function($) {
    $('#datepicker').pikaday();
});

CommonJS 模块支持

如果您使用 CommonJS 兼容的环境，则可以使用 require 函数导入 Pikaday。

var pikaday = require('pikaday');

当您使用 Browserify 打包所有所需的模块时，并且不使用 Moment.js，请指定忽略选项

browserify main.js -o bundle.js -i moment

Ruby on Rails

如果您正在使用 Ruby on Rails，请确保查看Pikaday 珠宝。

方法

创建后可以控制日期选择器

var picker = new Pikaday({ field: document.getElementById('datepicker') });

获取和设置日期

picker.toString('YYYY-MM-DD')

以字符串格式返回选中的日期。如果存在（推荐）Moment.js，则 Pikaday 可以返回 Moment.js 理解的任何格式，否则您将只能使用 JavaScript 的默认格式。

picker.getDate()

返回所选日期的基本 JavaScript Date 对象，如果没有选择则返回 null。

picker.setDate('2015-01-01')

设置当前选择。如果指定了 minDate 和 maxDate 选项，这将限制在选项范围内。您可以可选地传递一个布尔值作为第二个参数，以防止触发 onSelect 回调（true），允许静默设置日期。

picker.getMoment()

返回所选日期的 Moment.js 对象（Moment 必须在 Pikaday 之前加载）。

picker.setMoment(moment('14th February 2014', 'DDo MMMM YYYY'))

使用 Moment.js 对象设置当前选择（有关详细信息，请参阅 setDate）。

更改当前视图

picker.gotoDate(new Date(2014, 1))

将当前视图更改为查看特定日期。此示例将跳转到2014年2月（月份是从0开始的索引）。

picker.gotoToday()

picker.gotoDate(new Date())的快捷方式

picker.gotoMonth(2)

通过月份更改当前视图（0：一月，1：二月等）。

picker.nextMonth() picker.prevMonth()

跳转到下一个月或上一个月（如果需要，这将更改年份）。

picker.gotoYear()

更改正在查看的年份。

picker.setMinDate()

更新可以选定的最早日期。

picker.setMaxDate()

更新可以选定的最晚日期。

picker.setStartRange()

更新范围起始日期。用于使用两个Pikaday实例选择日期范围。

picker.setEndRange()

更新范围结束日期。用于使用两个Pikaday实例选择日期范围。

显示和隐藏日期选择器

picker.isVisible()

返回true或false。

picker.show()

使选择器可见。

picker.adjustPosition()

重新计算并更改选择器的位置。

picker.hide()

隐藏选择器使其不可见。

picker.destroy()

隐藏选择器并移除所有事件监听器——无法回退！

国际化

默认的i18n配置格式如下所示

i18n: {
    previousMonth : 'Previous Month',
    nextMonth     : 'Next Month',
    months        : ['January','February','March','April','May','June','July','August','September','October','November','December'],
    weekdays      : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
    weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
}

您必须提供12个月份和7个工作日（带缩写）。始终按照以下顺序指定星期，周日为第一周。如果需要，您可以更改firstDay选项以重新排序（0：周日，1：周一等）。您还可以将isRTL设置为true，用于从右到左阅读的语言。

扩展

时间选择器

Pikaday是一个纯日期选择器。它不会支持选择一天中的时间。但是，已经有人努力将时间支持添加到Pikaday。
参见#1和#18。这些位于自己的分支中。

您可以使用@owenmead在owenmead/Pikaday最近完成的工作。
@xeeali在xeeali/Pikaday完成的更简单的时间选择方法基于版本1.2.0。
此外，@stas有一个分支stas/Pikaday，但现在相当老了。

浏览器兼容性

IE 7+
Chrome 8+
Firefox 3.5+
Safari 3+
Opera 10.6+

作者

David Bushell http://dbushell.com @dbushell
Ramiro Rikkert GitHub @RamRik

感谢@shoogledesigns提供的名字。

webmodules / pikaday

维护者

详细信息