Question

在我的视图中，我有4个EditorFor字段，我想将其作为DatePickers

<div class="editor-field">
            @Html.EditorFor(model => model.Date1)            
</div>  

<div class="editor-field">
            @Html.EditorFor(model => model.Date2)            
</div>  
<div class="editor-field">
            @Html.EditorFor(model => model.Date3)            
</div>   
<div class="editor-field">
            @Html.EditorFor(model => model.Date4)            
</div>

我已经像这样实现了EditorFor Template

@model System.DateTime?

<link rel="stylesheet" href="~/Scripts/jquery-ui.css" />
<script language="Javascript" type="text/javascript" src="~/Scripts/jquery-1.9.1.js"></script>
<script language="Javascript" type="text/javascript" src="~/Scripts/jquery-ui.js"></script>

<div class="editor-field">
    @Html.TextBox("", String.Format("{0:MM/dd/yyyy}",(Model == DateTime.MinValue)? null : Model), new { @class="text"})
</div>

<script type="text/javascript">
    jQuery(document).ready(function ($) {        
        $("#@ViewData.ModelMetadata.PropertyName").datepicker({            
            changeMonth: true,
            changeYear: true,
            dateFormat: 'yy/mm/dd',
            gotoCurrent: true,
            pickTime: false
        });      
    });

</script>

但是，当DatePickers仅适用于

的第一个EditorFor Control时

<div class="editor-field">
            @Html.EditorFor(model => model.Date1)            
</div>

并且它对三者中的其余部分不起作用你能不能请任何人告诉我如何获取三个EditorFor控件的其余部分的日期选择器，谢谢

Answer 1

我宁愿为这些编辑添加一些css类：

@Html.EditorFor(model => model.Date1, new { @class = "date-picker"});

然后只使用带选择器的单个脚本：

$('.date-picker').datepicker({...});

这适用于所有领域。

Answer 2

@Stephen Muecke对。

但是如果你还想使用你的模板。将此部分移动到布局：

<link rel="stylesheet" href="~/Scripts/jquery-ui.css" />
<script language="Javascript" type="text/javascript" src="~/Scripts/jquery-1.9.1.js"></script>
<script language="Javascript" type="text/javascript" src="~/Scripts/jquery-ui.js"></script>

所以你的编辑器模板将是：

@model System.DateTime?

<div class="editor-field">
    @Html.TextBox("", String.Format("{0:MM/dd/yyyy}",(Model == DateTime.MinValue)? null : Model), new { @class="text"})
</div>

<script type="text/javascript">
    jQuery(document).ready(function ($) {        
        $("#@ViewData.ModelMetadata.PropertyName").datepicker({            
            changeMonth: true,
            changeYear: true,
            dateFormat: 'yy/mm/dd',
            gotoCurrent: true,
            pickTime: false
        });      
    });

</script>

如何在单个页面中获取多个EditorFor的日期选择器

2 个答案: