Question

    <input type="text" class="form-control" name="daterange" value="01/01/2018 - 01/15/2018" style="width:100%;text-align:center;"/>
    <script>
    $(function() {
      $('input[name="daterange"]').daterangepicker({
        opens: 'center'
      }, function(start, end, label) {
        console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
      });
    });
    </script>

我在选择两个日期的值时遇到问题。

Answer 1

由于您没有提到遇到的错误，因此我建议您确保从引导日期选择器库中导入了必要的脚本。另外，如果脚本和CSS链接的顺序不正确，则可能会出错。

希望这会有所帮助。

Answer 2

您的示例非常适合我。请确保已导入所有必需的库。参见此处的工作示例。

必需的库。

jquery.min.js
moment.js
daterangepicker.js
daterangepicker.css

我认为您可能错过了moment js库。

$(function() {
  $('input[name="daterange"]').daterangepicker(
    {
      opens: "center",
    },
    function(start, end, label) {
      console.log(
        "A new date selection was made: " + start.format("YYYY-MM-DD") + " to " + end.format("YYYY-MM-DD"),
      );
      $("#selected-date").text("A new date selection was made: " + start.format("YYYY-MM-DD") + " to " + end.format("YYYY-MM-DD"))
    },
  );
});

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<input
      type="text"
      class="form-control"
      name="daterange"
      value="01/01/2018 - 01/15/2018"
      style="width:100%;text-align:center;"
    />
 Selected Date <p id="selected-date"></p>

如何获取两个选定日期的值

2 个答案: