MVC核心DateTimePicker未显示在动态创建的表中

Question

I am trying to show the datetimepicker box in the table which is created dynamically, here's my code. 我试图在动态创建的表中显示datetimepicker框，这是我的代码。

<body>
        <div class="table-responsive">
                                    <select id="NumOfRow" name="NumOfRow" class="form-control">
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                    </select>
                                   <input id="DateOfBirth" type="text" /> // this one is working
                        <div id="adTable"></div>
    </div>
<script src="~/lib/jquery/jquery-2.1.1.min.js"></script>
    <script src="~/lib/jquery/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
    <script type="text/javascript">

        $("#DateOfBirth").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: "dd/mm/yy",
            yearRange: "-77:+00"
        });
        $("#DateOfBirth").datepicker("option", "showAnim", "clip");

        $(document).ready(function () {
            $('#NumOfRow').change(function () {
                CreateTable();
            });
        });

        function CreateTable() {
            $('#adTable').empty();
            var x = $('#NumOfRow').val();
            var data = '';
            var complete = '';
            var y = 2;
            for (i = 1; i < x; i++) {

                data = '<table>' +
                    '<tr>' +
                    '<td>' +
                    'Vessel Name' +
                    '</td>' +
                    '<td>' +
                    '<input id="Name" type="text"/>' +
                    '</td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td> Date Of Birth </td>' +
                    '<td><input id="datetimepick" type="text"/></td>' +
                    '</tr>' +
                    '</table>';    
                y += 1;
                complete += data;

                $("#datetimepick").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: "dd/mm/yy",
                    yearRange: "-77:+00"
                });
                $("#datetimepick").datepicker("option", "showAnim", "clip");    
            }
            $('#adTable').append(complete);
        }
    </script>
</body>

The table can be generated without any problem, however, the datetimepicker won't shows up in the input that is being generated dynamically. 可以毫无问题地生成表，但是datetimepicker不会显示在动态生成的输入中。 Does anyone know what might be the problem? 有谁知道可能是什么问题？

Thanks 谢谢

Answer 1

You have to do it after you append also you cannot add multiple datetimepicker to an ID, you should make it a class instead 追加后也必须执行此操作，也不能将多个datetimepicker添加到ID中，而应将其设为一个类

HTML 的HTML

<body>
  <div class="table-responsive">
    <select id="NumOfRow" name="NumOfRow" class="form-control">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
    <input id="DateOfBirth" type="text" /> // this one is working
    <div id="adTable"></div>
  </div>
  <script src="~/lib/jquery/jquery-2.1.1.min.js"></script>
  <script src="~/lib/jquery/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<!-- edit: Try with these cdn's if you're not sure your src's are correct -->
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</body>

JQUERY JQUERY

$("#DateOfBirth").datepicker({
  changeMonth: true,
  changeYear: true,
  dateFormat: "dd/mm/yy",
  yearRange: "-77:+00"
});
$("#DateOfBirth").datepicker("option", "showAnim", "clip");

$(document).ready(function() {
  $('#NumOfRow').change(function() {
    CreateTable();
  });
});

function CreateTable() {
  $('#adTable').empty();
  var x = $('#NumOfRow').val();
  var data = '';
  var complete = '';
  var y = 2;
  for (i = 1; i < x; i++) {

    data = '<table>' +
      '<tr>' +
      '<td>' +
      'Vessel Name' +
      '</td>' +
      '<td>' +
      '<input id="Name" type="text"/>' +
      '</td>' +
      '</tr>' +
      '<tr>' +
      '<td> Date Of Birth </td>' +
      '<td><input class="datetimepick" type="text"/></td>' +
      '</tr>' +
      '</table>';
    y += 1;
    complete += data;

  }
  $('#adTable').append(complete);
  $(".datetimepick").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: "dd/mm/yy",
    yearRange: "-77:+00"
  });
  $(".datetimepick").datepicker("option", "showAnim", "clip");
}

JSFIDDLE JSFIDDLE

https://jsfiddle.net/gmuwpytz/ https://jsfiddle.net/gmuwpytz/

MVC核心DateTimePicker未显示在动态创建的表中

问题描述

1 个解决方案

解决方案1
0 2018-01-22 14:33:35

MVC核心DateTimePicker未显示在动态创建的表中

问题描述

1 个解决方案

解决方案1 0 2018-01-22 14:33:35

解决方案1
0 2018-01-22 14:33:35