日期

PreviousNext
日期元素
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}
Inline date elements with calendar selection interface.
date-demo
date-demo

功能特性

  • 使用内联日期元素在文本中插入和显示日期
  • 可通过日历界面轻松选择和修改这些日期

套件使用

安装

最快捷添加日期功能的方式是使用 DateKit，它包含了预配置的 DatePlugin 和 Plate UI 组件。

'use client';

import { DatePlugin } from '@platejs/date/react';

import { DateElement } from '@/components/ui/date-node';

export const DateKit = [DatePlugin.withComponent(DateElement)];

添加套件

将套件添加到你的插件中：

import { createPlateEditor } from 'platejs/react';
import { DateKit } from '@/components/editor/plugins/date-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    ...DateKit,
  ],
});

手动配置

安装

pnpm add @platejs/date

添加插件

在创建编辑器时将 DatePlugin 包含到 Plate 插件数组中。

import { DatePlugin } from '@platejs/date/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    DatePlugin,
  ],
});

配置插件

使用自定义组件配置插件来渲染日期元素。

import { DatePlugin } from '@platejs/date/react';
import { createPlateEditor } from 'platejs/react';
import { DateElement } from '@/components/ui/date-node';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    DatePlugin.withComponent(DateElement),
  ],
});
  • withComponent: 指定 DateElement 来渲染内联日期元素

插入工具栏按钮

你可以将此项目添加到 插入工具栏按钮 来插入日期元素：

{
  focusEditor: true,
  icon: <CalendarIcon />,
  label: '日期',
  value: KEYS.date,
}

插件

DatePlugin

用于向文档添加日期元素的插件。

API

isPointNextToNode

检查一个点是否邻近特定类型的节点。

Parameters

Collapse all

    要检查邻近性的节点类型（例如 'date' 表示内联日期元素）

    检查邻近性的选项

Optionsobject

Collapse all

    检查的起始位置。如未提供则使用当前选区锚点

    检查方向。为 true 时检查前一个节点，为 false 时检查后一个节点

转换操作

tf.insert.date

Parameters

Collapse all

    要插入的日期字符串，格式为 'YYYY-MM-DD'

    • 默认值: 当前日期

    插入节点的选项

ColumnDate