如何配置Easepick PresetPlugin的customPreset日期范围格式？

要配置Easepick的PresetPlugin自定义日期范围预设，需在PresetPlugin配置项中添加customPreset数组，每个数组元素为一个预设对象，包含以下属性：

预设对象属性说明 #

• label：字符串，必填，预设按钮显示的文本（如“最近7天”）。
• start：函数，必填，接收picker实例作为参数，返回起始日期的Date对象。
• end：函数，必填，接收picker实例作为参数，返回结束日期的Date对象。
• hideOnSelect：布尔值，可选，选中预设后是否关闭日期选择器，默认值为true。

完整配置示例 #

以下是添加了自定义预设（最近7天、本月、本年）的完整代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>easepick</title>
    <script src="https://cdn.jsdelivr.net/npm/@easepick/datetime@1.2.0/dist/index.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@easepick/core@1.2.0/dist/index.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@easepick/base-plugin@1.2.0/dist/index.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@easepick/range-plugin@1.2.0/dist/index.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@easepick/preset-plugin@1.2.0/dist/index.umd.min.js"></script>
  </head>
  <body>
    <input id="datepicker"/>
    <script>
      const picker = new easepick.create({
        element: document.getElementById('datepicker'),
        css: [
          'https://cdn.jsdelivr.net/npm/@easepick/core@1.2.0/dist/index.css',
          'https://cdn.jsdelivr.net/npm/@easepick/range-plugin@1.2.0/dist/index.css',
          'https://cdn.jsdelivr.net/npm/@easepick/preset-plugin@1.2.0/dist/index.css',
        ],
        plugins: ['RangePlugin', 'PresetPlugin'],
        PresetPlugin: {
          position: 'left',
          // 自定义预设配置
          customPreset: [
            {
              label: '最近7天',
              start: () => {
                const date = new Date();
                date.setDate(date.getDate() - 6);
                return date;
              },
              end: () => new Date(),
            },
            {
              label: '本月',
              start: () => {
                const date = new Date();
                date.setDate(1);
                return date;
              },
              end: () => {
                const date = new Date();
                date.setMonth(date.getMonth() + 1);
                date.setDate(0);
                return date;
              },
              hideOnSelect: false,
            },
            {
              label: '本年',
              start: () => {
                const date = new Date();
                date.setMonth(0);
                date.setDate(1);
                return date;
              },
              end: () => {
                const date = new Date();
                date.setMonth(11);
                date.setDate(31);
                return date;
              },
            },
          ],
        },
      });
    </script>
  </body>
</html>

补充说明 #

• 可通过easepick.datetime工具类简化日期计算，例如使用add方法快速偏移日期：

  start: (picker) => picker.datetime.add(new Date(), -6, 'day'),
  

• 预设按钮会按照customPreset数组的顺序显示在选择器中。

内容的提问来源于stack exchange，提问作者Vermeersch Wouter