如何将Plotly-Dash DatePicker文本切换为希伯来语？

方法1：直接替换占位文本 #

把代码里的占位文本直接换成希伯来语即可：

start_date_placeholder_text="תאריך התחלה",
end_date_placeholder_text="תאריך סיום"

方法2：自定义日历内文本（月份、星期） #

Dash原生的dcc.DatePickerRange没有内置希伯来语本地化，需要手动替换日历里的英文文本（比如月份名、星期几），可以通过JavaScript操作DOM实现：

1. 先定义希伯来语的月份和星期映射：

hebrew_months = {
    1: "ינואר", 2: "פברואר", 3: "מרץ", 4: "אפריל",
    5: "מאי", 6: "יוני", 7: "יולי", 8: "אוגוסט",
    9: "ספטמבר", 10: "אוקטובר", 11: "נובמבר", 12: "דצמבר"
}
hebrew_week_days = ["ראשון", "שני", "שלישי", "רביעי", "חמישי", "שישי", "שבת"]

2. 修改代码，嵌入JS脚本替换文本：

from datetime import date
from dash import html, dcc

def render_date_picker(col):
    return html.Div([
        dcc.DatePickerRange(
            id=f'event-{col["id"]}-date-range',
            start_date_placeholder_text="תאריך התחלה",
            end_date_placeholder_text="תאריך סיום",
            display_format='DD/MM/YY',
            first_day_of_week=0,  # 希伯来语中周日为一周首日
            calendar_orientation='horizontal',
            is_RTL=True,
            clearable=True,
            with_portal=True,
            month_format='MMMM YYYY',
            day_size=40,
            min_date_allowed=date(2020, 1, 1),
            max_date_allowed=date(2025, 12, 31),
            initial_visible_month=date.today(),
            updatemode='bothdates'
        ),
        html.Div(id=f'event-{col["id"]}-localization-trigger'),
        # 嵌入JS替换日历内的英文文本
        html.Script(f'''
            document.addEventListener('DOMContentLoaded', function() {{
                // 替换月份名称
                const monthElements = document.querySelectorAll('.DatePickerMonth');
                const hebrewMonths = {hebrew_months};
                monthElements.forEach(el => {{
                    const [engMonth, year] = el.textContent.trim().split(' ');
                    const monthNum = new Date(Date.parse(engMonth + ' 1, 2020')).getMonth() + 1;
                    el.textContent = `${{hebrewMonths[monthNum]}} ${{year}}`;
                }});
                // 替换星期几表头
                const dayHeaders = document.querySelectorAll('.CalendarDay__week-day');
                const hebrewDays = {hebrew_week_days};
                dayHeaders.forEach((el, idx) => {{
                    el.textContent = hebrewDays[idx];
                }});
            }});
        ''')
    ], className='date-picker-container')

3. 补充CSS优化RTL布局（可选）：
   如果出现布局错位，添加自定义CSS调整：

.date-picker-container .DateRangePickerInput {
    direction: rtl;
    text-align: right;
}
.DatePickerCalendar {
    direction: rtl;
}

方法3：使用第三方组件简化操作 #

如果不想手动处理DOM，可以使用dash-mantine-components的日期选择器，它内置多语言支持，直接设置locale="he"就能实现希伯来语本地化：

from dash_mantine_components import DateRangePicker

DateRangePicker(
    locale="he",
    placeholder="בחר טווח תאריכים",
    format="DD/MM/YY"
)

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