以编程方式更改值后未在日历中选择日期范围答案

【问题标题】：Date range not selected in calendar after value changed programmatically以编程方式更改值后未在日历中选择日期范围
【发布时间】：2020-10-11 01:51:35
【问题描述】：

我正在使用BootStrap Datepicker 日期范围功能。当我以编程方式设置日期时，日历无法正确显示所选内容。
我的代码：

<div class="input-group input-daterange">
    <input type="text" id="startDate"
        class="form-control" name="startDate" value="2020-08-01"> 
    <span class="input-group-addon">to</span> 
    <input type="text" id="endDate" 
        class="form-control" name="endDate" value="2020-08-08">
</div> 

<script>
$(document).ready(function() {
    $('.input-daterange').datepicker( { 
        format: 'yyyy-mm-dd',
        autoclose: true
    });         
       
    //change date
    $('#startDate').val('2022-01-19');  
    $('#endDate').val('2022-01-29');      
    
    var startDate = new Date($('#startDate').val());
    var endDate = new Date($('#endDate').val());

    var $start = $(".input-daterange").find('#startDate');
    var $end = $(".input-daterange").find('#endDate')   
    $start.datepicker('setStartDate', startDate);
    $end.datepicker('setEndDate', endDate);
});     
</script>

预期行为

实际行为

除了日历显示，还有2个问题：

选择后开始日期日历不会自动关闭
开始日期不使用格式 (yyyy-mm-dd)。选中后变成mm/dd/yyyy

使用的版本

日期选择器：v1.9.0
引导程序：v3.4.1
jQuery：v3.4.1

6 月 22 日更新：
我将代码更改为：

$start.datepicker('setDate', startDate);
$end.datepicker('setDate', endDate);

现在好多了：

然而，这不是我所期望的。我不介意在开始日期日历中没有以深灰色突出显示 29 日。真正的问题是 19th 在结束日期日历中根本没有突出显示/选择。

【问题讨论】：

标签： javascript jquery twitter-bootstrap bootstrap-datepicker

【解决方案1】：

代码/演示：

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
        <div class="input-group input-daterange">
            <input type="text" id="startDate"
                class="form-control" name="startDate" value="2020-08-01"> 
            <span class="input-group-addon">to</span> 
            <input type="text" id="endDate" 
                class="form-control" name="endDate" value="2020-08-08">
        </div> 
    </div>
    <!-- Optional JavaScript -->
    
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function() {
            $('.input-daterange').datepicker( {
                format: 'yyyy-mm-dd',
                autoclose: true,
            });         
               
            //change date
            $('#startDate').val('2022/01/19');  
            $('#endDate').val('2022/01/29');      
            
            var startDate = new Date($('#startDate').val());
            var endDate = new Date($('#endDate').val());
        
            var $start = $(".input-daterange").find('#startDate');
            var $end = $(".input-daterange").find('#endDate')   
            $start.datepicker('setDate', startDate);
            $end.datepicker('setDate', endDate);
        });     
        </script>
    </body>
</html>

说明：

我把这个改成了：

$start.datepicker('setStartDate', startDate);
$end.datepicker('setEndDate', endDate);

到：

$start.datepicker('setDate', startDate);
$end.datepicker('setDate', endDate);

我也不得不改变：

 $('#startDate').val('2022-01-19');  
 $('#endDate').val('2022-01-29');

到：

/*UPDATED from using dashes to slashes*/
 $('#startDate').val('2022/01/19');  
 $('#endDate').val('2022/01/29');

此外，从您的代码默认情况下，它似乎保留了您想要的正确格式，并且 startdate 日期选择器在单击或输入新日期时为我关闭，如您在上面的 sn-p 中看到的那样。如果您有任何问题，请告诉我。

【讨论】：

谢谢。请参阅上面我的最新更新。您的代码 sn-p 也会产生相同的结果/问题
更新了代码 sn-p 和解释，应该为你做......并像你想要的那样突出显示第 19 和第 29 :) @len
是的，使用斜线解决了这个问题。我认为这是 datepicker 的错误，因为我将格式定义为 yyyy-mm-dd，而不是 yyyy/mm/dd。我说的对吗？
很高兴为您解决了问题。不，这不是图书馆的错误。一开始我只是没有注意到，因为我不经常使用引导程序日期选择器.....他们所有的文档都引用了日期，无论格式是斜杠而不是破折号。容易不注意的事情......我们看到的结果大大偏离了哈哈。这是他们文档中一个示例的链接，您可以在其中看到斜杠而不是破折号：bootstrap-datepicker.readthedocs.io/en/latest/…