创建一个动态的 Datepicker Jquery答案

【问题标题】：Create a dynamic Datepicker Jquery创建一个动态的 Datepicker Jquery
【发布时间】：2017-02-26 09:02:41
【问题描述】：

有什么方法可以创建如下图所示的动态数据选择器

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

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>

【问题讨论】：

向我们展示您的尝试？
我从flaticon.com 下载了日历并使用了下面给出的脚本
code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">

标签： javascript jquery html css twitter-bootstrap

【解决方案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 函数应用于每个字段。

【讨论】：

【解决方案2】：

对多个日期使用不同的 id，例如 datepicker1、datepicker2

$( "#datepicker1" ).datepicker({
      showOn: "button",
      buttonImage: "images/calendar.gif",
      buttonImageOnly: true,
    });

$( "#datepicker2" ).datepicker({
      showOn: "button",
      buttonImage: "images/calendar.gif",
      buttonImageOnly: true,
    });

或者按照Roc Khalil的建议使用foreach

【讨论】：