asp.net 如何在C# Razor页面上使用DateRangePicker?

wfypjpf4  于 2023-02-17  发布在  .NET
关注(0)|答案(1)|浏览(192)

我在如何在C#Razor Page上实现日期范围选择器上遇到了麻烦。我看到过一些单一日期选择器的例子(比如选择一个日期),但是没有太多关于日期范围的例子。
所以我正在处理的页面使用HTML Helpers,它从这个类/模型中获取属性:

public class Appointment{
  [Display(Name = "Name")]
  public string Name { get; set; }

  public DateTime StartDate { get; set; }

  public DateTime EndDate { get; set; }
}
@using (Html.BeginForm(..., ..., FormMethod.Get, ...){

  <div>
    @Html.LabelFor(x => x.Name)
  </div>
  <div>
    @Html.TextBoxFor(x => x.Name)
  </div>

  -- the date range input field would be below the above input field, but I'm confused how to use the Html Helper for the two dates for the singular daterangepicker input field
}

daterangepicker的JavaScript示例代码来自此站点,如下所示:

<script type="text/javascript">
$(function() {

    var start = moment().subtract(29, 'days');
    var end = moment();

    function cb(start, end) {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }

    $('#reportrange').daterangepicker({
        startDate: start,
        endDate: end,
        ranges: {
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);

    cb(start, end);

});
</script>

基本上,我对一个输入字段如何Map到StartDate和EndDate感到困惑。我看到TextBoxFor接受一个属性,但不确定如何处理更多的属性。

wz8daaqr

wz8daaqr1#

这个Javascript将生成一个关于日期范围的文本,在我看来,你可以添加一些代码来绑定模型中的日期时间值,请参考这个演示。

    • 页面模型**
[BindProperty]
public Appointment appointment { get; set; }
    • 查看**
<form asp-action="Privacy" method="post">
    <div class="form-group">
        <label asp-for="appointment.Name" class="control-label"></label>
        <input asp-for="appointment.Name" class="form-control" />
    </div>
    <input asp-for="appointment.StartDate" type="hidden" class="form-control" />
    <input asp-for="appointment.EndDate" type="hidden" class="form-control" />
   
    <hr />

    <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
        <i class="fa fa-calendar"></i>&nbsp;
        <span></span> <i class="fa fa-caret-down"></i>
    </div>

    <button type="submit">Submit</button>
</form>
    • Java脚本**
function cb(start, end) {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

                // add this code to bind value.
                var s = start.toJSON();
                var e = end.toJSON();

                $('#appointment_StartDate').val(s);
                $('#appointment_EndDate').val(e);
    }
    • 演示:**

相关问题