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

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

发布于 2020-04-01 字数 15963 浏览 1142 评论 0

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

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

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

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

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

安装

您可以将 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" target="_blank" class="external-link" 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')

设置当前选择。这将被限制在minDatemaxDate如果指定了选项。您可以选择传递一个布尔值作为第二个参数,以防止触发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()

回报truefalse.

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:星期一等)。你也可以设置isRTLtrue用于从右到左阅读的语言。

浏览器兼容性

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

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

Github 地址:https://github.com/Pikaday/Pikaday

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0