jquery日期选择器看起来很奇怪答案

【问题标题】：jquery date picker looking strangejquery日期选择器看起来很奇怪
【发布时间】：2018-08-29 02:22:14
【问题描述】：

我的 jquery datepicker 看起来很奇怪：

这是我的依赖加载：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  
  <link rel="stylesheet" type="text/css" href={% static "getdata/css/custom.css" %} media="all">
  <link rel="stylesheet" type="text/css" href={% static "getdata/css/custom2.css" %} media="all">
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>

这是我的 HTML：

<td><input class="datepicker" id="endDate1" type="text"/></td>

这是我的 js：

$( ".datepicker" ).datepicker();

任何帮助将不胜感激。

谢谢

【问题讨论】：

你的自定义 CSS 里面有什么？你能提供一个最小的工作示例吗？
会不会是输入框在表格里面？
不，不是这样。把它从桌子上拿出来......同样的交易

标签： jquery css user-interface datepicker

【解决方案1】：

可以看到它完美地工作，所以你的 css 对td>input 有影响，因为你可以看到样式与我的不同。我建议您检查输入以及 div = #ui-datepicker-div，其中包含从 jQuery 中提取的 table，因为您在某处覆盖了某些样式。

$( ".datepicker" ).datepicker();

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  
  <link rel="stylesheet" type="text/css" href={% static "getdata/css/custom.css" %} media="all">
  <link rel="stylesheet" type="text/css" href={% static "getdata/css/custom2.css" %} media="all">
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
  
  
  <table class="col-md-12 table-bordered table-striped table-condensed cf">
          <thead class="cf">
            <tr>
                <th>copy</th>
                <th>copy</th>
                <th>copy</th>
                <th>copy</th>
            </tr>
        </thead>
        <tbody>
  <tr>
  <td>data</td>
  <td><input class="datepicker" id="endDate1" type="text"/></td>
  <td>data</td>
  <td>data</td>
  </tr>
          </tbody>
  </table>

【讨论】：

【解决方案2】：

我解决了这个问题。我有一些 CSS 样式，用于为单元格的第 n 个子元素设置样式。 Jquery 代码必须在单元格内创建一些新元素，因此它们继承样式作为第 n 个元素。

底线，不能在 jquery 将要添加自己的元素的块中使用第 n 个元素样式。

【讨论】：

很高兴你解决了它，我确信你可以在 jquery 将添加自己的元素的块中使用第 n 个元素样式，你只需要更具体地使用你的样式标签，例如。 table.mytable tr.tablerow td:nth-child(2) { ... } 这将只针对具有类 mytable 的表，而不是 jQuery（datepicker）表单元格，希望它有意义。