Develop Reference

free-jqgrid with bootstrap and datepicker issue

I am using demo sample located https://jsfiddle.net/OlegKi/90qmjean/3/
Some reason datepicker is not rendering? also i need to set dateformat to
ISO8601Long:"Y-m-d H:i:s"
But with original date formatter shows selected date as 'Y-3-14 H:i:s'
see the screenshot for details:enter image description here

The problem, which you described in comments above, is the following: you are wonder why the Bootstrap datetimepicker, used in the demo http://jsfiddle.net/OlegKi/duooa5oy/1/, don't close the calendar window after choosing the date.
First of all, I want to stress, that it's the default behavior of the Bootstrap datetime picker. You can try any demo on the page http://eonasdan.github.io/bootstrap-datetimepicker/ to verify that. The reason of the behavior is easy to understand. The datetimepicker allows to change the time and not only the date. The corresponding control contains 4 buttons, which increase/decrease the time via click on the buttons. I marked the buttons on the picture below:
Thus, what you probably want is closing of the datetimepicker if the date (and not the time) is changed. One can implement the requirements by adding the following lines in the demo:
$(el).bind("dp.change", function (e) {
if (e.date.dayOfYear() !== e.oldDate.dayOfYear()) {
$(this).data("DateTimePicker").hide();
}
});
See the modified date http://jsfiddle.net/OlegKi/duooa5oy/7/

It looks like when i updated boostrap-datepicker to latest version, it worked.

how to select the active day datetime bootstrap eonasdan

I work with this excellent plugin, as I can do to make the change event work on the currently selected day , this is the code
$('#id_fecha').on("dp.change", function(e){alert('ok');}
this not work for the active day, thanks.

without seeing your implementation, the most obvious thing is there is an error in your code:
you are missing a ) at the end:
$('#id_fecha').on("dp.change", function(e){alert('ok');});

How do I format the rows and the month names in Angular UI date picker?

I cant seem to find it in the documentation, and my last resort is to override the template. Currently, I am using the view mode months, and its showing the whole month name. I just want the short version, for example, Jan, Feb, Mar.
Also, the default grid for months seems to be 4x3, but I want it to be 3x4. Does anyone know how to do this?
<div ng-model="vm.currentDate"
datepicker-popup="MMM yyyy"
is-open="vm.pickerOpen"
min-date="vm.minDate"
max-date="vm.maxDate"
show-button-bar="false"
datepicker-options="{minMode:'month', maxMode:'month', class:'green-date-picker' }"
datepicker-mode="'month'"
ng-click="vm.openDatePicker($event)">

From this link
format-month="MMM"
Also, the documentation is in the upper link in this sentence...
Everything is formatted using the date filter and thus is also localized.
Link is in bold above, but blue on page (as usual).

Datetime picker with default initial value (basic Html & Javascript only)

I want to have a datetime picker with default value (Date.now) but I am restricted javascript only (no jquery).
I managed to pull it off with a hack, is there a better way to do this?
HTML
<input type="text" id="inputDate">
Javascript
var dateField = document.getElementById("inputDate");
var date = new Date();
dateField.setAttribute("type", "datetime-local");
dateField.setAttribute("value", date.toISOString().slice(0, 19));
I wonder if this works in all browsers, only tried it in Chrome.

Here you have a link that may be helpful for you. It shows you the browsers that accept the inputs with type "date".
http://caniuse.com/#feat=input-datetime
In order to make it more "crossbrowser", you should consider to use jQuery-UI datepicker (http://jqueryui.com/datepicker/). It is really easy to use.

The new input types to HTML5 are new, which makes them very restrictive and hard to use. They are hard to manipulate, style and customize.
I would use an html simple textbox with a "man-made" down arrow that you can click and populate your calendar (or whatever you would like to show). This can all be done with simple javascript and textBox.
I have a calendar datepicker pure javascript which I use over and over again because I can make it do whatever I would like it to do.

AM PM Time picker Code needed

I dont want to use HTML drop down for AM PM time picker in 12 hours format...can any one give me LInk regarding this.I want Jquery/Javascript/CSS based AM PM picker

Here is a solution that does what you want, though tbthorpe is right, it might be good to make the two spans I use into radio buttons, and style those so they work the same as my solution.
http://jsfiddle.net/csaltyj/PPQQ8/
What you could do is, have radio buttons with a class on it, and use jQuery to hide those and replace them with the clickable spans which actually trigger the radio button clicks. Probably a better solution for accessibility.

Here's a more robust time picker than just AM/PM - it's a jQuery plugin. Presumably, you could pare down the js/css and have it just let you pick am or pm.
http://fgelinas.com/code/timepicker/

I found this trying to find a decent time picker which supports US AM/PM style and doesn't use a drop down. The best tool for me was anytime. http://www.ama3.com/anytime/
example code (assuming you have loaded jQuery and the AnyTime script)
$("#field2").AnyTime_picker( {
format: "%h:%i %p",
labelTitle: "Time",
labelHour: "Hour",
labelMinute: "Minute"
} );
supporting html
<input type="text" id="field2" value="" readonly="">
Example fiddle:
http://jsfiddle.net/brianlmerritt/Lzn7fnnw/2/
And it looks like this...