Pikaday JavaScript Datepicker 使用教程

Pikaday JavaScript Datepicker 使用教程

Pikaday A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS 项目地址: https://gitcode.com/gh_mirrors/pi/Pikaday

1. 项目介绍

Pikaday 是一款轻量级的 JavaScript 日期选择器，大小不到 5kb（压缩后）。它不依赖任何其他库，但可以很好地与 Moment.js 配合使用。Pikaday 提供了模块化的 CSS 类，使得自定义样式变得非常容易。

2. 项目快速启动

要使用 Pikaday，你可以通过 NPM 安装它：

npm install pikaday

或者直接从 CDN 链接引入：

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

同时，你还需要引入 Pikaday 的 CSS 文件。如果你通过 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">

接下来，在 HTML 中添加一个输入框，并使用 JavaScript 代码来初始化 Pikaday：

<input type="text" id="datepicker">
<script>
  var picker = new Pikaday({
    field: document.getElementById('datepicker')
  });
</script>

如果你使用 jQuery，确保传递的是第一个元素：

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

3. 应用案例和最佳实践

以下是一个简单的使用案例，演示如何绑定一个日期选择器到一个输入框，并使用 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>

对于更高级的格式化，你可以传递自己的 toString 函数到配置中：

var picker = new Pikaday({
  field: document.getElementById('datepicker'),
  format: 'D/M/YYYY',
  toString: function(date, format) {
    const day = date.getDate();
    const month = date.getMonth() + 1;
    const year = date.getFullYear();
    return `${day}/${month}/${year}`;
  },
  parse: function(dateString, format) {
    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);
  }
});

4. 典型生态项目

Pikaday 的生态中包括了一些扩展和插件，例如：

• Pikaday-Moment 插件：提供了与 Moment.js 的集成，允许更复杂的日期格式化。
• Pikaday-Workers：使用 Web Workers 来处理日期计算，以避免阻塞主线程。

你可以根据需要搜索并集成这些项目，以扩展 Pikaday 的功能。

Pikaday A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS 项目地址: https://gitcode.com/gh_mirrors/pi/Pikaday