禁用特定日期和之前的所有日期

时间:2016-06-27 16:08:51

标签: javascript asp.net-mvc-5 eonasdan-datetimepicker

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

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

这就是我的意思:

.enablePlugins(JavaAppPackaging, PlayScala,  SbtWeb)

是否可以在视图中执行此操作?我正在使用剃须刀。

感谢任何帮助。

更新

我在Razor View中尝试这个:

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>

我在调试时收到此错误:

  

{160}中第49行的JavaScript严重错误\ n \ n \ nSCRIPT1007:预期']'

更新2

@{
    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>

SCRIPT:

这是它自己的JS文件

<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>

HTML输出是:

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

所以正在填充正确的思维,但我的脚本无效。

1 个答案:

答案 0 :(得分:1)

使用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') }); 的元素,因此您似乎已经输了一个拼写错误)。

然后在外部文件中

{{1}}