节点帮助

date-fns NPM（如何为开发人员工作）

发布 2024年十月24日

简介

在 React 应用程序中处理日期时，date-fns 是一个功能强大、轻量级的现代 JavaScript 日期工具库，可让 JavaScript 日期操作变得轻而易举。 date-fns 使用现有的本地日期数据类型，为了安全起见，它不会扩展核心对象，这意味着它将避免修改或添加功能到那些内置的日期数据类型，因为这将导致潜在的错误或冲突。在本文中，我们将探讨如何将 date-fns 集成到您的 React 项目中，并提供一些实用示例。

为什么选择 date-fns？

date-fns 具有以下几个优势：

模块化：您可以只导入所需的函数，从而减少捆绑包的大小。
不可变：它使用纯函数构建，因此这些函数不会改变原始日期对象。
全面：提供广泛的日期操作和格式化功能。
国际化：支持多种本地语言。

入门

首先，通过 npm 安装 date-fns npm 软件包：

npm install date-fns
or
yarn add date-fns

npm install date-fns
or
yarn add date-fns

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install @date-fns @or yarn add @date-fns

VB C#

日期格式

最常见的任务之一是格式化日期，date-fns 使用 .NET 和 Java 技术。让我们创建一个简单的组件，以可读的格式显示您所在时区的当前日期。

import React from 'react';
import { format } from 'date-fns';
const FormattedDate = () => {
  const currentDate = new Date();
  const formattedDate = format(currentDate, 'MMMM do, yyyy');
  return <p>{formattedDate}</p>;
};
export default FormattedDate;

import React from 'react';
import { format } from 'date-fns';
const FormattedDate = () => {
  const currentDate = new Date();
  const formattedDate = format(currentDate, 'MMMM do, yyyy');
  return <p>{formattedDate}</p>;
};
export default FormattedDate;

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'import React from 'react'; import { format } from '@date-fns'; const FormattedDate = () => { const currentDate = New @Date(); const formattedDate = format(currentDate, 'MMMM do, yyyy'); Return <p>{formattedDate}</p>; }; export default FormattedDate;

VB C#

输出

date-fns NPM（如何为开发人员工作）：图 1

解析日期

您还可以从字符串中解析日期。下面是一个解析日期字符串并以不同格式显示的示例：

import React from 'react';
import { parse, format } from 'date-fns';
const ParsedDate = () => {
  const dateString = '2024-06-23';
  const parsedDate = parse(dateString, 'yyyy-MM-dd', new Date());
  const formattedDate = format(parsedDate, 'MMMM do, yyyy');
  return <p>{formattedDate}</p>;
};
export default ParsedDate;

import React from 'react';
import { parse, format } from 'date-fns';
const ParsedDate = () => {
  const dateString = '2024-06-23';
  const parsedDate = parse(dateString, 'yyyy-MM-dd', new Date());
  const formattedDate = format(parsedDate, 'MMMM do, yyyy');
  return <p>{formattedDate}</p>;
};
export default ParsedDate;

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'import React from 'react'; import { parse, format } from '@date-fns'; const ParsedDate = () => { const dateString = '2024-06-23'; const parsedDate = parse(dateString, 'yyyy-MM-dd', New @Date()); const formattedDate = format(parsedDate, 'MMMM do, yyyy'); Return <p>{formattedDate}</p>; }; export default ParsedDate;

VB C#

输出

date-fns NPM（如何为开发人员工作）：图 2

日期的加减

date-fns 可以轻松地从日期中添加或减去时间。下面是一个将当前日期加上 7 天的例子：

import React from 'react';
import { addDays, format } from 'date-fns';
const AddDaysExample = () => {
  const currentDate = new Date();
  const futureDate = addDays(currentDate, 7);
  const formattedDate = format(futureDate, 'MMMM do, yyyy');
  return <p>{formattedDate}</p>;
};
export default AddDaysExample;

import React from 'react';
import { addDays, format } from 'date-fns';
const AddDaysExample = () => {
  const currentDate = new Date();
  const futureDate = addDays(currentDate, 7);
  const formattedDate = format(futureDate, 'MMMM do, yyyy');
  return <p>{formattedDate}</p>;
};
export default AddDaysExample;

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'import React from 'react'; import { addDays, format } from '@date-fns'; const AddDaysExample = () => { const currentDate = New @Date(); const futureDate = addDays(currentDate, 7); const formattedDate = format(futureDate, 'MMMM do, yyyy'); Return <p>{formattedDate}</p>; }; export default AddDaysExample;

VB C#

输出

date-fns NPM（如何为开发人员工作）：图 3

国际化

date-fns 支持多种本地语言。要使用特定的本地语言，您需要将其导入并传递给格式化函数：

import React from 'react';
import { format } from 'date-fns';
import { fr } from 'date-fns/locale';
const FrenchDate = () => {
  const currentDate = new Date();
  const formattedDate = format(currentDate, 'MMMM do, yyyy', { locale: fr });
  return <p>{formattedDate}</p>;
};
export default FrenchDate;

import React from 'react';
import { format } from 'date-fns';
import { fr } from 'date-fns/locale';
const FrenchDate = () => {
  const currentDate = new Date();
  const formattedDate = format(currentDate, 'MMMM do, yyyy', { locale: fr });
  return <p>{formattedDate}</p>;
};
export default FrenchDate;

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'import React from 'react'; import { format } from '@date-fns'; import { fr } from '@date-fns/locale'; const FrenchDate = () => { const currentDate = New @Date(); const formattedDate = format(currentDate, 'MMMM do, yyyy', { locale: fr }); Return <p>{formattedDate}</p>; }; export default FrenchDate;

VB C#

输出

date-fns NPM（如何为开发人员工作）：图 4

介绍IronPDF

IronPDF是一个功能强大的 Node.js PDF 库，允许开发人员在其 node.js 项目中生成和编辑 PDF。无论您需要从 HTML 创建 PDF、处理现有 PDF 还是将网页转换为 PDF 格式，IronPDF 都能满足您的需求。

date-fns NPM（如何为开发人员工作）：图 5 - IronPDF for Node.js：Node.js PDF 库

主要功能

HTML 转换为 PDF

将 HTML 内容轻松转换为 PDF 文档。此功能特别适用于从网页内容生成动态PDF。

URL 转换为 PDF

直接从 URL 生成 PDF，允许您捕获网页内容并以编程方式将其保存为 PDF 文件。

PDF 操作

轻松合并、拆分和操作现有的PDF文档。 IronPdf 提供附加页面、分割文档等功能。

PDF 安全

通过设置密码或应用数字签名来保护您的PDF文档。 IronPDF 提供选项以保护您的敏感文档免受未经授权的访问。

高质量输出

生成高质量的PDF文档，精确渲染文本、图像和格式。 IronPDF 确保您生成的 PDF 保持与原始内容的一致性。

跨平台兼容性

IronPDF兼容多个平台，包括 Windows、Linux 和 macOS，适用于广泛的开发环境。

简单集成

使用其npm软件包轻松将IronPDF集成到您的Node.js应用程序中。 API 文档详实，使将 PDF 生成功能集成到您的项目中变得简单明了。

安装

安装IronPDF要翻译 NPM 软件包，请使用以下命令：

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

使用 IronPDF 生成 PDF 文档并使用 Date-Fns

安装依赖项：首先，创建一个新的 Next.js 项目(如果你还没有)使用以下命令：参阅这里

npx create-next-app@latest date-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

npx create-next-app@latest date-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npx create-@next-app@latest @date-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

VB C#

接下来，导航到你的项目目录：

cd date-pdf

cd date-pdf

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'cd @date-pdf

VB C#

安装所需的软件包：

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add date-fns

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add date-fns

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64 yarn add @date-fns

VB C#

创建 PDF

现在，让我们创建一个使用生成PDF的简单示例IronPDF. 在您的Next.js组件中(例如，pages/index.tsx)添加以下代码

PDF 生成 API：第一步是创建一个后端 API 来生成 PDF 文档。由于 IronPdf 只在服务器端运行，我们需要创建一个 API，以便在用户想要生成 PDF 时调用。在 pages/api/pdf.js 路径下创建一个文件，并添加以下内容。

IronPDF 需要许可证密钥，您可以从以下地址获取许可证页面Please provide the content you would like translated into Chinese along with the code where it should be placed.

// pages/api/pdf.js
import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";
export default async function handler(req, res) {
  try {
    const currentDate = new Date(); // javascript dates
    const formattedDate = format(currentDate, 'MMMM do, yyyy');
    let content = "<h1>Demo React Hook Form and Generate PDF Using IronPDF</h1>"
    content+="<p>Date:"+currentDate+"</p>";
    content+="<p>Formatted Date:"+formattedDate+"</p>";
    const pdf = await PdfDocument.fromHtml(content);
    const data = await pdf.saveAsBuffer();
    console.error("data PDF:", data);
    res.setHeader("Content-Type", "application/pdf");
    res.setHeader(
      "Content-Disposition",
      "attachment; filename=awesomeIron.pdf",
    );
    res.send(data);
  } catch (error) {
    console.error("Error generating PDF:", error);
    res.status(500).end();
  }
}
}

// pages/api/pdf.js
import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";
export default async function handler(req, res) {
  try {
    const currentDate = new Date(); // javascript dates
    const formattedDate = format(currentDate, 'MMMM do, yyyy');
    let content = "<h1>Demo React Hook Form and Generate PDF Using IronPDF</h1>"
    content+="<p>Date:"+currentDate+"</p>";
    content+="<p>Formatted Date:"+formattedDate+"</p>";
    const pdf = await PdfDocument.fromHtml(content);
    const data = await pdf.saveAsBuffer();
    console.error("data PDF:", data);
    res.setHeader("Content-Type", "application/pdf");
    res.setHeader(
      "Content-Disposition",
      "attachment; filename=awesomeIron.pdf",
    );
    res.send(data);
  } catch (error) {
    console.error("Error generating PDF:", error);
    res.status(500).end();
  }
}
}

' pages/api/pdf.js
import
If True Then
	IronPdfGlobalConfig, PdfDocument
End If
from "@ironsoftware/ironpdf"
' Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key"
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'export default async @function handler(req, res)
'{
'  try
'  {
'	const currentDate = New @Date(); ' javascript dates
'	const formattedDate = format(currentDate, 'MMMM do, yyyy');
'	let content = "<h1>Demo React Hook Form and Generate PDF Using IronPDF</h1>" content+="<p>Date:"+currentDate+"</p>";
'	content+="<p>Formatted Date:"+formattedDate+"</p>";
'	const pdf = await PdfDocument.fromHtml(content);
'	const data = await pdf.saveAsBuffer();
'	console.@error("data PDF:", data);
'	res.setHeader("Content-Type", "application/pdf");
'	res.setHeader("Content-Disposition", "attachment; filename=awesomeIron.pdf",);
'	res.send(data);
'  }
'  catch (@error)
'  {
'	console.@error("Error generating PDF:", @error);
'	res.status(500).@end();
'  }
'}
}

VB C#

现在修改 index.js，并添加以下代码

import Head from "next/head";
import styles from "../styles/Home.module.css";
import React, { useState, useEffect } from "react";
import { format } from 'date-fns';
export default function Home() {
  const [text, setText] = useState("");
  useEffect(() => {
    const currentDate = new Date(); // new date instance
    const formattedDate = format(currentDate, 'MMMM do, yyyy');
    setText(formattedDate);
  }, []);
  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf-datefns?f=" + text);
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf");
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  };  
  const handleChange = (event) => {
    seteText(hashids.encode(event.target.value));
    setText(event.target.value);
  };
  return (
    <div className={styles.container}>
      <Head>
        <title>Generate PDF Using IronPDF</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1>Demo Date-fns and Generate PDF Using IronPDF</h1>     
        <p>
          Formatted Data: {text}
        </p>
        <button style={{ margin: 20, padding: 5 }} onClick={generatePdf}>
          Generate PDF 
        </button>
      </main>
      <style jsx>{`
        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        footer {
          width: 100%;
          height: 100px;
          border-top: 1px solid #eaeaea;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        footer img {
          margin-left: 0.5rem;
        }
        footer a {
          display: flex;
          justify-content: center;
          align-items: center;
          text-decoration: none;
          color: inherit;
        }
        code {
          background: #fafafa;
          border-radius: 5px;
          padding: 0.75rem;
          font-size: 1.1rem;
          font-family:
            Menlo,
            Monaco,
            Lucida Console,
            Liberation Mono,
            DejaVu Sans Mono,
            Bitstream Vera Sans Mono,
            Courier New,
            monospace;
        }
      `}</style>
      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family:
            -apple-system,
            BlinkMacSystemFont,
            Segoe UI,
            Roboto,
            Oxygen,
            Ubuntu,
            Cantarell,
            Fira Sans,
            Droid Sans,
            Helvetica Neue,
            sans-serif;
        }
        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  );
}

import Head from "next/head";
import styles from "../styles/Home.module.css";
import React, { useState, useEffect } from "react";
import { format } from 'date-fns';
export default function Home() {
  const [text, setText] = useState("");
  useEffect(() => {
    const currentDate = new Date(); // new date instance
    const formattedDate = format(currentDate, 'MMMM do, yyyy');
    setText(formattedDate);
  }, []);
  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf-datefns?f=" + text);
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf");
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  };  
  const handleChange = (event) => {
    seteText(hashids.encode(event.target.value));
    setText(event.target.value);
  };
  return (
    <div className={styles.container}>
      <Head>
        <title>Generate PDF Using IronPDF</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1>Demo Date-fns and Generate PDF Using IronPDF</h1>     
        <p>
          Formatted Data: {text}
        </p>
        <button style={{ margin: 20, padding: 5 }} onClick={generatePdf}>
          Generate PDF 
        </button>
      </main>
      <style jsx>{`
        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        footer {
          width: 100%;
          height: 100px;
          border-top: 1px solid #eaeaea;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        footer img {
          margin-left: 0.5rem;
        }
        footer a {
          display: flex;
          justify-content: center;
          align-items: center;
          text-decoration: none;
          color: inherit;
        }
        code {
          background: #fafafa;
          border-radius: 5px;
          padding: 0.75rem;
          font-size: 1.1rem;
          font-family:
            Menlo,
            Monaco,
            Lucida Console,
            Liberation Mono,
            DejaVu Sans Mono,
            Bitstream Vera Sans Mono,
            Courier New,
            monospace;
        }
      `}</style>
      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family:
            -apple-system,
            BlinkMacSystemFont,
            Segoe UI,
            Roboto,
            Oxygen,
            Ubuntu,
            Cantarell,
            Fira Sans,
            Droid Sans,
            Helvetica Neue,
            sans-serif;
        }
        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  );
}

Private Head As import
Private styles As import
'INSTANT VB TODO TASK: The following line could not be converted:
import React,
If True Then
	useState, useEffect
End If
from "react"
import
If True Then
	format
End If
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'from '@date-fns'; export default @function Home() { const [text, setText] = useState(""); useEffect(() => { const currentDate = New @Date(); const formattedDate = format(currentDate, 'MMMM do, yyyy'); setText(formattedDate); }, []); const generatePdf = async() => { try { const response = await fetch("/api/pdf-datefns?f=" + text); const blob = await response.blob(); const url = window.URL.createObjectURL(New Blob([blob])); const link = document.createElement("a"); link.href = url; link.setAttribute("download", "awesomeIron.pdf"); document.body.appendChild(link); link.click(); link.parentNode.removeChild(link); } catch(@error) { console.@error("Error generating PDF:", @error); } }; const handleChange = (event) => { seteText(hashids.encode(event.target.value)); setText(event.target.value); }; Return(<div className={styles.container}> <Head> <title> Generate PDF @Using IronPDF</title> <link rel="icon" href="/favicon.ico" /> </Head> <main> <h1> Demo @Date-fns @and Generate PDF @Using IronPDF</h1> <p> Formatted Data: {text} </p> <button style={{ margin: 20, padding: 5 }} onClick={generatePdf}> Generate PDF </button> </main> <style jsx>{` main { padding: 5rem 0; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; } footer { width: 100%; height: 100px; border-top: 1px solid #eaeaea; display: flex; justify-content: center; align-items: center; } footer img { margin-left: 0.5rem; } footer a { display: flex; justify-content: center; align-items: center; text-decoration: none; color: inherit; } code { background: #fafafa; border-radius: 5px; padding: 0.75rem; font-size: 1.1rem; font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier @New, monospace; } `}</style> <style jsx global>{` html, body { padding: 0; margin: 0; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; } * { box-sizing: border-box; } `}</style> </div>); }

VB C#

输出

date-fns NPM（如何为开发人员工作）：图 6

PDF

date-fns NPM（如何为开发人员工作）：图 7

IronPDF 许可证

IronPDF.

在此处放置许可证密钥：

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

结论

date-fns 是一个多功能、高效的库，为在 React 应用程序中处理日期提供了一个功能强大、简单一致的工具集。其模块化方法使您只需包含必要的功能，从而保持较小的捆绑规模。 date-fns 全面支持日期操作和格式化，可显著增强您的 React 项目。

IronPDF for Node.js 是一个强大的库，使开发人员能够以编程方式无缝生成、操作和处理 PDF 文档。无论您需要将 HTML、URL 或其他格式转换为 PDF，IronPDF 都能提供直接的 API 来高效完成这些任务。其功能包括处理 PDF 表单、应用安全措施、执行 OCR 等。

< 前一页
memcached npm（面向开发人员的工作原理）

下一步 >
express validator npm（它如何为开发人员工作）

使用 npm 安装

版本：2024.11

报告问题

加入我们的Iron Swag漏洞赏金计划

准备开始了吗？版本： 2024.11 刚刚发布

查看许可证 >

date-fns NPM（如何为开发人员工作）

简介

为什么选择 date-fns？

入门

日期格式

输出

解析日期

输出

日期的加减

输出

国际化

输出

介绍IronPDF

主要功能

HTML 转换为 PDF

URL 转换为 PDF

PDF 操作

PDF 安全

高质量输出

跨平台兼容性

简单集成

安装

使用 IronPDF 生成 PDF 文档并使用 Date-Fns

创建 PDF

输出

PDF

IronPDF 许可证

结论

在此页面上

报告问题

准备开始了吗？版本： 2024.11 刚刚发布

在实际环境中测试

全面功能产品

24/5 技术支持

获取您的免费 0天试用密钥立即。

试用表格已提交
成功地.

受到全球数百万工程师的信任

IronPDF 是 IRON 的一部分套装

date-fns NPM（如何为开发人员工作）

简介

为什么选择 date-fns？

入门

日期格式

输出

解析日期

输出

日期的加减

输出

国际化

输出

介绍IronPDF

主要功能

HTML 转换为 PDF

URL 转换为 PDF

PDF 操作

PDF 安全

高质量输出

跨平台兼容性

简单集成

安装

使用 IronPDF 生成 PDF 文档并使用 Date-Fns

创建 PDF

输出

PDF

IronPDF 许可证

结论

在此页面上

报告问题

准备开始了吗？ 版本： 2024.11 刚刚发布

试用表格已提交成功地.

在实际环境中测试

全面功能产品

24/5 技术支持

获取您的免费 0天试用密钥 立即。

试用表格已提交成功地.

受到全球数百万工程师的信任

IronPDF 是 IRON 的一部分套装

准备开始了吗？版本： 2024.11 刚刚发布

试用表格已提交
成功地.

获取您的免费 0天试用密钥立即。

试用表格已提交
成功地.