使用jquery显示日历

Question

我试图显示日历时，我点击日历icon.but问题我面临的是当我点击任何其他日历图标的页面上它只打开这个特定的日历propertyPurchaseDate0。

$("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>