Zebra DatePicker Positioning Issue - javascript

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>

Related

Datetimepicker: Customizing css

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

jqueryui datepicker does not reset other elements

When the datepicker element is selected, and the calendar pops up, I also want to set a different select element back to the top option, and also clear a textbox....this is what I am trying and doesn't seem to work:
<script>
$(function() {
$("#timeremoved").val("");
$("#timeinplace").val("");
$("#removed").datepicker();
});
</script>
Any help appreciated! Thanks!

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',
});

Add jquery datepicker dynamically after page load

Upon a button click, I have some jquery that will add some html to the 'body' element. In that html, I have a datepicker input field which refuses to appear when it should.
I use the ui-datepicker in several other spots in my app, and it works perfectly.
I have tried calling the datepicker when the document loads:
jQuery ->
$('.my-datepicker-class').each ->
input = $(this)
input.datepicker()
and after the click event which adds the new html to the page:
$('.my-button').click ->
$('body').ipadoverlay
titleStyle: false
contentWidth: 500
topSpc: true
content: $('#popup-for-' + thing_id).html()
$('.my-datepicker-class').each ->
input = $(this)
input.datepicker()
But the picker refuses to show up. My guess is that it has to do with when jquery builds and places the datepicker, but I really don't know.
Let me know if you have any ideas or could use more information.
UPDATE
I changed the way I call datepicker() so that it only applies to the element I want the datepicker attached to.
$('.ipadoverlay .date-picker').datepicker()
This eliminates the first issue with the .each =>.
Now it silently fails. No error or warning. The datepicker simply does not show up.
I am going to begin digging into jquery.ui.datepicker.js to see if I can figure out whats going on, but if you have any ideas why the datepicker fails to response, please let me know.
UPDATE 2
Ok, I got a step further. The class 'hasDatepicker' was already attached to the element I want add the datepicker to (which means $('.date-picker').datepicker() was being called somewhere else, while the element was hidden and unused), but the datepicker didn't work. I fixed this by removing the class from my element, and calling .datepicker() again
$('.ipadoverlay .date-picker').removeClass('hasDatepicker')
$('.ipadoverlay .date-picker').datepicker()
Now the datepicker shows up on click, but selecting a date doesn't do anything... Help would be much appreciated
You need to use the fat arrow. Your use of 'this' loses its context.
jQuery ->
$('.my-datepicker-class').each => # <-- Fat arrow
input = $(this)
input.datepicker()
I'd explain, but coffeescript.org does a better job than I ever could.

Any issues with hiding a select list behind a div and selecting it with JavaScript?

I need to horizontally center text in a select list, specifically for android and iphones. It seems this cant be done with CSS so im looking for a workaround.
I was thinking about hiding the input behind a div with centered text, and using JavaScript to select the input when you click on the div. I would then need to change the text in the div to equal that of the selected option. If the div was created with JavaScript then the page would will be usable with JavaScript disabled.
I had another idea but this seems trickier to me. I could use JavaScript to get the screen width, apply a calculation, and then apply the right amount of text indentation to the input.
Im interested in best practice but this is a demo project not a live one. Im using jQuery. Thanks
UPDATE - Ive tried the following, where the div#cover covers a select input. It works fine in my iPad. However my old Android wont always focus on the input. Firefox does focus on the input but the options dont fly you, you have to scroll them with arrow keys. So it seems this solution is not as simple as id hoped.
$('div#cover').click(function(){
$('#select').focus();
});
Your idea on hiding the select behind the div looks OK
I did a more complex thing - completely hiding the select, replacing it with HTML, doing all interaction from JS and all styling in CSS and reflecting the changes to the underlying select (which can for instance be submitted as a form element in a normal way)
The jQuery plugin I wrote was very tiny anyway, as I put all styles and positions in CSS which gave me the full control over the appearance and big flexibility
Code is from here: jQuery - function runs fine when fired on div click, but not on page load
function textIndentFunc () {
textString = $('#from-1 :selected').text();
$('#hidden').text(textString);
textWidth = $('#hidden').width();
inputWidth = $('#from-1 select').width();
indentMy = (inputWidth / 2) - (textWidth / 2);
$('#from-1').css('text-indent',indentMy);
}
$('#from-1 select').change(function() {
textIndentFunc();
});
textIndentFunc();

Categories

Resources