在ASP.NET中获取日期选择器的两个输入值的方法

针对你用单个输入框实现的日期范围选择器，要把选中的两个日期分别赋值给模型的ChefFoodPriceFromDate和ChefFoodPriceToDate属性，有以下几种可行方案：

方案一：前端拆分日期并通过隐藏域提交 #

这种方式适合表单提交或AJAX请求，核心是监听日期选择器的选择事件，拆分出起始和结束日期，存入隐藏输入框，让后端模型自动绑定。

1. 先在页面添加两个隐藏输入框，对应模型的两个属性：

<input type="hidden" name="ChefFoodPriceFromDate" id="fromDate">
<input type="hidden" name="ChefFoodPriceToDate" id="toDate">

2. 初始化日期选择器时，在回调函数中处理日期拆分和赋值（以bootstrap-daterangepicker为例）：

$('.input-daterange-datepicker').daterangepicker({
    locale: {
        format: 'MM/DD/YYYY' // 和控件默认输出格式保持一致
    }
}, function(start, end, label) {
    // 将日期转为后端可识别的格式（比如YYYY-MM-DD）
    $('#fromDate').val(start.format('YYYY-MM-DD'));
    $('#toDate').val(end.format('YYYY-MM-DD'));
});

提交表单时，后端模型会自动将隐藏域的值绑定到对应的DateTime属性。

方案二：后端接收字符串后拆分转换 #

如果不想修改前端代码，可以在后端控制器中直接接收日期范围字符串，拆分后转换为DateTime类型赋值给模型。

在控制器的Action中处理：

using System.Globalization;

[HttpPost]
public IActionResult YourAction(string daterange, YourModel model)
{
    if (!string.IsNullOrWhiteSpace(daterange))
    {
        // 按控件输出的分隔符" - "拆分字符串
        var dateSegments = daterange.Split(new[] {" - "}, StringSplitOptions.RemoveEmptyEntries);
        if (dateSegments.Length == 2)
        {
            // 按前端日期格式解析，注意格式要和控件输出一致
            if (DateTime.TryParseExact(dateSegments[0], "MM/dd/yyyy", CultureInfo.InvariantCulture, DateTimeStyles.None, out DateTime fromDate))
            {
                model.ChefFoodPriceFromDate = fromDate;
            }
            if (DateTime.TryParseExact(dateSegments[1], "MM/dd/yyyy", CultureInfo.InvariantCulture, DateTimeStyles.None, out DateTime toDate))
            {
                model.ChefFoodPriceToDate = toDate;
            }
        }
    }
    // 后续业务逻辑处理
    return View(model);
}

方案三：改为双输入框绑定（推荐） #

很多日期范围选择器原生支持双输入框模式，直接将两个输入框分别绑定模型的两个属性，无需额外拆分处理。

1. 修改页面HTML为双输入框结构：

<div class="col-md-8">
    <label class="m-t-20">Date Range Pick</label>
    <div class="input-daterange input-group">
        <input type="text" class="form-control" name="ChefFoodPriceFromDate" value="01/01/2015">
        <div class="input-group-addon">to</div>
        <input type="text" class="form-control" name="ChefFoodPriceToDate" value="01/31/2015">
    </div>
</div>

2. 初始化日期选择器：

$('.input-daterange').daterangepicker({
    locale: {
        format: 'MM/DD/YYYY'
    }
});

这种方式下，表单提交时模型会自动完成两个DateTime属性的绑定，代码更简洁易维护。

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