如何在React JS中实现可点击的Glyphicon日历图标

当然可以搞定！在React里让Glyphicon日历图标触发datetime picker其实没那么复杂，我给你几个实用的方案，你可以根据自己的需求选择：

方案1：使用react-datepicker（推荐，功能完善） #

这是React生态里最常用的日期选择库之一，支持日期+时间选择，样式也容易定制。

步骤： #

1. 先安装依赖：

npm install react-datepicker date-fns
# 或者用yarn
yarn add react-datepicker date-fns

2. 编写组件代码：

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

const CalendarPicker = () => {
  // 管理选中的日期和picker的显示状态
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [isPickerVisible, setIsPickerVisible] = useState(false);

  return (
    <div className="your-class-name">
      {/* 给日历图标绑定点击事件，切换picker显示 */}
      <i 
        className="glyphicon glyphicon-calendar" 
        onClick={() => setIsPickerVisible(!isPickerVisible)}
        style={{ cursor: 'pointer', padding: '4px' }} // 加样式提示用户可点击
      ></i>

      {/* 根据状态控制picker的显示/隐藏 */}
      {isPickerVisible && (
        <DatePicker
          selected={selectedDate}
          onChange={(date) => setSelectedDate(date)}
          onSelect={() => setIsPickerVisible(false)} // 选完日期自动关闭picker
          showTimeSelect // 开启时间选择（不需要可以删掉）
          dateFormat="yyyy-MM-dd HH:mm"
          popperPlacement="bottom-start" // 控制picker弹出位置
        />
      )}
    </div>
  );
};

export default CalendarPicker;

方案2：使用react-datetime #

另一个成熟的日期时间选择库，基于Moment.js，灵活性也很强。

步骤： #

1. 安装依赖：

npm install react-datetime moment
# 或者yarn
yarn add react-datetime moment

2. 组件代码示例：

import React, { useState } from 'react';
import Datetime from 'react-datetime';
import 'react-datetime/css/react-datetime.css';

const CalendarPicker = () => {
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [isPickerVisible, setIsPickerVisible] = useState(false);

  return (
    <div className="your-class-name">
      <i 
        className="glyphicon glyphicon-calendar" 
        onClick={() => setIsPickerVisible(!isPickerVisible)}
        style={{ cursor: 'pointer', padding: '4px' }}
      ></i>

      {isPickerVisible && (
        <Datetime
          value={selectedDate}
          onChange={(date) => {
            setSelectedDate(date);
            setIsPickerVisible(false);
          }}
          closeOnSelect={true}
          timeFormat="HH:mm"
          dateFormat="YYYY-MM-DD"
        />
      )}
    </div>
  );
};

export default CalendarPicker;

方案3：原生input[type="datetime-local"]实现（轻量但样式有限） #

如果不需要复杂的自定义样式，用原生HTML的日期输入框也能快速实现：

import React, { useRef } from 'react';

const CalendarPicker = () => {
  // 用ref获取原生input元素
  const dateInputRef = useRef(null);

  const handleIconClick = () => {
    // 调用原生API触发日期选择器
    dateInputRef.current?.showPicker();
  };

  return (
    <div className="your-class-name">
      <i 
        className="glyphicon glyphicon-calendar" 
        onClick={handleIconClick}
        style={{ cursor: 'pointer', padding: '4px' }}
      ></i>
      
      {/* 隐藏原生input，只通过图标触发 */}
      <input
        ref={dateInputRef}
        type="datetime-local"
        style={{ display: 'none' }}
        onChange={(e) => console.log('选中的日期时间:', e.target.value)}
      />
    </div>
  );
};

export default CalendarPicker;

小提示： #

• 记得给图标加上cursor: pointer样式，让用户直观知道这是可点击的元素
• 第三方库都支持自定义样式，你可以根据项目需求调整picker的外观

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