如何在C# Razor页面中实现DateRangePicker日期范围选择器

要解决单个日期范围选择器映射到模型的StartDate和EndDate两个属性的问题，核心思路是用可视化的日期范围选择器做交互，同时用两个隐藏字段绑定模型的两个日期属性，在选择日期时同步更新隐藏字段的值，具体实现步骤如下：

1. 修改Razor页面代码 #

在表单中添加日期范围选择器的显示容器，以及绑定StartDate和EndDate的隐藏输入框：

@using (Html.BeginForm(..., ..., FormMethod.Get, ...))
{
    <div>
        @Html.LabelFor(x => x.Name)
    </div>
    <div>
        @Html.TextBoxFor(x => x.Name)
    </div>

    <!-- 日期范围选择器显示容器 -->
    <div>
        @Html.Label("日期范围")
        <div id="reportrange" style="cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; border-radius: 4px;">
            <span></span> <i class="fa fa-calendar"></i>&nbsp; <i class="fa fa-caret-down"></i>
        </div>
    </div>

    <!-- 绑定模型的隐藏字段，用于提交表单时传递日期值 -->
    @Html.HiddenFor(x => x.StartDate)
    @Html.HiddenFor(x => x.EndDate)
}

2. 调整JavaScript代码 #

修改daterangepicker的回调函数，在更新显示文本的同时，把选中的日期同步到两个隐藏字段中；另外如果模型已有初始日期值，要优先使用模型值作为daterangepicker的初始值：

<script type="text/javascript">
$(function() {
    // 优先从模型隐藏字段获取初始日期，没有则用默认值
    var startDate = $('#StartDate').val() ? moment($('#StartDate').val()) : moment().subtract(29, 'days');
    var endDate = $('#EndDate').val() ? moment($('#EndDate').val()) : moment();

    function cb(start, end) {
        // 更新显示的日期范围文本
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        // 同步更新隐藏字段的值，确保表单提交时能绑定到模型属性
        $('#StartDate').val(start.format('YYYY-MM-DDTHH:mm:ss'));
        $('#EndDate').val(end.format('YYYY-MM-DDTHH:mm:ss'));
    }

    $('#reportrange').daterangepicker({
        startDate: startDate,
        endDate: endDate,
        ranges: {
           '今天': [moment(), moment()],
           '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           '最近7天': [moment().subtract(6, 'days'), moment()],
           '最近30天': [moment().subtract(29, 'days'), moment()],
           '本月': [moment().startOf('month'), moment().endOf('month')],
           '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);

    // 初始化显示日期范围
    cb(startDate, endDate);
});
</script>

关键说明 #

• 因为Html.TextBoxFor只能绑定单个模型属性，所以我们用Html.HiddenFor分别绑定StartDate和EndDate，这两个隐藏字段负责在表单提交时把日期值传递给后台模型。
• 前台的#reportrange只是用于用户交互的可视化容器，它的值不会直接提交，而是通过回调函数把选中的日期同步到隐藏字段中。
• 日期格式使用YYYY-MM-DDTHH:mm:ss是为了匹配.NET中DateTime类型的默认解析格式，避免日期解析错误。

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