技术问询：如何在Date Picker中加粗日期数字及自定义其样式？

嘿，这个问题我刚好有实操经验，分不同平台/场景给你详细拆解：

一、给日期数字设置粗体 #

Web 场景 #

原生HTML5 DatePicker

不同浏览器对原生<input type="date">的样式渲染差异较大，针对webkit内核（Chrome、Safari等）可以通过伪元素直接修改：

/* 针对日、月、年字段设置粗体 */
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  font-weight: bold;
}

注意：Firefox等非webkit浏览器可能需要不同的伪元素，或者建议使用第三方UI组件来统一样式。

第三方UI组件（如Element UI、Ant Design）

这类组件都提供了可覆盖的CSS类名，以Element UI的DatePicker为例：

/* 给日期面板中的所有日期数字设置粗体 */
.el-date-picker__cell span {
  font-weight: bold;
}

如果只想给选中的日期加粗，可以再加个选中状态的类：

.el-date-picker__cell.el-date-picker__cell--selected span {
  font-weight: 700;
}

Android 场景 #

XML布局中直接设置

通过自定义TextAppearance样式来配置：

<style name="CustomDatePickerText" parent="@android:style/TextAppearance.Medium">
    <item name="android:textStyle">bold</item>
</style>

然后在DatePicker控件中引用该样式：

<DatePicker
    android:id="@+id/datePicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="@style/CustomDatePickerText" />

代码中动态设置

如果需要单独修改日/月/年的样式，可以通过资源ID找到对应的TextView：

DatePicker datePicker = findViewById(R.id.datePicker);
// 获取日期数字的TextView
TextView dayTv = datePicker.findViewById(Resources.getSystem().getIdentifier("day", "id", "android"));
dayTv.setTypeface(null, Typeface.BOLD);

iOS 场景 #

iOS 14+的UIDatePicker支持直接修改字体属性，以Swift为例：

let datePicker = UIDatePicker()
datePicker.preferredDatePickerStyle = .inline // 选择合适的样式（inline/wheels等）
datePicker.font = UIFont.boldSystemFont(ofSize: 16)

如果是旧版本iOS，可能需要自定义DatePicker的滚动视图单元格来实现。

二、自定义日期数字的字体样式、颜色 #

其实和设置粗体的思路一致，都是通过CSS（Web）、样式/代码（Android）、属性配置（iOS）来修改对应的样式属性：

Web 场景 #

扩展CSS属性即可：

input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  font-weight: bold; /* 字体粗细 */
  color: #ff4400; /* 文字颜色 */
  font-family: 'Arial', sans-serif; /* 字体样式 */
  font-size: 16px; /* 字号 */
}

第三方组件同理，找到对应类名修改这些属性：

.ant-picker-cell-inner {
  font-weight: 700;
  color: #1890ff;
  font-family: 'Microsoft YaHei';
}

Android 场景 #

在自定义样式中添加更多属性：

<style name="CustomDatePickerText" parent="@android:style/TextAppearance.Medium">
    <item name="android:textStyle">bold</item>
    <item name="android:textColor">#ff4400</item>
    <item name="android:fontFamily">sans-serif-black</item>
    <item name="android:textSize">18sp</item>
</style>

代码中也可以动态设置：

dayTv.setTextColor(Color.parseColor("#ff4400"));
dayTv.setTypeface(Typeface.create("sans-serif-black", Typeface.NORMAL));

iOS 场景 #

直接扩展属性配置：

datePicker.font = UIFont(name: "Arial", size: 16)?.bold()
datePicker.textColor = .systemRed

内容的提问来源于stack exchange，提问作者Burak Akyalçın