Jquery datetimepicker opening first time at different position - javascript

I am using Jquery datetimepicker plugin link here
When I click on the field for first time, the datetimepicker is not opening near the field, something like below, the picker is way above the field.
When I close it and click on it second time and after, it is appearing in proper place. depicted below.
This is weird, and when I set either timepicker or datepicker to false, the picker is working fine from the first click.
The code I used to construct the picker is below,
HTML
<input id="DateTimeFrom" type="text" class="widthAdjust" />
JS
$('#DateTimeFrom').datetimepicker({
onShow:function( ct ){
this.setOptions({
maxDate:maximumDate,
maxTime:maximumTime
})
},
mask : true
});
I am not applying any CSS except for setting width to the field.
For maximumDate and maximumTime I performing some logic and setting to it, But I am pretty sure that the logic has no effect on this issue.
EDIT
I have my code in fiddle here. but I couldnt link the datetimepicker js and css.
Any sort of guidance will be helpful.

Try to set offset() for datetimepicker
$("#buttonID").click(function(){
$('.xdsoft_noselect').css('top', $("#DateTimeFrom").offset().top + $("#DateTimeFrom").outerHeight());
});

Related

Bootstrap DateTimePicker: Open one datetimepicker at a time

I have an html template with more than one datetimepickers. If I click in the button to open one datetimepicker and after that click in another to open the new one, the first one stays unchanged (it doesn't close). I want to be able to open only one datetimepicker at a time.
Here's a JsFiddle Demo
$('#datetimepicker1, #datetimepicker2').datetimepicker();
This was standard behaviour for bootstrap datetimepicker 2.5 when working with the moment 2.5 (moment-with-langs) but now it seems not to be working like that.
Does anyone have any ideas to workaround this issue?
Note: I'm using Eonasdan bootstrap-datetimepicker version 3.0.3 with moment 2.8 (moment-with-locales), jQuery 1.9 and Bootstrap 3
What's tricky here is that bootstrap-datetimepicker appends to <body> a <div> for each datetimepicker initialized that is completely unrelated to its trigger button.
Try this:
$('.date').datetimepicker();
$(document).ready(function() {
// Select all elements with the 'date' class
$('.date').on('dp.show', function() {
$('.date').not($(this)).each(function() {
$(this).data("DateTimePicker").hide();
// $('.date').not($(this)) selects all the .date elements except
// for the one being shown by the datetimepicker dp.show event.
// The dp.show event is fired when a new datetimepicker is opened.
// We use the .data("DateTimePicker") to access the datetimepicker object
// (we have to use a jQuery each loop in order to access all the
// datetimepickers.
// .hide() -- we hide it.
});
});
});
That should allow only one datetimepicker to be open at a time.
Although Joel Lubrano's answer works as intended for preloaded widgets ... it lacks the possibility to work with dynamically generated ones (via JS). Meanwhile, I've managed to work around this issue from inside the component solving both problems by adding one single line.
Inside the component's JS locate the picker.show function (around line 1150 depending on version (this in v1.3.1)) ... inside the last else statement of that function, place the following line as the first instruction of that statement.
$('.picker-open').hide().removeClass('picker-open');
and that's it. After that you only need to encapsulate the DTP initialization inside a function and call it on document ready and after dynamically generated widgets.
function DTPinit(){
$('.dtp').datetimepicker();
}
$(function(){
DTPinit();
$('#dtp_gen').on('click', function(){
$('body').append('<div class="form-group"><div class="input-group dtp date""><input type="text" class="form-control datetimepicker" /><span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span></div></div>');
DTPinit();
});
});
Here you have a JSFiddle demonstating what I'm describing above. The BS-DTP component is being loaded inside the fiddle JS container for editing purposes.

Styling custom date picker

I'm using this datepicker plugin to display a popup datepicker.
It's working fine, but I'm having trouble assigning it the correct styles.
I have 2 of them, the first not being an issue.
I have the following JS:
$(".datepicker1").pickadate({
min: 1,
onClose: function() {
var picker = $input.pickadate("picker");
picker.set("select", this.component.item.select.pick);
picker.open();
}
});
What it does is simple: The moment a user selects a date on the first picker, the second one is displayed, with the previously selected date displayed(In order to let the user know what the range of dates will be that he/she selects).
Everything works just fine, but I don't want the default blue square background for the selected date. I want something like this as opposed to what I currently have, which is just a different background-color.
Does anyone know how I can achieve this?
Without being able to see the markup or css, my first inclination with these is to add a CSS triangle either to the element, or to the elements :before pseudo class.
As for making the CSS triangle, go here:
http://apps.eky.hk/css-triangle-generator/
You have to find the class
.picker__day--highlighted:hover, .picker--focused .picker__day--highlighted
in the default.date.css file. Then, you can easily modify "everything" concerning the today hightlight shape

Bootstrap Slider Controls?

I'm currently using http://www.eyecon.ro/bootstrap-slider/ which works a treat, however i'd like to output the value in realtime to an input box.
The js does this to a tooltip which is fine, however once you leave the slider, you can't see what you set it to.
Any suggestions?
You can log the slider value at real time using the slide event that is supplied with the plugin.
See this demo: http://jsfiddle.net/vMLPF/1/
Code:
$('#foo').slider().on('slide', function(_ev) {
$('#bar').val(_ev.value);
});
In the above code, #bar represents the input box in which you want to show the slider value in real time.

date picker not appearing when cursor is put in textbox

I have two date pickers appearing when green color is clicked, but when i am putting mouse cursor on those two text boxes, then nothing appears, only after clicking image/green color date picker is appearing. What modification should i do?
In this below fiddle automatically date picker is appearing when cursor is put:
http://jsfiddle.net/cBwEK/
I want to add the above function in below fiddle:
http://jsbin.com/unosar/19/edit#javascript,html,live
I am trying but nothing happens. Any solution please
EDIT: BOTH THESE ABOVE EXAMPLES USE SAME css/js/mootools SCRIPTS
The code in the two examples are different. Try to set up an example that is more like your real code. Try to do the same thing in the 2nd example:
new DatePicker('.picker', {
pickerClass: 'picker ',
allowEmpty: true
});
​
Add an click event on the textboxes:
$$('.date').addEvent('click', function() {
dp.show();
});

date picker should appear when clicked on image

In fiddle i am displaying a dynamic date picker which displays date when we put curser on that text box, that is fine.i want a image to be placed right side of text box and when image will be clicked then same date picker will be displayed.
http://jsfiddle.net/cBwEK/
I am trying by putting an image there but when i click on that image nothing happens. How can it be done? Any help please
As it turns out, there is an option for this very thing: toggleElements. It expects a collection of other elements that can also invoke the datepicker. I added an array with a single element and it seems to work just fine.
var dp = new DatePicker('.picker', {
pickerClass: 'datepicker ',
allowEmpty: true,
toggleElements: ['imageInvokerP']
});
Fiddle: http://jsfiddle.net/cBwEK/10/
one ans was given by Jonathan and this should be the way of doing things of these kinds.
but therez an easy solution you can take
assuming id of your image is Image and that of text box is Input
you can do everything normally
binding the datepicker to the input element using $('#Input').datePicker() in document.Ready
next you can bind the click event of the $('#Image') like this
$('#Image').click(function(){
$('#Input').click();
});
this way automatically your input element will get focus when you will click on the image.

Categories