在HTML表單的文本輸入字段上進行選擇后，無法使DatePicker工作

Question

我有一個HTML編輯表單，該表單顯示數據庫中的字段並允許用戶編輯數據庫字段。 對於一個稱為“ detentiondate”的字段，我計划放置一個日期選擇器。 這樣，當單擊以編輯日期時，將顯示一個日期選擇器，我可以檢索新日期並更新到數據庫。 我的日期格式為mm / dd / yyyy（例如2016年1月28日）。

現在，單擊文本字段后，我很難使日期選擇器顯示出來。 這是我的代碼，請讓我知道我哪里出錯了，謝謝！

<script>
     $(document).ready(function() {     
     $('#selectDate').datepicker({
     dateFormat: "mm/dd/yy",
     onSelect: function(dateEdit, inst) {

       if (dateEdit.trim().length != 0) {      
                var dateSelected = new Object();
                dateSelected.latedate = dateEdit;                        
            } 
    }
});

});
</script>

<input id="selectDate" type="text" name="detentiondate<?php echo $StudLateDetails['lateid'] ?>" size="15" value="<?php echo $StudLateDetails['detentiondate'] ?>"/>

//This is gotten from the page source which shows the database field values
<input id="selectDate" type="text" name="detentiondate21" size="15" value="01/28/2016"/></tr>

Answer 1

好的，您可以像這樣在文本框中添加類名稱

您更改腳本包含行此順序

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>


<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

<script>
 $(document).ready(function() {     
 $('.selectDate').datepicker({
 dateFormat: "mm/dd/yy",
 onSelect: function(dateEdit, inst) {

   if (dateEdit.trim().length != 0) {      
            var dateSelected = new Object();
            dateSelected.latedate = dateEdit;                        
        } 
}
});

});</script>

<input id="selectDate<?php echo $StudLateDetails['lateid'] ?>" class="selectDate" type="text" name="detentiondate<?php echo $StudLateDetails['lateid'] ?>" size="15" value="<?php echo $StudLateDetails['detentiondate'] ?>"/>

此代碼工作正常