Android WebView中HTML日期时间选择器Set/Clear翻译缺失求助

问题背景 #

在Android WebView中使用time/date类型的HTML输入框时，荷兰语环境下选择器的“Set”和“Clear”按钮翻译缺失，但Chrome浏览器中显示正常——这是因为WebView依赖系统WebView组件的本地化资源，而Chrome拥有独立的本地化包。

以下是可行的解决办法：

1. 自定义日期时间选择器（推荐方案） #

通过隐藏原生HTML输入控件，改用Android原生的日期/时间选择对话框（自动适配系统语言），再将选中结果同步到网页输入框：

Android 端代码示例（Kotlin） #

// 定义与网页交互的JavaScript接口
class WebAppInterface(private val context: Context, private val webView: WebView) {
    @JavascriptInterface
    fun showTimePicker() {
        val timePickerDialog = TimePickerDialog(
            context,
            { _, hour, minute ->
                // 将格式化后的时间传递回网页
                val formattedTime = String.format("%02d:%02d", hour, minute)
                webView.evaluateJavascript("document.querySelector('input[type=\"time\"]').value = '$formattedTime';", null)
            },
            0, 0, true
        )
        timePickerDialog.show()
    }

    @JavascriptInterface
    fun showDatePicker() {
        val datePickerDialog = DatePickerDialog(
            context,
            { _, year, month, day ->
                val formattedDate = String.format("%04d-%02d-%02d", year, month + 1, day)
                webView.evaluateJavascript("document.querySelector('input[type=\"date\"]').value = '$formattedDate';", null)
            },
            2024, 0, 1
        )
        datePickerDialog.show()
    }
}

// 配置WebView并绑定接口
webView.settings.javaScriptEnabled = true
webView.addJavascriptInterface(WebAppInterface(this, webView), "AndroidPicker")
webView.loadUrl("https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time")

网页端JavaScript代码 #

// 处理time输入框
const timeInput = document.querySelector('input[type="time"]');
if (timeInput) {
    timeInput.style.display = 'none';
    const pickerBtn = document.createElement('button');
    pickerBtn.textContent = '选择时间';
    timeInput.parentNode.appendChild(pickerBtn);
    pickerBtn.addEventListener('click', () => AndroidPicker.showTimePicker());
}

// 处理date输入框
const dateInput = document.querySelector('input[type="date"]');
if (dateInput) {
    dateInput.style.display = 'none';
    const pickerBtn = document.createElement('button');
    pickerBtn.textContent = '选择日期';
    dateInput.parentNode.appendChild(pickerBtn);
    pickerBtn.addEventListener('click', () => AndroidPicker.showDatePicker());
}

2. 更新系统WebView组件 #

部分旧版本的Android System WebView存在本地化资源缺失问题，引导用户通过Google Play商店或系统更新渠道将WebView升级至最新版本，新版本可能已修复荷兰语翻译遗漏的问题。

3. 改用Chrome Custom Tabs（若场景允许） #

如果无需在App内嵌入网页，而是打开外部链接，可使用Chrome Custom Tabs。它会复用Chrome浏览器的本地化资源，确保日期时间选择器的翻译正常显示。

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