使用jQuery Ajax将Datepicker日期值从View传递至Controller

嘿，我来帮你把这个需求落地，你的思路已经走对了大半，不过可以调整几个细节让整个流程更顺畅，避免踩坑：

一、前端代码优化（分两种Datepicker场景） #

首先要明确你用的是jQuery UI Datepicker还是Bootstrap Datepicker，两者的事件绑定略有不同，下面分别给出优化后的代码：

场景1：使用Bootstrap Datepicker #

你的原代码里用了changeDate事件，这是Bootstrap Datepicker的专属事件，优化后的代码如下：

<input type="text" name="date" class="datepicker" id="calendar" />

<script type="text/javascript">
$(document).ready(function() {
    // 初始化Bootstrap Datepicker
    $("#calendar").datepicker({
        format: 'dd/mm/yyyy', // Bootstrap Datepicker用format而非dateFormat
        autoclose: true, // 可选：选中日期后自动关闭弹窗
        todayHighlight: true // 可选：高亮今天日期
    }).on("changeDate", function (e) {
        // 把选中的日期转成ISO格式（后端解析更可靠）
        const selectedDate = e.date ? e.date.toISOString() : null;
        
        // 发起Ajax请求
        $.ajax({
            type: "GET",
            url: '@Url.Action("Index","Home")', // Razor语法生成正确的Action地址
            data: { date: selectedDate }, // 用data传递参数，自动处理URL编码
            success: function (response) {
                if (response.success) {
                    alert(`日期已成功传递：${e.date.toLocaleDateString()}`);
                } else {
                    alert("日期传递失败，请检查后端逻辑");
                }
            },
            error: function(xhr, status, err) {
                // 添加错误处理，方便调试
                alert(`请求出错：${err}`);
                console.log("错误详情：", xhr);
            }
        });
    });

    // 设置默认日期为今天
    $("#calendar").datepicker('setDate', 'today');
});
</script>

场景2：使用jQuery UI Datepicker #

如果是jQuery UI的Datepicker，它的事件是onSelect而非changeDate，修改后的代码：

<input type="text" name="date" class="datepicker" id="calendar" />

<script type="text/javascript">
$(document).ready(function() {
    // 初始化jQuery UI Datepicker
    $("#calendar").datepicker({
        dateFormat: 'dd/mm/yy',
        onSelect: function(dateText, inst) {
            // 获取选中的Date对象，转成ISO格式
            const selectedDate = $(this).datepicker('getDate');
            const isoDate = selectedDate ? selectedDate.toISOString() : null;
            
            $.ajax({
                type: "GET",
                url: '@Url.Action("Index","Home")',
                data: { date: isoDate },
                success: function (response) {
                    if (response.success) {
                        alert(`日期已成功传递：${selectedDate.toLocaleDateString()}`);
                    }
                },
                error: function(xhr, status, err) {
                    alert(`请求出错：${err}`);
                }
            });
        }
    }).datepicker('setDate', 'today');
});
</script>

二、后端Controller接收逻辑 #

不管是ASP.NET MVC还是ASP.NET Core，都可以这样写Action方法来接收日期参数：

ASP.NET MVC 示例 #

public ActionResult Index(DateTime? date)
{
    if (date.HasValue)
    {
        // 这里处理你的日期业务逻辑
        // 比如：保存到数据库、查询数据等
        return Json(new { success = true }, JsonRequestBehavior.AllowGet);
    }
    // 如果日期为空或解析失败，返回失败标识
    return Json(new { success = false }, JsonRequestBehavior.AllowGet);
}

ASP.NET Core 示例 #

[HttpGet]
public IActionResult Index(DateTime? date)
{
    if (date.HasValue)
    {
        // 处理业务逻辑
        return Json(new { success = true });
    }
    return Json(new { success = false });
}

特殊情况处理：日期解析问题 #

如果后端接收DateTime参数时出现格式不兼容的问题，可以改成接收字符串后手动转换：

public IActionResult Index(string date)
{
    if (!string.IsNullOrEmpty(date) && DateTime.TryParse(date, out DateTime selectedDate))
    {
        // 处理逻辑
        return Json(new { success = true });
    }
    return Json(new { success = false });
}

三、关键注意事项 #

• 避免手动拼接URL参数：用data属性传递参数，jQuery会自动处理URL编码，避免特殊字符导致的请求失败。
• 日期格式统一：前端传递ISO格式的日期字符串（toISOString()），后端解析时不会出现跨时区或格式不匹配的问题。
• 添加错误处理：Ajax请求一定要加error回调，方便调试请求失败的原因（比如404、500错误）。

内容的提问来源于stack exchange，提问作者M.LOOK