📝 docs(ui): add date form component style guidelines

- add date picker component usage specifications
- define date and time format standards (YYYY-MM-DD, HH:mm:ss)
- specify date range picker requirements and format
- add common date conversion utility functions in typescript
- set date picker properties: size, allowClear, placeholder and disabledDate rules

.roo/rules/13-ui-style.md

@@ -45,6 +45,39 @@
 - 表单布局使用垂直布局，标签在上，输入框在下
 - 输入框聚焦状态：`focus:border-primary focus:ring-1 focus:ring-primary`
 
+### 3.5 日期表单组件
+- 日期选择器使用 `DatePicker` 组件，时间选择使用 `TimePicker` 组件
+- 日期选择器大小与输入框保持一致：`size="middle"`
+- 日期格式统一为 `YYYY-MM-DD`，时间格式为 `HH:mm:ss`
+- 日期范围选择使用 `RangePicker` 组件，格式为 `[YYYY-MM-DD, YYYY-MM-DD]`
+- 日期选择器添加清除按钮：`allowClear`
+- 日期选择器添加占位提示：`placeholder="请选择日期"`
+- 日期选择器禁用未来日期：`disabledDate={(current) => current && current > dayjs().endOf('day')}`（根据业务需求调整）
+- 日期时间转换规范：
+  ```typescript
+  // 日期对象转字符串（提交给后端）
+  const formatDate = (date: Dayjs | null) => {
+    return date ? date.format('YYYY-MM-DD') : '';
+  };
+  
+  // 字符串转日期对象（从后端接收）
+  const parseDate = (str: string) => {
+    return str ? dayjs(str) : null;
+  };
+  
+  // 日期时间对象转字符串
+  const formatDateTime = (date: Dayjs | null) => {
+    return date ? date.format('YYYY-MM-DD HH:mm:ss') : '';
+  };
+  
+  // 日期范围转换
+  const formatDateRange = (range: [Dayjs | null, Dayjs | null]) => {
+    return range && range[0] && range[1]
+      ? [range[0].format('YYYY-MM-DD'), range[1].format('YYYY-MM-DD')]
+      : [];
+  };
+  ```
+
 ### 3.3 表格样式
 - 表格添加边框：`bordered`
 - 表头背景色使用浅灰(#f9fafb)