如何从这个 html date-ranger 中获取价值？

Question

所以我必须从这个日期管理员获取日期值，但我不确定它是如何工作的。通常我见过人们使用 jquery 日期选择器来获取日期值，但我正在使用的代码使用它，它看起来是纯粹的 html。我对 html 没有什么经验，所以我有点困惑。

这是行

<div class="daterange daterange-inline pull-right" data-format="YYYY-MM-DD" 
     data-start-date="2014-12-23" data-end-date="2014-12-30" data-min-date=""
     data-max-date="" style="font-size: 12px; margin-top: 2px;"> 
 <i class="entypo-calendar"></i> 
 <span>2014-12-23 - 2014-12-30</span> 
</div>

它看起来完全由 html 和 css 制作而成，我很困惑我应该如何从中获取值。

任何人都可以阐明这一点吗？还是我应该建议将其更改为 jquery 日期选择器之类的东西？

谢谢！

Answer 1

您可以使用 javascript 中的 getAttribute 或 jQuery 中的 .attr('data-start-date') 作为数据属性访问 html 中的日期。

javascript:

alert(document.getElementsByClassName('daterange')[0].getAttribute('data-start-date'));
alert(document.getElementsByClassName('daterange')[0].getAttribute('data-end-date'));

jQuery:

alert($('.daterange').attr('data-start-date'))

Answer 2

您可以使用.attr

var dataDate = $(".daterange").attr("data-start-date");

alert(dataDate)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="daterange daterange-inline pull-right" data-format="YYYY-MM-DD" data-start-date="2014-12-23" data-end-date="2014-12-30" data-min-date="" data-max-date="" style="font-size: 12px; margin-top: 2px;"> <i class="entypo-calendar"></i> <span>2014-12-23 - 2014-12-30</span> </div>

或使用.data

var dataDate = $(".daterange").data("start-date");

alert(dataDate)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="daterange daterange-inline pull-right" data-format="YYYY-MM-DD" data-start-date="2014-12-23" data-end-date="2014-12-30" data-min-date="" data-max-date="" style="font-size: 12px; margin-top: 2px;"> <i class="entypo-calendar"></i> <span>2014-12-23 - 2014-12-30</span> </div>

Answer 3

这里没有输入，所以用户不能提供任何日期。我的猜测是某些外部 javascript（如 jQuery 的日期选择器）应该对此进行转换。因此，您需要弄清楚应该在该站点上加载哪些脚本。

Answer 4

正如@Alex 所说，这只是 HTML，您将无法修改日期，如果需要，您可以检索范围，但我认为这不是很有用，我建议您使用 HTML5 日期输入：

<input type="date" >

看这个例子：jsfiddle

它使用 js 库，因此您可以跨浏览器使用它，因为它仅在 Chrome、Safari 和 Opera 上受支持。如果您想了解更多有关 "standard" 的信息，请在此处了解：W3C

如何从这个 html date-ranger 中获取价值？

how to get value from this html date-ranger?

jquery

html

css

datepicker