日期范围选择器两个日期相同答案

【问题标题】：daterange picker both date same日期范围选择器两个日期相同
【发布时间】：2018-12-27 17:55:15
【问题描述】：

自动应用为 false 的日期范围选择器

$(function() {
    $('input[name="daterange"]').daterangepicker({
    "autoApply": false,
    "showCustomRangeLabel": false,
    "minDate": "01/04/2017",
    "maxDate": "04/10/2017",
    "dateLimit" : {
    "days" : 60
    }

}, function(start, end, label) {
  console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
});

    $(window).scroll(function() {
        if ($('input[name="daterange"]').length) {
            $('input[name="daterange"]').daterangepicker("close");
      }
    });
});

下面fiddle参考

当我选择结束日期时，开始日期和结束日期文本框都具有相同的值，

我该如何解决这个问题，我google了很多，尝试了一些rnd但没有成功

【问题讨论】：

在您的 jsfiddle 中似乎无法重现
您选择开始日期和结束日期，您会发现开始日期和结束日期文本框的值相同
看来你用的是旧版本
我在你的 jsfiddle 中没有发现错误。左边的日期不代表开始日期，只是当你选择的时候，第一个是开始日期，你选择的第二个是结束日期。所以当你第三次选择的时候也是开始日期，即使选择了正确的日期；总之，奇数选择开始时间，偶数选择结束时间；
选择左日期和右日期后你能看到文本框的值吗，两个文本框的日期相同

标签： javascript jquery daterangepicker

【解决方案1】：

您使用的是旧版本的 daterangepicker，因此请更新您的 daterangepicker js 和 css 以解决您的问题。

$(function() {
  $('input[name="daterange"]').daterangepicker({
    "autoApply": false,
    "showCustomRangeLabel": false,
    "minDate": "01/04/2017",
    "maxDate": "04/10/2017",
    "dateLimit": {
      "days": 60
    }

  }, function(start, end, label) {
    console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
  });

  $(window).scroll(function() {
    if ($('input[name="daterange"]').length) {
      $('input[name="daterange"]').daterangepicker("close");
    }
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.3/daterangepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.3/daterangepicker.min.js"></script>

<br><br>
<p style="margin-left:10px;"><input type="text" name="daterange" value="" /></p>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br> force some scrolling

【讨论】：

【解决方案2】：

您需要更新"autoApply": true，这将有助于在关闭弹出框模式框时选择更新日期

使用此链接更新的工作示例：http://jsfiddle.net/498ogq1h/1/

【讨论】：

我必须把“autoApply”设置为假，我提到过这个问题
@Md.ParvezAlam 有两种方法首先您需要应用 autoApply:true 或者您需要单击应用按钮以关闭弹出窗口并将所选值更新到示例中的文本框小屏幕尺寸应用按钮未显示..但在大屏幕上显示..
我知道，但在申请之前我需要两个文本框分别代表选定的日期