antd 点击按钮出来datepicker

在Ant Design (antd) 中，你可以轻松地创建一个点击按钮后弹出日期选择器的组件。首先，你需要安装`antd`库并引入`DatePicker`组件。下面是一个简单的示例：

import { Button, DatePicker } from 'antd';

const { RangePicker } = DatePicker; // 如果你想让用户选择日期范围

// 或者单个日期选择器
function Example() {
  const onChange = (date) => {
    console.log(date);
  };

  return (
    <div>
      <Button type="primary" onClick={() => DatePicker.show({ onChange })}>选择日期</Button>
      {/* 或者使用RangePicker */}
      {/* <Button type="primary" onClick={() => RangePicker.show({ onChange })}>选择日期范围</Button> */}
    </div>
  );
}

export default Example;

在这个例子中，当你点击按钮，`DatePicker.show()`方法会弹出一个日期选择框。用户选择完日期后，回调函数`onChange`会被调用，并传递所选的日期给它。

相关问题

.adm-picker-header:last-child { color: white; background-color: orange; }为何以上代码改变不了antd mobile里的datepicker里的取消按钮的样式？

这是因为 `.adm-picker-header:last-child` 只能选择 `.adm-picker-header` 的最后一个子元素，而取消按钮不是 `.adm-picker-header` 的子元素。你可以通过检查 DOM 结构来找到取消按钮的父元素和类名，并使用相应的 CSS 选择器来更改其样式。例如，如果取消按钮的父元素具有类名 `.am-picker-popup-header-right`，则可以使用以下代码更改其样式：

.am-picker-popup-header-right button {
  color: white;
  background-color: orange;
}

请注意，这只是一个示例代码，具体的 CSS 选择器可能因你的具体情况而有所不同。

.adm-picker-header:last-child { color: white; background-color: orange; }为何以上代码改变不了antd mobile里的datepicker里的"取消"的样式？

这是因为 `.adm-picker-header:last-child` 只能选择 `.adm-picker-header` 的最后一个子元素，而取消按钮不是 `.adm-picker-header` 的子元素。你可以通过检查 DOM 结构来找到取消按钮的父元素和类名，并使用相应的 CSS 选择器来更改其样式。例如，如果取消按钮的父元素具有类名 `.am-picker-popup-header-right`，则可以使用以下代码更改其样式：

.am-picker-popup-header-right button {
  color: white;
  background-color: orange;
}

请注意，这只是一个示例代码，具体的 CSS 选择器可能因你的具体情况而有所不同。