Question

布局中的脚本：

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

@Styles.Render("~/Content/themes/base/css")

<script type="text/javascript">
    $(function () {
        $('.datepicker').each(function() {
            $(this).datepicker({
                changeMonth: true,
                changeYear: true
            });
        });
        $('#datePicker').datepicker({
            changeMonth: true,
            changeYear: true
        });
    });
</script>

在我的应用程序的视图中，我将返回包含此模型的项目列表：

public partial class COLLECTION DETAIL
{
    (...)
    public System.DateTime DATE_ADDED { get; set; }
    public System.DateTime DATE_EXPIRE { get; set; }
    (...)
}

这个模型就像这样呈现

@for (int i = 0; i < Model.COLLECTION.Count; i++)
{
    <div>
        Added: @Model.COLLECTION[i].DATE_ADDED.ToShortDateString()
    </div>
    <div>
        Expire: 
        <input type="text" id="datePicker" value="@Model.COLLECTION[i].DATE_EXPIRE.ToShortDateString()"/>
    </div>
}

datepicker适用于集合的第一项，但由于ID而不适用于其他项目。如果我改为使用类，则datepicker现在不起作用。任何人都可以帮我把整个事情搞定吗？我需要能够设置一个新日期（如图所示），然后以POST方法发布数据。

Answer 1

简化您的JavaScript。由于datepicker已经应用于所选元素数组，因此无需循环（.each()..）。

$('.datepicker').datepicker({
          changeMonth: true,
          changeYear: true
});

将ID更改为HTML中的类。检查外壳：

<div>
    Expire: 
    <input type="text" class="datepicker" value="@Model.COLLECTION[i].DATE_EXPIRE.ToShortDateString()"/>
</div>

Answer 2

这对我有用，这里是DEMO and JSFIDDLE

$(function () {
        $('.datepicker').datepicker({
                changeMonth: true,
                changeYear: true
            });
        });

Datepicker不处理项目的收集

2 个答案: