使用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>