Question

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

    $("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选择器对于datepicker都是div。您必须为id提供唯一的div，然后在其上使用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>

使用jquery显示日历

1 个答案: