如何将<input type=date/>控件的值赋值到JavaScript外部变量？

你应该是想把HTML5日期选择器（dtpFrom/dtpTo）的值同步到Razor生成的文本框里，原代码存在几个小问题，我帮你修正并解释清楚：

原代码的核心问题 #

1. 服务器端与客户端变量混淆：你定义的FDate和TDate是客户端全局变量，但Razor的@Html.TextBox是服务器端渲染的——渲染时这些变量还是空字符串，后续JS无法直接修改服务器端变量，只能操作客户端DOM元素。
2. 元素ID匹配错误：@Html.TextBox("fromDate", FDate)生成的input元素ID是fromDate，但你的JS里写的是document.getElementById("FDate")，根本找不到这个元素，自然无法完成赋值。
3. dtpTo未绑定同步事件：只有dtpFrom加了onchange，修改结束日期时不会触发同步逻辑。

修正后的完整代码 #

<script>
function syncDates() {
    // 同步开始日期到对应文本框
    document.getElementById("fromDate").value = document.getElementById("dtpFrom").value;
    // 同步结束日期到对应文本框
    document.getElementById("toDate").value = document.getElementById("dtpTo").value;
}
</script>
<p>
    <strong>Find by MAWB: @Html.TextBox("searchstring")</strong>
    <strong>From: @Html.TextBox("fromDate")</strong>
    <strong>To: @Html.TextBox("toDate")</strong>
    <input type="Date" id="dtpFrom" onchange="syncDates()" />
    <input type="Date" id="dtpTo" onchange="syncDates()" />
    <input type="submit" value="Search" />
</p>

额外优化提示 #

如果想更高效，也可以给每个日期选择器单独绑定事件，只同步对应文本框：

function syncFromDate() {
    document.getElementById("fromDate").value = document.getElementById("dtpFrom").value;
}
function syncToDate() {
    document.getElementById("toDate").value = document.getElementById("dtpTo").value;
}

然后修改日期选择器的事件绑定：

<input type="Date" id="dtpFrom" onchange="syncFromDate()" />
<input type="Date" id="dtpTo" onchange="syncToDate()" />

另外，只要文本框的name属性（这里的fromDate和toDate）和后端动作方法的参数/模型属性名一致，表单提交时就能正确把值传给后端，不需要额外处理服务器端变量。

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