在HTML表单的文本输入字段上选择后，无法使DatePicker正常工作

Question

I have a HTML edit form that shows fields from database and allow users to edit the database fields. For one of the fields which is known as "detentiondate", I plan to put a date picker. So that when clicked to edit the date, a datepicker will be shown and I can retrieve the new date and update to the database. My date format is in mm/dd/yyyy (e.g. 01/28/2016).

Now I have trouble getting the datepicker to show up once I click on the textfield. Here is my code and please let me know where have I went wrong, thank you!

<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

Ok You Add class name in textbox like this

you change Script include line this order

 <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'] ?>"/>

This code Working fine