Question

有没有办法像下面给出的图像那样创建动态数据选择器

这是我尝试过的。但我想要更多交互式日期选择器。我有什么方法可以创建我在图像中给出的。这不是我的员工所需要的。所以，我需要一些好看的日期选择器来完成我的作业提交

NaCH.html

        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="utf-8">
        <title>Design Challenge</title>

        <!-- Viewport-->
        <meta name="viewport" content="width=device-width" />

        <!-- Favicons
        <link rel="shortcut icon" href="img\favicon.png" type="image/x-icon"> -->

        <!-- Bootstrap-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

         <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

        <script src="js/date.js"></script>

        <!-- Custom CSS-->
        <link rel="stylesheet" href="css/style.css">

    </head>
    <body>
        <section id="block2">
            <div class="container">
                <div class="well"></div>
            </div>
        </section>
        <section id="nach">
            <div class="container2" style="margin-top:40px">
                <div class="col-md-8 col-md-offset-2">
                  <table class="table">
                      <tr class="header">
                        <td style="padding-left:25px;">Show</td>
                        <td>
                            <select>
                             <option value="" style="display:none;"></option>
                             <option value="0">KYC <span>COMPLETED</span></option>
                             <option value="1">MANDATE <span>SENT</span></option>
                             <option value="2">MANDATE <span>RECEIVED</span></option>
                            </select>
                          </td>
                      </tr>
                      <tr class="body">
                        <td >Sl.no</td>
                        <td style="text-align:left;">Customers</td>
                        <td>KYC COMPLETED</td>
                        <td>MANDATE SEND</td>
                        <td>CLEARED</td>
                        <td>DISAPPROVED</td>
                      </tr>
                      <tr id="calenderdate">
                        <td>01</td>
                        <td style="text-align:left;">Ellen <span>De generes</span></td>
                        <td><input type="text" is-datepicker="1" disabled placeholder="01/02/2016">
                        <img class="checked" src="img/success.png" width="10px" height="10px">
                          </td>
                        <td ><input type="text" is-datepicker="1" disabled placeholder="01/02/2016">
                          <img class="checked" src="img/success.png" width="10px" height="10px">
                          </td>
                        <td class="tick2"><input type="text" id = "datepicker" disabled placeholder="01/02/2016"></td>
                        <td class="wrong"><input type="text" id = "datepicker" disabled placeholder="01/02/2016"></td>
                      </tr>
                      <tr id="calenderdate">
                        <td>02</td>
                        <td style="text-align:left;">De generes</td>
                        <td><input type="text" is-datepicker="1" disabled placeholder="01/02/2016">
                          <img class="checked" src="img/success.png" width="10px" height="10px">
                          </td>
                        <td><input type="text" is-datepicker="1" placeholder="01/02/2016">
                          <img class="checked" src="img/gear.png" width="10px" height="10px">
                          </td>
                        <td class="tick3"><input type = "text" id = "datepicker" disabled placeholder="dd mm yy"></td>
                        <td class="wrong3"><input type = "text" id = "datepicker" disabled placeholder="dd mm yy"></td>
                      </tr>
                  </table>
                </div>
            </div>
        </section>
        <script>
         $( function() {
    $( "#datepicker" ).datepicker();
  } );
        </script>
    </body>
</html>

Answer 1

<input type="text" is-datepicker="1" />
<input type="text" is-datepicker="1" />
<input type="text" is-datepicker="1" />
<input type="text" is-datepicker="1" />

$(function() { 
  $("[is-datepicker=1]").each(function() {
    $(this).datepicker({
      showOn:"button",
      buttonImage: "img/calendar.png", 
      buttonImageOnly: true 
    }); 
  });
});

在这里，我们为输入is-datepicker提供了一个属性，并告诉JS代码将datepicker函数应用于每个字段。

Answer 2

使用不同的id，如datepicker1，datepicker2用于多个日期

var text = "<!-- Name:Peter Smith --><!-- Age:23 --><!-- Key with  space  : yes -->";

var data = ExtractData(text);
console.log(data);
console.log("Extracted name: (" + data["Name"] + "), age: (" + data["Age"] + ")");

function ExtractData(data) {
  var matches = data.match(/([A-Za-z\s]+:[^\-\-\>]+)/g);
  var data = {};

  if (Array.isArray(matches)) {
    matches.forEach(function(match) {
      var pair = match.split(":");
      if (pair.length === 2) {
        data[pair[0].trim()] = pair[1].trim();
      }
    });
  }

  return data;
}

或按Roc Khalil

的建议使用foreach

创建一个动态Datepicker Jquery

2 个答案: