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.
Related
For picking a date and time I use a datetimepicker (bootstrap-datetime-picker).
The widget allows showing date and time "side-by-side".
It all works great and picking is no problem.
But, the time part of the widget uses arrows to increment/decrement hours and minutes. These arrow buttons are hidden and only show when you hover over the area the arrow button is.
I tried to search the CSS for the "hover" setting, so I can change the behavior of it. I want it to show all the time, not only if hovered over.
Any ideas where and how to change these settings?
you can try:
.timepicker .glyphicon-chevron-up{ background-color: #eee; }
If you mean that DateTimePicker,
inspect the code of page, in console type
var picker = $('.bootstrap-datetimepicker-widget');
$(picker).appendTo('body')
Explore the code of datetime picker element at the bottom of the page
I am using Bootstrap Datepicker for choosing dates multiple times.
I am trying to do like, if user select date of first datepicker then second datepicker should also get selected automatically.
I got success to do so using...
$('#firstDatePicker').on('changeDate', function(e) {
if (e.date) {
$("#secondDatePicker").datepicker("update", e.date);
console.log(e.date,'changed');
}
});
This is working properly. But problem is, when I am sending data from another page to this page with the help of cookies and after getting data from cookies I am updating both datepicker (firstDatePicker, secondDatePicker) like this...
FIRST TRY
$("#firstDatePicker").data('datepicker').setDate(moment(obj.date_and_time,'DD/MM/YYYY')._d);
$("#secondDatePicker").data('datepicker').setDate(moment(obj.date_and_time,'DD/MM/YYYY')._d);
SECOND TRY
$("#firstDatePicker").datepicker('setDate',moment(obj.date_and_time,'DD/MM/YYYY')._d);
$("#secondDatePicker").datepicker('setDate',moment(obj.date_and_time,'DD/MM/YYYY')._d);
THIRD TRY
$("#firstDatePicker").datepicker('update',moment(obj.date_and_time,'DD/MM/YYYY')._d);
$("#secondDatePicker").datepicker('update',moment(obj.date_and_time,'DD/MM/YYYY')._d);
above mentioned all try are working and I have also tried to get date from datepicker using $("#firstDatePicker").datepicker('getDate');. I am getting the date also what I have set programmatically but datepicker's view remain same as like nothing happened.
I have used moment.js to convert the date from a JSON object that is 'obj' which is coming in dd-mm-yyyy format so please don't get confused here these all are working even I am able to see the console of $('#firstDatePicker').on('changeDate') but the problem is with view which is not showing the date what is being set.
https://jsfiddle.net/devqualwebs/5gvn5w1y/9/
I have a problem with a bootstrap datepicker. Here is a Plunker example.
This one is not from me. To get it working, you have to change line 60 into:
else if (attrs.initDate)
Just delete the exclamation mark.
Now you get the init-date in the 2nd input-field.
My Problem:
If you click in the 2nd input-field and click somewhere in the document without selecting a date, it changes the init-date into todays date. I want to keep the init date, dough.
Does anyone have a solution for it?
you can look at the documentation here:
http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#forceparse
look at the forceParse, you need to set it to false.
so just add:
$(element).datepicker({
format: format,
forceParse: false
I am trying to build an app based on jQuery date picker. Here is my fiddle: http://jsfiddle.net/Lf6sD/2/. There is a onChangeMonthYear even mentioned in the options, which is supposed to do a simple alert when user changes month or year either through the drop downs or the navigation buttons on the top left and top right.
However, the alert doesn't appear when I am changing month or year either way.
Can anyone tell me what is wrong, and how do I capture the event?
You have onChangeMonthYearType
Change it to this:
onChangeMonthYear: function(year,month,instance) {
alert("h");
}
Use onChangeMonthYear not onChangeMonthYearType,
onChangeMonthYear: function(year,month,instance) {
alert("h");
}
Updated Demo
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...