jQuery/Bootstrap Datepicker issue

I made a fiddle showing an issue I've been having. When a modal is shown, I am populating a field with a value. On shown, I'm actually querying mysql database and populating fields. The fiddle just shows it being populated with a sample date to show my issue.

After the modal is shown, when the user clicks on the date field, the filled date doesn't show up in the calendar by default and it will disappear if clicking away from the calendar. It will reappear by clicking on the input again.

I just want the datepicker to show the selected date of whatever date is filled in the field on modal shown.

https://jsfiddle.net/michels287/tt9yt8j0/

To pre-select the date on the calendar, use setDate and the date value instead of using Val().

Sample Logic.

JavaScript Code:

$('#date-field').datepicker('setDate', '02/12/2016');

Thanks for helping me.

The modal form will be filled dynamically. So, how do I set the date if there's a date in the input, otherwise don't set the date and just use datepicker normally?

I have many datepickers on the form. I am using classes of '.datepicker' for each input.

I just recognized an issue here:

JavaScript Code:

autoClose: true,

should be:

JavaScript Code:

autoclose: true,

Note: small c does make a difference

Good catch KGcomputers. small c :) , it worked

:afrog: