Question

我一直在寻找一种简单的方法来为我正在制作的ASP.NET核心应用程序制作月/年选择器。我在jsfiddle上发现了这个fantastic。它使用以下资源：

以下是代码：

＆＃13;

var startDate = new Date();
var fechaFin = new Date();
var FromEndDate = new Date();
var ToEndDate = new Date();

$('.from').datepicker({
  autoclose: true,
  minViewMode: 1,
  format: 'mm/yyyy'
}).on('changeDate', function(selected) {
  startDate = new Date(selected.date.valueOf());
  startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
  $('.to').datepicker('setStartDate', startDate);
});

$('.to').datepicker({
  autoclose: true,
  minViewMode: 1,
  format: 'mm/yyyy'
}).on('changeDate', function(selected) {
  FromEndDate = new Date(selected.date.valueOf());
  FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf())));
  $('.from').datepicker('setEndDate', FromEndDate);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>

<div class="form-group">
  <label>First check in:</label>
  <input type="text" class="form-control form-control-1 input-sm from" placeholder="CheckIn">
</div>

<div class="form-group">
  <label>First check out:</label>
  <input type="text" class="form-control form-control-2 input-sm to" placeholder="CheckOut">
</div>

<br/>

<div class="form-group">
  <label>Second check in:</label>
  <input type="text" class="form-control form-control-1 input-sm from" placeholder="CheckIn">
</div>

<div class="form-group">
  <label>Second check out:</label>
  <input type="text" class="form-control form-control-2 input-sm to" placeholder="CheckOut">
</div>

＆＃13;

我已经在Visual Studio中的项目中完成了这项工作，然而，它似乎无法找到类＆＃34; form-control-1＆＃34; （和2）和＆＃34;来自＆＃34;所以它给了我一条小曲线表示如此。

我开始浏览所有包含的css文件，但我找不到任何文件中对这些类的引用。如果我删除它们，月选择器不起作用。有人可以帮我理解功能的来源吗？有谁知道这些类的定义在哪里？

Answer 1

from和to未用于样式，它们正在您发布的代码中使用。 $('.from').datepicker() $('.to').datepicker()。

您可以安全地删除form-control-1和form-control-2类。

Answer 2

这些类可以是功能类，不附加到任何样式，但用于选择或操作元素。

这可能就是你找不到任何东西的原因。搜索js文件，你会发现一些东西。

Answer 3

由于删除类会破坏功能，因此可能会从JS中引用它。可能是JS正在计算类的名称，例如"form-control " + i。

最好看看定义的位置是使用浏览器检查器。例如，在Chrome中，右键单击页面并选择“检查”以获取此UI，该UI显示每个css类以及它们在css层次结构中声明或重新声明的位置。

Answer 4

使用Javascript时，使用未附加到任何样式的CSS类非常有用，而是用作后来使用的jQuery选择器的语义引用。

当尝试将多个语义含义附加到元素时，这非常有用。您可以让一个元素具有许多语义标记。我在复杂的组件中使用它，以便能够动态标记我以后可以操作或检查类名的元素。 如果您从服务器端语言生成元素并尝试在语义上对它们进行标记，以便以后可以从Javascript / jQuery中对它们进行操作，这将非常有用。它认为添加动态更容易服务器端的类字符串比放入数据属性。

我使用的一个示例是将验证信息附加到元素。我在服务器端类中生成元素（包括它应该具有哪种类型的验证），它输出一个CSS类字符串，然后当我在Javascript中提交表单时，我获得具有特定类名的所有元素并检查它们的内容是否与验证类型。

您发布的代码示例执行类似的操作，它希望在具有特定类的所有元素上使用jQuery插件。它使用它们作为语义标记，而不是直接样式，这些元素应该以某种方式转换为datepickers（这里记录了https://jqueryui.com/datepicker/）。 jQueryUI的代码使用了很多东西来简化应该使用哪些元素 - 并且添加新的元素是datepickers可以更容易，因为你只需要添加一个类到新的元素而不必添加新的jQuery引用它（特别是当您编写Javscipt代码时，您不确切知道页面中将有多少它们。）

如果你曾经在类似的实例中寻找一种不同的方式来存储元素而不会产生无意的影响，而且它是纯粹的Javascript而没有服务器端渲染，HTML5中的data- *属性是一种方法（和可以开发简单的库以将它们添加到服务器端语言的元素中。只需使用jQuery("[data-mytagname=someValue]")的jQuery选择器进行选择。

提醒如果你使用这样的类作为语义标签，我会小心避免使用常用的类名，因为你可能会在一个同事时无意中获得额外的样式（或者你自己）决定在一个元素中使用它。 ;）

使用CSS类，但无法找到它的定义位置

4 个答案: