完全重新设计 Jquery Datepicker答案

【问题标题】：Completly re-style Jquery Datepicker完全重新设计 Jquery Datepicker
【发布时间】：2017-09-08 08:02:26
【问题描述】：

事情是这样的：我正在开发一个网站，人们可以在其中选择预约时间。问题是他们应该选择一个小时，但datepicker 设计得很糟糕，我不能做我想做的事。

这是我只用 html-css 和一点点 js 设计的： link to the img

编辑：我可以参加 datepicker 课程并将它们应用于我的设计吗？

EDIT#2：我试图克隆 datepicker 包装器，但只有 jquery 生成的包装器在工作（class="date"）。

代码如下：

$('.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>&nbsp;<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">&nbsp;</td>
            <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
            <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
            <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
            <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
            <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</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">&nbsp;</td>
            <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
            <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
            <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
            <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</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>

【问题讨论】：

是的。使用类覆盖样式；在您的 HTML 文档中的日期选择器 CSS 下方引用您的 CSS 表。
我正在努力，我会及时通知您
根本不工作
define "根本不工作"
刚刚编辑了我的帖子，还有更多规范

标签： jquery css datepicker

【解决方案1】：

最后，我改变了技术。我将使用 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>

【讨论】：