如何将基于Hotel Datepicker与Fecha的原生JS代码转为NextJS代码

1. 依赖安装与导入 #

• 先确保安装所需依赖：

  npm install hotel-datepicker-master fecha
  # 或用yarn
  yarn add hotel-datepicker-master fecha
  

• 在组件中正确导入模块，避免遗漏Fecha的完整引用：

  import HotelDatePicker from 'hotel-datepicker-master';
  import * as fecha from 'fecha';
  

2. 组件初始化处理（函数组件，NextJS推荐写法） #

利用useEffect确保DOM挂载后再初始化日期选择器，同时显式传入Fecha实例：

import { useEffect, useRef } from 'react';

export default function Hero() {
  const datepickerInputRef = useRef(null);
  const datepickerInstanceRef = useRef(null);

  useEffect(() => {
    if (!datepickerInputRef.current) return;

    // 初始化时将Fecha传入配置，解决format方法未找到的问题
    datepickerInstanceRef.current = new HotelDatePicker(datepickerInputRef.current, {
      format: 'YYYY-MM-DD',
      datepicker: {
        fecha
      }
    });

    // 组件卸载时清理实例，避免内存泄漏
    return () => {
      datepickerInstanceRef.current?.destroy();
    };
  }, []);

  return (
    <div>
      <input ref={datepickerInputRef} type="text" id="datepicker" />
    </div>
  );
}

3. _app.js全局样式配置 #

Hotel Datepicker需要全局样式支持，在_app.js中导入：

import 'hotel-datepicker-master/dist/css/hotel-datepicker.min.css';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

4. 错误原因说明 #

你遇到的Cannot read properties of undefined (reading 'format')，核心是原生JS中Fecha是全局变量，但React/NextJS的模块化环境下，Datepicker无法自动获取到Fecha实例。必须在初始化时通过配置项显式传入Fecha，才能让内部调用format方法时找到正确的引用。

5. NextJS 13+ App Router额外处理 #

如果使用App Router，需要在组件顶部添加'use client'标记，确保组件在客户端执行：

'use client';
import { useEffect, useRef } from 'react';
import HotelDatePicker from 'hotel-datepicker-master';
import * as fecha from 'fecha';

// 后续组件代码同上

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