I'm using bootstrap datepicker and I got invalid date issue in a specific case. If I click today date it works fine but when I click the same date again it gives out invalid date issue.

Same is the case for all the dates as I have seen other plugins where I can't find this issue.

html: <input id="dp1" type="text" class="form-control input-sm" placeholder="Data CheckIn">

javascript:

$("#dp1").datepicker({
    format: "mm-dd-yyyy",
    viewMode: 'days',
    todayHighlight: true 
}).on('changeDate', function (ev) {
    var a = $('#dp1').datepicker('getDate');
    $(this).datepicker('hide');
    alert(a);
});

jsfiddle example

I'm using bootstrap datepicker and I got invalid date issue in a specific case. If I click today date it works fine but when I click the same date again it gives out invalid date issue.

Same is the case for all the dates as I have seen other plugins where I can't find this issue.

html: <input id="dp1" type="text" class="form-control input-sm" placeholder="Data CheckIn">

javascript:

$("#dp1").datepicker({
    format: "mm-dd-yyyy",
    viewMode: 'days',
    todayHighlight: true 
}).on('changeDate', function (ev) {
    var a = $('#dp1').datepicker('getDate');
    $(this).datepicker('hide');
    alert(a);
});

jsfiddle example

• javascript
• jquery
• twitter-bootstrap
• date
• datepicker

• jsfiddle/FTpYk/321 – Sherry Commented May 5, 2015 at 5:55
• 1 This is because you are deselecting the selected date. See the icon colors yellow(deselect) and blue(select). When you click on currently selected date it will obviously return invalid as it is getting unselected/toggled. – Shaunak D Commented May 5, 2015 at 6:06
• It does look like a bug in the plugin- like the toggleActive option (which should default to false anyway) is not working. I did try manually setting it and still no change in behaviour – Dave Pile Commented May 5, 2015 at 6:46

4 Answers 4

var currentDate;
$('#dp1').datepicker({
    format: "mm-dd-yyyy",
    viewMode: 'days',
    todayHighlight: true

    // currently picked date
  }).on('show', function() {
    currentDate = $(this).val();
  })
  // if no date picked replace with previous date
  .on('changeDate', function(ev) {


    if ($(this).val() === '' || $(this).val() === null) {
      $(this).val(currentDate).datepicker('update');
    }
    var a = $('#dp1').datepicker('getDate');
    $(this).datepicker('hide');
    alert(a);

  });

After an effort of a day I solved issue by myself by doing a little change in plugin.

In bootstrap-datepicker.js method _toggle_multidate line no 1024 has been mented.

else if (ix !== -1)
{
    //this.dates.remove(ix);
}

and it will work like a charm. I hope this can help.

Please try and do let me know if this case solve your issue Thanks

you can use delegate, it does work fine

$("body").delegate('.date' ,'focusin', function() {
     $(this).datepicker({
         autoclose: true,
         viewMode: 'days',
         todayHighlight: true
     });
});

it is not an issue.When you click first time it will set the selected date on input when you click again on same date again so it will deselect that date.