Date range not selected in calendar after value changed programmatically

Question

I am using BootStrap Datepicker daterange feature. When I set the dates programmatically, the calendars don't display correctly the selection.
My codes:

<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>

Expected behaviour

Actual behaviour

Other than the calendar display, there are 2 more problems:

Start date calendar doesn't auto close after selected
Start date doesn't use the format (yyyy-mm-dd). After selected it become mm/dd/yyyy

Version used

datepicker : v1.9.0
bootstrap: v3.4.1
jquery: v3.4.1

Update on 22-Jun:
I changed my code to:

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

Now it is better:

Nevertheless, this is not what I expected. I don't mind 29th is not highlighted with darker grey in start date calendar. The real problem is 19th is not highlighted/ selected at all in end date calendar.

Jason R · Accepted Answer · 2020-06-22 04:42:44Z

1

Code/Demo:

<!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>

Explanation:

I changed this from:

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

to:

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

I also had to change:

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

to:

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

Additionally, from your code by default it seemed to keep the right format that you wanted and the startdate datepicker closed for me upon clicking or entering a new date as you can see in the snippet above. Let me know if you have any questions.

edited Jun 22, 2020 at 4:42

answered Jun 21, 2020 at 21:05

Jason R

4627 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

len Over a year ago

Thank you. Please see my latest update above. Your code snippet also produce the same result/ problem

Jason R Over a year ago

Updated code snippet and explanation, that should do it for you.....and highlights 19th and 29th like you wanted :) @len

len Over a year ago

Yes, use slashes fixed the problem. I think this is the bug of datepicker because I defined the format as yyyy-mm-dd, not yyyy/mm/dd. Am i right?

Jason R Over a year ago

Glad the problem was solved for you. No, it's not a bug with the library. I just hadnt noticed at first since I don't use bootstrap datepicker alot..... that all of their documentation references dates no matter the format with slashes and not dashes. Easy thing to not pay attention to... that we saw drastically threw off the result lol. Here is a link to an example in their docs where you can see the slashes and not the dashes: bootstrap-datepicker.readthedocs.io/en/latest/…

Collectives™ on Stack Overflow

Date range not selected in calendar after value changed programmatically

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related