使用 jquery 显示日历

Question

我试图在单击日历图标时显示日历。但我面临的问题是，当我单击页面上的任何其他日历图标时，它只会打开这个特定的日历属性PurchaseDate0。

    $("div").on("click","i.fa-calendar", function(){
                debugger;
                $("input#propertyPurchaseDate0").focus();
            }); 

    $("div").on("click","i.fa-calendar", function(){
                debugger;
                $("input#lastValuationDate0").focus();
            }); 



    <div class="table-row" id="div1">
            <div class="table-cell width-12percent margin-top-5px">
                @Html.LabelFor(model => model.PurchaseDate)
            </div>

            <div class="table-cell width-12percent margin-top-5px">
                @Html.EditorFor(model => model.PurchaseDate, new { id = "propertyPurchaseDate" + Model.AccountId, @class = "propertypurchaseDate", @onchange = "SetDate(this)" })
            </div>
        </div>



datetime.cshtml:

@model DateTime?

@{
    var dateFormat = Utils.DefaultDateFormat;
    var jsDateFormat = dateFormat.Replace("MM", "mm");
    var dateString = Model.HasValue ? Model.Value.Date.ToString(dateFormat) : "";
}

<div class="row collapse date" data-date="@dateString" data-date-format="@jsDateFormat">
    <div class="small-10 columns no-padding">
        <input id="@ViewData["id"]" type="text"
               value="@dateString"
               placeholder="@jsDateFormat"
               class="@ViewData["class"]"
               name="@Html.NameForModel()"
               onchange="@ViewData["onchange"]" />
    </div>
    <div class="small-2 columns no-padding" >
        <span class="postfix add-on"><i class="fa fa-calendar"></i></span>
    </div>
</div>

Answer 1

这是因为您使用的 jquery 选择器对于两个日期选择器都是 div。您必须为您的div 提供唯一的id，然后对它们使用click 函数。试试这个：

 $("#div2").on("click","i.fa-calendar", function(){
                debugger;
                $("input#propertyPurchaseDate0").focus();
            }); 

    $("#div3").on("click","i.fa-calendar", function(){
                debugger;
                $("input#lastValuationDate0").focus();
            }); 



    <div class="table-row" id="div1">
            <div id="div2" class="table-cell width-12percent margin-top-5px">
                @Html.LabelFor(model => model.PurchaseDate)
            </div>

            <div id="div3" class="table-cell width-12percent margin-top-5px">
                @Html.EditorFor(model => model.PurchaseDate, new { id = "propertyPurchaseDate" + Model.AccountId, @class = "propertypurchaseDate", @onchange = "SetDate(this)" })
            </div>
        </div>