Develop Reference

Defaultvalue on date select jquery datetimepicker

Using Jquery Timepicker . Is it possible to do so, that when I select a date, then time is automatically set to 23.59, but if I change the time manually then it keeps the time value?
I dont want the datetime showing until i select a date or time. But currently all the solutions that I have found are about setting a default value that you can see when the element is loaded.
<input size="15" class="timePicker" name="name" id="id" style="width: 100%" />
jQuery('.timePicker').datetimepicker({
dateFormat: 'dd.mm.yy'
});
SOLUTION
Apparently it turns out, that in the timepicker sourcecode options hour and minute are ignored and not used. Solution for that would be to open up the timepicker.js, find the _newInst function and then either change the corresponding lines, or you could just override the prototype method with a method that has the required fixes.

So simple just change the default timepicker values before calling the time picker as below :
$.timepicker._defaults.hour = 23;
$.timepicker._defaults.minute = 59;
var jq = jQuery('.timePicker').datetimepicker({
dateFormat: 'dd.mm.yy'
});
see this working Fiddle .

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.

Angular UI bootstrap datepicker

I'm using Angular UI bootstrap's datepicker , and when I change programmatically the date the view doesn't change, when I'm in 30 Novembre and I programmatically change the date to 2 December, the date change but the view still fixed in November, here's how I code the next date button.
$scope.right=function(){
if($scope.viewmodel.timeResolution=='yearly')
$scope.dt.setFullYear($scope.dt.getFullYear()+1);
else if($scope.viewmodel.timeResolution=='monthly')
$scope.dt.setMonth($scope.dt.getMonth()+1);
else if($scope.viewmodel.timeResolution=='daily') {
$scope.dt.setDate($scope.dt.getDate() + 1);
}
$scope.changedValue();
};
Html :
<uib-datepicker ng-model="dt" id="dp" datepicker-mode="mode" init-date="initDate" show-weeks=false max-mode="maxMode" min-date="minDate" max-date="maxDate" min-mode="minMode" class="well well-sm" ng-change="changedValue(viewmodel.dt)"></uib-datepicker>
how can I simulate a refresh view everytime I change the date programmatically on the datepicker ?

you need to convert again to date. The function set... only returns the timestamp:
$scope.right=function(){
if($scope.viewmodel.timeResolution=='yearly')
$scope.dt = new Date($scope.dt.setFullYear($scope.dt.getFullYear()+1));
else if($scope.viewmodel.timeResolution=='monthly')
$scope.dt = new Date($scope.dt.setMonth($scope.dt.getMonth()+1));
else if($scope.viewmodel.timeResolution=='daily') {
$scope.dt = new Date($scope.dt.setDate($scope.dt.getDate() + 1));
}
$scope.changedValue();
};

To make your overall experince with angular dates better, you should look into moment .js
http://momentjs.com/
It allows you to create, format, add and subtract dates easily and with minimal issues. Using the default date.set functions can cause a lot of issues.
I have a set up like this using moments with no issues

Angular UI Bootstrap Datepicker - show specific date on Calendar open

I am using Angular UI Bootstrap dirrective for Datepicker. I have list of dates, that I set in calendar as active (i.e. other dates are disabled).
Here is my date list - ["10/16/2015", "11/20/2015", "12/18/2015"]
UI Datepicker always open current date/month. How can I make, so calendar would open on specific date, even if this date is from previous year?
I found option defaultViewDate option, but it seems that it doesn't work (at least I didn't find this method in tpl library)
Any ideas how I can make that?
Thanks!

Given Angular UI's documentation on its datepicker, the calendar adapts to a date set on the ng-model, so all you'd have to do is create a date:
new Date(year, month, day, hours, minutes, seconds, milliseconds);
See w3schools for more on that.
Set the model to that and you should be good to go. Let us know if it works.
EDIT:
To set the initial date when no date is specified, use init-date by creating a default date on the scope of the parent controller.
angular.module("yourModule").controller("parentCtrl", function($scope) {
$scope.initialDate = new Date(2000, 5, 4);
}
And the HTML:
<div ng-controller="parentCtrl">
<datepicker init-date="initialDate"></datepicker>
</div>
Hope it helps.

Dynamically setting date and time in DateBox Jquery Mobile

I need to populate date and time dynamically to JQuery DataBox input field. I teried to do but it is populating the current date in the input fields irrespective of the data I pass.
Here is the date picker which I am cloning to dynamically have in my interface.
Html:-
<input class="time-input day-time-picker day-time-picker-inline-input" type="text" data-role="datebox" data-options='{"mode":"datebox", "useFocus": true}' style="width:8em" />
Javascript:-
var datePicker = $("#date-time-picker-template-container .date-time-picker-template").clone();
Similar way I created a time picker and cloned as did above,
Html :-
var timePicker = $("#time-picker-template-container .time-picker-template").clone();
Javascript :-
<input class="time-input day-time-picker day-time-picker-inline-input" type="text" data-role="datebox" data-options='{"mode":"timebox", "useFocus": true}' />
Inserting Date
$(".time-input", datePicker).datebox();
$(".time-input", datePicker).datebox("refresh");
$(".time-input", datePicker).datebox('setTheDate', dynamicDate);
Inserting Time
$(".time-input", dayTimePicker).datebox();
$(".time-input", dayTimePicker).datebox("refresh");
$(".time-input", dayTimePicker).val('datebox', {'method':'set', 'value':dynamicTime});
I want to set date and time to these DateBox input fields dynamically based on the response I get.
Is there any control to get date and time in a single control using DateBox ?
Thanks.

Clone your templates, add them to a container DOM element and then tell the element to enhanceWithin(). This creates the databox widgets, then set the date and time using the setTheDate method:
$("#btnAdd").on("click", function(){
var dynamicDate = new Date(2014,3,22,10,11,0,0);
var datePicker = $("#templates .date-time-picker-template").clone();
var dayTimePicker = $("#templates .time-picker-template").clone();
$("#time-picker-block").append(datePicker).append(dayTimePicker).enhanceWithin();
$(".date-input", datePicker).datebox('setTheDate', dynamicDate);
$(".time-input", dayTimePicker).datebox('setTheDate', dynamicDate);
});
DEMO

I'm not sure I follow what it is you are trying to accomplish, but yes, there is a mode that allows both date and time operation at the same time - slidebox.
You will need to set (at least) the following options:
{
mode = "slidebox",
overrideSlideFieldOrder = ["y","m","d","h","i"],
overrideDateFormat = "%Y-%m-%d %k:%M
}
For what it's worth, flipbox could probably be altered to work with both, but it's non-trivial. datebox can likely already work (I've never tried), but you'll need to pretty heavily alter the CSS - at least making the control a good deal wider first.