禁用特定日期及其之前的所有日期

Disable Specific Date and all Dates before it

本文关键字：日期      更新时间：2023-09-26

我正在使用datetimepicker，我想从控制器和它之前的所有日期禁用特定日期。

那么我如何将日期从控制器传递到datetimepicker呢?

我的意思是:

MRecord firstMR = db.MRecords.Where(x => x.AID == dSum.AircraftID).OrderBy(x => x.DateEntered).FirstOrDefault();
<script type="text/javascript">
    $(function () {
        $('#datetimepicker5').datetimepicker({
            disabledDates: [
                // how do I disable all dates before and including firstMR.DateEntered?
            ]
        });
    });
    </script>

是否可以在视图中完成这些操作?我在用剃刀。

任何帮助都是感激的。

我正在Razor视图中尝试:

@{
    ViewBag.Title = "Create";
    var firstMR = new ALogSummary.Models.MRecord();
    using (var db = new AviationLogSummary.Models.ALogsEntities())
    {
        firstMR = db.MRecords.Where(x => x.AID == Model.AID).OrderBy(x => x.DateEntered).FirstOrDefault();
    }
}

<div id="datetimepicker2" class="input-group date">
    @Html.EditorFor(model => model.Day, new { htmlAttributes = new { id = "Day", @class = "form-control" } })
    @Html.ValidationMessageFor(model => model.Day, "", new { @class = "text-danger" })
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
</div>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker2').datetimepicker({
            format: 'MM/DD/YYYY HH:mm',
            minDate: [@firstMR.DateEntered.Date]
        });
    });
 </script>

我在调试时收到这个错误:

JavaScript在http://localhost:xxxxx/DSummaries/Create/7'n'nSCRIPT1007: Expected ']'中出现第160行第49列严重错误

更新2 : 

<div id="datetimepicker2" class="input-group date" >
    @Html.EditorFor(model => model.Day, new { htmlAttributes = new { id = "Day", @class = "form-control", data_mindate = firstMR.DateEntered.Date } })
    @Html.ValidationMessageFor(model => model.Day, "", new { @class = "text-danger" })
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

脚本:

这是在它自己的JS文件

$(function () {
    $('#datetimepicker2').datetimepicker({
        format: 'MM/DD/YYYY HH:mm',
        minDate: $(this).data('mindate')
    });
});

HTML输出为:

<input class="form-control text-box single-line valid" id="Day" type="datetime" data-val-required="This field is required!" data-val="true" data-mindate="05/28/2016 00:00:00" data-val-date="This field: must be a date." value="06/28/2016 09:07"></input>

所以正确的mindate正在被填充，但我的脚本不工作。

与其使用disabledDates选项，不如使用minDate选项来防止用户在minDate值之前选择日期

$('#datetimepicker2').datetimepicker({
    format: 'MM/DD/YYYY HH:mm',
    minDate: '@firstMR.DateEntered.Date'
});

由于该脚本位于外部js文件中(并且razor代码不在外部文件中解析)，您可以在元素

上使用data-*属性传递值
@Html.EditorFor(model => model.Day, new { htmlAttributes = new { data_mindate = firstMR.DateEntered.Date, @class = "form-control" } })

请注意，没有必要包括id = "Day"，因为它已经由EditorFor()方法添加(并且由于脚本引用了具有id="datetimepicker2"的元素，因此您似乎犯了一个错别字)。

在外部文件

var day = $('#Day')
day.datetimepicker({
    format: 'MM/DD/YYYY HH:mm',
    minDate: day.data('mindate')
});
相关文章：