Datetimepicker: Customizing css - javascript

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

Related

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.

Date time picker in bootstrap modal, scrolling

I have a problem when scrolling in bootstrap modal with the date time picker plugin. (not date picker).
When I am scrolling in modal, the date box stays fixed page, but normally it shouldn't do that
Where is a lot solutions for bootstrap-datepicker, but I use bootstrap-datetimepicker , and I can't find a solution for it, or maybe I can't find it?
Add position: relative; to the parent container.
I also had encountered the same problem, and my date time picker default is displayed below the input box, the separation of the input box and date time picker plug when slide the modal, the I can let the date time picker plug default display on the input box above, so my javascript code is:
$('#datetimepicker').datetimepicker({
#this is other option
...
pickerPosition: 'top-right',
});

Angularjs: highlight selected range in datepicker hover

I'm trying to simulate a similiar effect as Kayak does in his datepicker. When you select a Depart date and then go to return date, see that the date range is highlighted when you hover a single date.
For this, i'm using a customized version of an angular datepicker and have tried things like asigning the date i'm hovering to ng-mouseover directeve and then a condition in the ng-class directive like (hover-date > depart-date), but this just add the class to the hovered date and not to the complete range (the thing that does right is not adding the class when you hovered dates before the depart-date).
Hope i'm being clear, tell me if not.

Zebra DatePicker Positioning Issue

I am developing an app in asp.net in which I am using the Jquery Zebra DatePicker but the issue is this, I am opening the form in Jquery dailog and calendar will open on the dialog but datepicker is opening at the bottom of the page, same problem is reported here but I am unable to understand how to modify the function. Kindly tell me solution or purpose me some other plugin which is same as ajax calender extender. Thanks in advance.
I recently have the same problem. But a little delay (timeout) solves the issue for me:
jQuery(document).ready(function($){
window.setTimeout(function(){
$('input.datepicker').Zebra_DatePicker();
}, 100);
});
Sorry for the delayed reply... Anyways I will like to improve this answer.
I had the same problem but in my case it occurred due to the icon's position in the date textbox.
If you just want to update the icon’s position, simply call the update method without any arguments:
var datepicker = $('element').data('Zebra_DatePicker');
datepicker.update();
Add the following in your css class for it is (Zebra_DatePicker):
.Zebra_DatePicker{
position: absolute;
}
We can control the Zipra Datepicker positions by changing the default_position and container attributes
Zipra Datepicker has default_position attribute, We can use this default_position attribute to display the calendar above or below of the input box.
Default position -> above / below
Zipra Datepicker default position is above, it means calendar will display right top of the input box.
The second option is the container, the calendar will display relative to the container element.
container: $('body'),
By default, the container will be the body which means the date picker will append related to the body, You can see the date picker HTML code at the top of the DOM
You can change the container position relative to the parent of your input box by adding the class name of parent div in the container section.
$('#datepicker-on-change').Zebra_DatePicker({
default_position: 'below',
container : $('.datepicker-position')
});
<div class="datepicker-position">
<input id="datepicker-on-change" type="text" class="form-control" data-zdp_readonly_element="false">
</div>

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...

Categories

Resources