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

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({...});

这应该适用于您的所有领域。