Develop Reference

How to set default date in Bootstrap 3 Date/Time Picker based on current input value so it appears on first use

I am trying to integrate the Bootstrap 3 Date/Time Picker v4.17.42 into a webpage. I have a text field that is pre-populated with a date prior to calling the datepicker.
The field is as follows;
<input value="19/02/1986" class="form-control datepicker" type="text" name="patient[date_of_birth]" id="patient_date_of_birth">
and I call the datepicker like so;
$('.datepicker').datetimepicker({
format: 'DD/MM/YYYY',
useCurrent: false,
maxDate: new Date(),
minDate: now.setFullYear(now.getFullYear() - 110)
});
When I click in the text field the datepicker appears, but it shows the current month rather than February 1986. If I click out of the field and then back in, the datepicker disappears then reappears set correctly to February 1986.
What do I have to do to so the correct month appears the first time the datepicker is opened?

You can force a refresh programatically after the initialize:
$('.datepicker').datetimepicker('setDate', new Date(1986, 02, 19));
$('.datepicker').datetimepicker('update');
You can also add a property to the object when initalizing:
setDate: new Date(1986, 02, 19)

To use default data just try this
$("#datepicker").datepicker("setDate", new Date());
In this script new Date() returns the current value that will be assigned to setDate attribute.

Like you said, this is a bug in the latest versions, tracked here: github.com/Eonasdan/bootstrap-datetimepicker/issues/1831
However, I found a work around that might be helpful in the meantime (if you don't want to use version 4.17.37):
var selectedDate = moment($('#patient_date_of_birth').val(), 'DD/MM/YYYY');
$('#patient_date_of_birth').data('DateTimePicker').viewDate(selectedDate);
Do this after your datepicker initialization.
This is the syntax needed hard refresh the view for this particular datepicker. You access the picker via data('DateTimePicker'), and the viewDate() method updates the date displayed by the picker.

Bootstrap datepicker, disable dates - view only mode possible?

I'm loading a selection of dates into bootstrap datepicker for the user to view. Currently they can click on a highlighted date but it clears all the dates that are preloaded.
I don't want them to be able to click on any dates, just view the different month pages of dates. How can I do this?
this is how I setup datepicker and load the dates;
$('.datepickera').datepicker({
format: 'yyyy/mm/dd',
multidate: false
});
$.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});
$(".datepickera").data("datepicker").setDates($('#mydates').data('dates'));

If I understand you correctly you can make the datepicker unselectable by using the daysOfWeekDisable property like this:
$('.datepicker').datepicker({
daysOfWeekDisabled: [0,1,2,3,4,5,6]
});
0 is Sunday and 6 is Saturday. This way a user cannot select any day but can view the entire calendar. You can read more about it here. Hope that helps.

set today date with respective format that initialized earlier on jquery datepicker

I have already initialized my jquery datepicker with the format dd-M-yyyy. On some particular event I want to set that datepicket with today's date with the respective date format(dd-M-yyyy) that already I have set. I tried these codes but none of them are working, help me..
html
<input id="SD_WO_DATE" readonly="readonly" type="text">
js
$("#SD_WO_DATE").datepicker().datepicker( "option", "defaultDate", new Date() );
and
$("#SD_WO_DATE").datepicker().datepicker("setDate", new Date());
These are setting date with mm-dd-yyyy which I don't want.

Demo
Use setDate property of datepicker with today as the value,
$('#SD_WO_DATE').datepicker({ dateFormat: 'dd-M-yy' });
$('button').click(function(){
$('#SD_WO_DATE').datepicker('setDate', 'today');
});

How do I programmatically change the selected month in JQuery datepicker

I have a jQuery datepicker and I cannot figure out how to programmatically change the month back to the current month. After making a POST request to save the user's dates I need to return the calendar back to the current month. The calendar may be on a different month from the user playing around with different dates. I have tried setting the mindate again but that did not work.
This is not a popup calendar.

Setting the datepicker back to today
$('#myDatePicker').datepicker('setDate', new Date());
setting just the month back
var date = $('#myDatePicker').datepicker('getDate');
date.setMonth( (new Date()).getMonth() );
$('#myDatePicker').datepicker('setDate', date);
FIDDLE

You can also use .val() to set the date
$("#datepicker").val(date);

How to display hours in JQuery datapicker

I want to use simple JQuery datapicker but not only to select the date. I want to add hours to the date format but I also want to preserver the classic vie of the calendar. I just want to add hours as extra functionality to define precisely the time. Is this possible?
<script type="text/javascript">
//For calendar
$(".datepicker").datepicker({
inline: true,
showWeek: true,
firstDay: 1,
dateFormat: 'yyyy-mm-dd HH:MM:ss',
});
</script>

http://trentrichardson.com/examples/timepicker/
you can try the above plugin with the combination of datepicker
you can even use the default $('.datepicker').datetimepicker();

jQuery UI's datepicker picks dates, not times. You can add a distinct field for the hours, e.g. a select field.