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.

How to set date for an inline Datepicker in jquery UI?

How to set date for an inline Datepicker in jqueryUI?

When initializing a datepicker, you'd use the defaultDate option:
$("#date").datepicker({
defaultDate: '01/26/2014'
});
FIDDLE
when changing the date later, you'd use setDate method:
$("#date").datepicker();
// more code
$("#date").datepicker('setDate', '01/26/2014');
FIDDLE

You can set multiple dates as well by using this:
allBookings = []
_.each(Session.get('thisGuide').bookings,function(e){
allBookings.push(moment(e).format('MM/DD/YYYY'))
})
$('#datepicker').datepicker('setDates',allBookings)

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.

jQuery datepicker without input

I've got a fairly complex web app that I'd like to add some date-picking UI to.
The problem I'm running into is that I haven't been able to figure out from the docs how to really take control of how and when the datepicker appears. There are no form elements involved (and no, I'm not going to add a secret form field), so the dead-simple out-of-the-box approach simply won't work.
I'm hoping someone can provide a little guidance on a pattern that allows me to invoke the datepicker programmatically. I believe I know how I'd use the datepicker's custom events to initalize and position it, and to recover the chosen value when the user dismisses it. I'm just having a hard time instantiating a datepicker, since I'm not pairing it to an element.
Here's what isn't working:
function doThing(sCurrent, event) { // sCurrent is the current value; event is an event I'm using for positioning information only
var bIsDate = !isNaN( (new Date(sCurrent)).getTime() );
jQuery.datepicker('dialog',
(bIsDate ? new Date(sOriginal) : new Date()), // date
function() { console.log('user picked a date'); }, // onSelect
null, // settings (i haz none)
event // position
);
}
The reason is that "jQuery.datepicker" isn't a function. (I'm Doing It Wrong.)
I'm not married to the 'dialog' approach -- it was just my best guess at invoking one without reference to a form element.
I'm using jQuery 1.4.3 and jQueryUI 1.8.6

From the plugin page: http://jqueryui.com/demos/datepicker/#inline
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="demo">
Date: <div id="datepicker"></div>
</div><!-- End demo -->
Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.

I read through the datepicker code, and it appears that, as written, the datepicker must be attached to an input, div, or span tag.
So, if your only objection is to using a form element, then attaching to a div or span is probably your best bet, and there's an example of how to do that here: https://stackoverflow.com/a/1112135
If you're looking for some other way to control the datepicker, then you may have to extend datepicker code to do what you want it to do, and if you go that route, then I recommend starting by taking a look at the _inlineDatepicker private method in the datepicker code, which is the method that attaches the datepicker to a div or span tag.

You have to define Input field dynamically then attach the datepicker you your newly created class Without field I Don't think so It will work.
<input type="hidden" id="yourField" />
and use
$("#yourField").datepicker({
buttonImage: '../yourImage.png',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
showOn: 'both',
});

Setting default date format for datepicker?

I have a page where I keep track of various dates. So I end up using datepicker through jquery anywhere from 10-200 times. I want to set the default for all cases of datepicker to the 'yy-mm-dd' - but I can't seem to figure out how to set that?

I end up using datepicker through jquery anywhere from 10-200 times.
I'm assuming you're calling datepicker() separately for each input, probably by id. There's no need for that.
Use a class as a hook on your input:
<input class="my-datepicker">
Then call datepicker on elements with that class with your default configuration:
$('.my-datepicker').datepicker({
dateFormat: 'yy-mm-dd'
});
When you need a different configuration, use/assign a different class name.
You can also use setDefaults (probably what you're looking for):
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd'
});

Go to the file jquery.ui.datepicker.js.
function Datepicker()
{
dateFormat: 'mm/dd/yy'
}
Change it to the format you prefer. It will change the format for your whole website.