CODEWITHSUNDEEP
javascriptjquerydatepickerbootstrap-datepicker
Caverman
Caverman

Reputation: 3759

Bootstrap-Datepicker not selecting date when using "setDate"

I'm trying to get Bootstarp-Datepicker to work and I've got it pretty close. However, now that I've found how to set the startDate and have been able to get "autoclose" to work I can't get it to select the date that is set in the "setDate"

If I bring up the calendar and then manual select another date that will show as selected but the setDate value doesn't show that date as selected. I've done a lot of searching but can't seem to find the right combination to work.

BTW: looking in the F12 tools I do have an error but it says "failed to load resource: the server responded with a 404 (not found)" and the source points to the "/fonts/glyphicons-halflings-regular" file. I don't think that has anything to do with it but I'm going to post a separate question for that.

Here is my HTML

<div class="col-md-2 text-left">
    <div id="StartDate" class="input-group date">
        <input class="datepicker form-control" type="text" />
        <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
    </div>
</div>
<div class="col-md-2">
    <div id="EndDate" class="input-group date">
        <input type="text" class="form-control">
        <div class="input-group-addon">
            <span class="glyphicon glyphicon-th"></span>
        </div>
    </div>
</div>

Here is my JS. This JS will set the date and make autoclose work but it doesn't select the date set with the setDate method.

<script type="text/javascript">
    $(function () {
        var startDate = new Date();
        startDate.setDate(startDate.getDate() - 7);
        var endDate = new Date();

        $("#StartDate").datepicker({
            autoclose: true
        }).datepicker("update", startDate);

        $("#EndDate").datepicker({
            autoclose: true
        }).datepicker("update", endDate);
    });
</script>

If I switch to this JS code I can get the setDate to work as well as get the date that was set to be selected. However, this causes the autoclose to not work. 

<script type="text/javascript">
    $(function () {
        var startDate = new Date();
        startDate.setDate(startDate.getDate() - 7);
        var endDate = new Date();

        $("#StartDate").datepicker("setDate", startDate);
        $("#StartDate").datepicker("autoclose", true);
        $("#StartDate").datepicker("update");
    });
</script>

Upvotes: 0

Views: 9702

Answers (1)

Shady Alset
Shady Alset

Reputation: 5714

When AutoClose not working, you can force it by using this function:

$('#StartDate').datepicker().on('changeDate', function(ev){
    $('#StartDate').datepicker('hide');
});


$(function () {
        var startDate = new Date();
        startDate.setDate(startDate.getDate() - 7);
        var endDate = new Date();

        $("#StartDate").datepicker("setDate", startDate);
        
        $("#StartDate").datepicker("update");
        
        $('#StartDate').datepicker().on('changeDate', function(ev){  
            $('#StartDate').datepicker('hide');
        });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css">

<div class="col-md-2 text-left">
    <div id="StartDate" class="input-group date">
        <input class="datepicker form-control" type="text" />
        <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
    </div>
</div>

Upvotes: 2

Related Questions