以下是此项交易：我正在开发一个网站，供人们选择预约时间表。问题是他们应该选择一个小时，但datepicker的设计非常糟糕，我不能做我想做的事。
这里是我设计的只有html-css和一点点的js： link to the img
编辑：我可以使用datepicker类并将它们应用到我的设计中吗？
编辑＃2：我试图克隆datepicker包装器，但只有jquery生成的包装器正在工作（class =＆＃34; date＆＃34;）。以下是代码：
$('.date').datepicker();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- HERE I JUST COPIED THE CODE GENERATED BY JQUERY UI -->
<div class="date hasDatepicker" id="dp1504861075598">
<div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="display: block;">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"><a class="ui-datepicker-prev ui-corner-all" data-handler="prev" data-event="click" title="Précédent"><span class="ui-icon ui-icon-circle-triangle-w">Précédent</span></a><a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click"
title="Suivant"><span class="ui-icon ui-icon-circle-triangle-e">Suivant</span></a>
<div class="ui-datepicker-title"><span class="ui-datepicker-month">octobre</span> <span class="ui-datepicker-year">2017</span></div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th scope="col"><span title="lundi">L</span></th>
<th scope="col"><span title="mardi">M</span></th>
<th scope="col"><span title="mercredi">M</span></th>
<th scope="col"><span title="jeudi">J</span></th>
<th scope="col"><span title="vendredi">V</span></th>
<th scope="col" class="ui-datepicker-week-end"><span title="samedi">S</span></th>
<th scope="col" class="ui-datepicker-week-end"><span title="dimanche">D</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">1</a></td>
</tr>
<tr>
<td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">2</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">3</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">4</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">5</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">6</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">7</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">8</a></td>
</tr>
<tr>
<td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">9</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">10</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">11</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">12</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">13</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">14</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">15</a></td>
</tr>
<tr>
<td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">16</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">17</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">18</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">19</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">20</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">21</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">22</a></td>
</tr>
<tr>
<td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">23</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">24</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">25</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">26</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">27</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">28</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">29</a></td>
</tr>
<tr>
<td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">30</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">31</a></td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- HERE IS MY DATEPICKER WRAPPER THAT DECLARED IN MY JAVASCRIPT -->
<div class="date"></div>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
答案 0 :(得分：0)
最后，我改变了技术。我只是使用date.js
从头开始编码日期仅仅为了测试我今天登出的日期，并根据我的日期添加1天，就像我获得第二天的日期一样。我在点击时做同样的事情，模拟我想要做的事情并且它正在工作。
我希望它不复杂，所以我在这里粘贴代码，这样你就会有更好的表现：
/*global console */
var tdy = (Date.parse("today").toString("MM dd yyyy"));
var monday = Date.parse(tdy.toString("MM dd yyyy")).addDays(1);
var tuesday = Date.parse(monday.toString("MM dd yyyy")).addDays(1);
var wednesday = Date.parse(tuesday.toString("MM dd yyyy")).addDays(1);
var thursday = Date.parse(wednesday.toString("MM dd yyyy")).addDays(1);
var friday = Date.parse(thursday.toString("MM dd yyyy")).addDays(1);
var saturday = Date.parse(friday.toString("MM dd yyyy")).addDays(1);
var sunday = Date.parse(saturday.toString("MM dd yyyy")).addDays(1);
console.log("Today : "+tdy.toString("dd MMMM yyyy"));
console.log("Monday : "+monday.toString("dd MMMM yyyy"));
console.log("Tuesday : "+tuesday.toString("dd MMMM yyyy"));
console.log("Wednesday : "+wednesday.toString("dd MMMM yyyy"));
console.log("Thursday : "+thursday.toString("dd MMMM yyyy"));
console.log("Friday : "+friday.toString("dd MMMM yyyy"));
console.log("Saturday : "+saturday.toString("dd MMMM yyyy"));
console.log("Sunday : "+sunday.toString("dd MMMM yyyy"));
console.log("===================================");
$(".btn-test").click(function() {
monday = Date.parse(sunday.toString("MM dd yyyy")).addDays(1);
tuesday = Date.parse(monday.toString("MM dd yyyy")).addDays(1);
wednesday = Date.parse(tuesday.toString("MM dd yyyy")).addDays(1);
thursday = Date.parse(wednesday.toString("MM dd yyyy")).addDays(1);
friday = Date.parse(thursday.toString("MM dd yyyy")).addDays(1);
saturday = Date.parse(friday.toString("MM dd yyyy")).addDays(1);
sunday = Date.parse(saturday.toString("MM dd yyyy")).addDays(1);
console.log("Monday : "+monday.toString("dd MMMM yyyy"));
console.log("Tuesday : "+tuesday.toString("dd MMMM yyyy"));
console.log("Wednesday : "+wednesday.toString("dd MMMM yyyy"));
console.log("Thursday : "+thursday.toString("dd MMMM yyyy"));
console.log("Friday : "+friday.toString("dd MMMM yyyy"));
console.log("Saturday : "+saturday.toString("dd MMMM yyyy"));
console.log("Sunday : "+sunday.toString("dd MMMM yyyy"));
console.log("===================================");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>
<button class="btn-test">Testing</button>