2017-06-28 221 views
0

我試圖修改以下代碼以顯示單擊文本框上的多個日曆。第一個文本框與日曆一起工作,第二個文本框不顯示任何內容。Jquery中的多個日期選擇器

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="///code.jquery.com/resources/demos/style.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    <script> 
 
    $(function() { 
 
    $("#datepicker").datepicker({ 
 
     changeMonth: true, 
 
     changeYear: true 
 
    }); 
 
    }); 
 
    </script> 
 

 
    
 
<p>Date: <input type="text" id="datepicker"></p> 
 
fsdfsdfsd 
 
    
 
sdf 
 
sdf 
 
sdf 
 
    
 
<p>Date: <input type="text" id="datepicker"></p> 
 
    
 
    fsdfsdfsd 
 
    
 
sdf 
 
sdf 
 
sdf 
 
<p>Date: <input type="text" id="datepicker"></p>

+0

不使用具有相同ID的多個輸入... ID的每頁應該是唯一的 –

+0

您可以使用$(「input#datepicker」)來選擇您的日期選擇器輸入與他們的ID。但我會建議使用$(「input.datepicker」)和輸入類名稱 – hasan

回答

1

id必須是唯一的。您可以使用class作爲選擇

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="///code.jquery.com/resources/demos/style.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    <script> 
 
    $(function() { 
 
    $(".myDatepicker").datepicker({ 
 
     changeMonth: true, 
 
     changeYear: true 
 
    }); 
 
    }); 
 
    </script> 
 

 
    
 
<p>Date: <input type="text" id="datepicker1" class="myDatepicker"></p> 
 
fsdfsdfsd 
 
    
 
sdf 
 
sdf 
 
sdf 
 
    
 
<p>Date: <input type="text" id="datepicker2" class="myDatepicker"></p> 
 
    
 
    fsdfsdfsd 
 
    
 
sdf 
 
sdf 
 
sdf 
 
<p>Date: <input type="text" id="datepicker3" class="myDatepicker"></p>

1

你一個ID選擇您的日期選擇器id元素,所以纔有了第一個ID會被選中(IDS必須是唯一的!) 改變它一個類,它應該工作