Pikaday 简约轻量级无依赖模块化日期时间选择器

发布于 2020-04-01 11:53:19 字数 13850 浏览 1422 评论 0

Pikaday 是一个 JavaScript 日期选择器，它不依赖于任何 Javascript 库，并且文件大小小于 5K，但是功能却一点不弱，可以进行高级定制。并且样式可以根据 CSS 进行更改选择器的设计，当然默认的样式已经非常不错了。

令人耳目一新的 JavaScript 数据时间选择器

重量轻(小于5kb的小型化和拉链)
没有依赖项(但是很好地处理了 Moment.js)
模块化 CSS 类，方便样式设计

安装

您可以将 Pikaday 作为 NPM 包安装：

npm install pikaday

或者直接链接到 CDN：

<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>

样式

您还需要包含 PikadayCSS 文件。这一步取决于 Pikaday 是如何安装的。要么作为 NPM 包安装：

@import './node_modules/pikaday/css/pikaday.css';

或链接到 CDN：

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">

使用

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);

格式化

默认情况下，使用标准的 JavaScriptDate 对象对日期进行格式化和解析。如果 Moment.js 在作用域上可用，它将用于格式化和解析输入值。你可以传递一个附加的 format 选项传递给将传递给moment 构造函数见示例一个完整的版本。

<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>

对于更高级和更灵活的格式设置，您可以传递自己的格式。toString 函数设置为用于格式化 Date 对象的配置。此函数具有以下签名：

toString(date, format = 'YYYY-MM-DD')

您应该从它返回一个字符串。

不过小心点。如果您返回的格式化字符串不能由 Date.parse 方法(或通过moment如果它是可用的)，那么您必须提供您自己的parse函数在配置中。此函数将传递格式化字符串和格式：

parse(dateString, format = 'YYYY-MM-DD')

var picker = new Pikaday({
    field: document.getElementById('datepicker'),
    format: 'D/M/YYYY',
    toString(date, format) {
        // you should do formatting based on the passed format,
        // but we will just return 'D/M/YYYY' for simplicity
        const day = date.getDate();
        const month = date.getMonth() + 1;
        const year = date.getFullYear();
        return `${day}/${month}/${year}`;
    },
    parse(dateString, format) {
        // dateString is the result of `toString` method
        const parts = dateString.split('/');
        const day = parseInt(parts[0], 10);
        const month = parseInt(parts[1], 10) - 1;
        const year = parseInt(parts[2], 10);
        return new Date(year, month, day);
    }
});

配置

如上面的例子所示，Pikaday 有许多有用的选择：

field将数据采集器绑定到窗体字段
trigger使用不同的元素触发打开日期选择器，请参见触发示例(默认为field)
bound自动显示/隐藏field焦点(默认)true如果field已设置)
ariaLabel在输入字段上的数据-属性(只在以下情况下应用)bound已设置)
position数据报头相对于表单字段的首选位置，例如：top right, bottom right 注：可能会发生自动调整，以避免日期选择器显示在视口之外，请参见位置示例(默认为“左下角”)
reposition可以将“false”设置为“不将数据选择器重新定位在viewport中”，从而迫使它接受已配置的position(默认值：true)
container要将日历呈现到DOM节点中，请参见容器实例(默认值：未定义)
format的默认输出格式。.toString()和field价值(要求)Moment.js(用于自定义格式)
formatStrict用于严格日期解析的默认标志(要求Moment.js(用于自定义格式)
toString(date, format)函数，该函数将用于自定义格式设置。这个函数将优先于moment.
parse(dateString, format)函数，用于解析输入字符串并从中获取日期对象。这个函数将优先于moment.
defaultDate第一次打开时查看的初始日期。
setDefaultDate布尔(真/假)使.defaultDate初值
firstDay一周的第一天(0：星期日，1：星期一等)
minDate可以选择的最小/最早日期(这应该是一个本机日期对象)。new Date()或moment().toDate())
maxDate可以选择的最大/最新日期(这应该是一个本机日期对象)。new Date()或moment().toDate())
disableWeekends不准选择星期六或星期日
disableDayFn回调函数，该函数将为视图中的每一天传递一个日期对象。应该返回TRUE禁用那天的选择。
yearRange任何一方的年数(例如：10)或上/下范围的数组(例如：[1900,2015])
showWeekNumber在行首显示ISO周号(默认值)false)
pickWholeWeek选择一周而不是一天(默认)false)
isRTL将右向左语言的日历反转。
i18n月名和工作日名的默认语言(见下面的国际化)
yearSuffix标题中附加到年份的其他文本
showMonthAfterYear在标题中呈现年复一年的标题(默认)false)
showDaysInNextAndPreviousMonths呈现下一个月或前一个月中的日历网格的天数(默认值：false)
enableSelectionDaysInNextAndPreviousMonths允许用户选择下一个月或前一个月中的日期(默认值：false)
numberOfMonths可见日历数
mainCalendar什么时候numberOfMonths，这将帮助您选择主日历的位置(默认值)。left，可以设置为right)。仅用于第一次显示或选定日期尚未可见时使用。
events数组的日期，您想要区别于正常的日子(例如。['Sat Jun 28 2017', 'Sun Jun 29 2017', 'Tue Jul 01 2017',])
theme定义可用作设计不同主题样式的挂钩的类名，请参见主题示例(违约null)
blurFieldOnSelect定义选定日期时字段是否模糊(默认值)true)
onSelect选择日期时的回调函数
onOpen函数，用于选择器何时可见。
onClose选择器隐藏时的回调函数。
onDraw函数，用于选择器绘制新月份时使用。
keyboardInput启用键盘输入支持(默认)true)

显示位置

如果 reposition 配置选项已启用(默认)，Pikaday 将根据其定位方式将 CSS-类应用于日期选择器：

top-aligned
left-aligned
right-aligned
bottom-aligned

注意，DOM 元素在任何时候通常都有2个CSS类(例如。top-aligned right-aligned等等)

jQuery 插件

Pikaday的正常版本不需要jQuery，但是如果jQuery插件在您的船上浮动，则需要jQuery插件(请参阅plugins/pikaday.jquery.js在存储库中)。这个版本自然需要jQuery，并且可以像其他插件一样使用。jQuery示例一个完整的版本。

<script src="//ajax.googleapis.com/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不会绑定到全局对象，并且将很好地适应您的构建过程。你可以像其他模块一样要求Pikaday。见AMD实例一个完整的版本。

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

上述jQuery插件也是如此。见jQueryAMD示例一个完整的版本。

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

CommonJS模块支持

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

var pikaday = require('pikaday');

当您将所需的所有模块绑定到褐化你也不用Moment.js指定忽略选项：

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

Ruby on Rails

如果你用Ruby on Rails，确保检查皮卡代宝石.

方法

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

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

获取和设定日期

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

以字符串格式返回选定日期。如果Moment.js存在(推荐)然后Pikaday可以返回任何形式的瞬间理解。你也可以提供你自己的toString函数并自己进行格式化。阅读更多内容格式化部分。

如果两者都没有moment对象是否存在？toString函数，JavaScript的默认值为.toDateString()方法将被使用。

picker.getDate()

返回基本JavaScriptDate对象，或null如果没有选择。

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

设置当前选择。这将被限制在minDate和maxDate如果指定了选项。您可以选择传递一个布尔值作为第二个参数，以防止触发onSelect回调(True)，从而允许以静默方式设置日期。

picker.getMoment()

返回Moment.js对象(必须在Pikaday之前加载瞬间)。

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

设置当前选择的Moment.js对象(请参见setDate详细情况)。

清除和重置日期

picker.clear()

将清除并重置选择器绑定到的输入。

改变当前视图

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

更改当前视图以查看特定日期。这个例子将跳到2014年2月(月份是基于零的指数。).

picker.gotoToday()

快捷键picker.gotoDate(new Date())

picker.gotoMonth(2)

按月份更改当前视图(0：1月，1：2月等)。

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用于从右到左阅读的语言。