写一个时间组件，点击之后弹出年份的选择，选择年份后弹出月份的选择，选择月份后弹出日期的选择

为了创建这样的时间组件，你可以使用JavaScript库如React或Vue.js，结合HTML和CSS来实现交互式UI。下面是一个简单的React示例，展示如何一步一步构建这个功能：

首先安装所需的依赖：

npm install react react-dom moment

然后，在一个React组件中，我们可以这样做：

import React, { useState } from 'react';
import moment from 'moment';

const TimePicker = () => {
  const [selectedYear, setSelectedYear] = useState(moment().year());
  const [selectedMonth, setSelectedMonth] = useState(moment().month() + 1);
  const [selectedDay, setSelectedDay] = useState(moment().date());

  const handleYearChange = (year) => {
    setSelectedYear(year);
  };

  const handleMonthChange = (month) => {
    setSelectedMonth(month);
  };

  const handleDayChange = (day) => {
    setSelectedDay(day);
  };

  return (
    <div>
      <h3>选择年份</h3>
      <select value={selectedYear} onChange={(e) => handleYearChange(e.target.value)}>
        {Array.from({ length: 100 }, (_, i) => (
          <option key={i} value={i}>
            {i}
          </option>
        ))}
      </select>

      <button onClick={() => setMonthPicker(selectedYear)}>选择月份</button>
      {/* 这里省略月份选择组件的实现，类似上面的select */}
      
      <button onClick={() => setDatePicker(selectedYear, selectedMonth)}>选择日期</button>
      {/* 同样，这里省略日期选择组件的实现 */}
      
      <p>您选择了: {selectedYear}-{selectedMonth}-{selectedDay}</p>
    </div>
  );
};

export default TimePicker;

这个例子中，我们首先创建了三个状态变量来存储当前的年、月和日。然后，我们在`handleYearChange`等函数中更新对应的值。当用户点击相应的按钮时，会触发对应方法，设置新的选择层级。

请注意，你需要为月份和日期添加相似的处理逻辑和选择组件，这通常是通过递归或条件渲染嵌套的下拉列表来实现的。实际应用中，可能会考虑使用第三方UI库，如Ant Design或Material-UI，它们提供现成的日期选择器组件可以简化开发。