Bootstrap DateTimePicker: Open one datetimepicker at a time - javascript

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.

Related

Bootstrap datepicker with button only

I am trying to use the bootstrap-datepicker plugin to allow the user to click a button and then choose a date on the calendar. I am having trouble getting the calendar to appear on button click:
<button class="glyphicon glyphicon-calendar"></button>
$(document).ready(function(){
$("button").datepicker();
})
$("button").click(function(){
$("button").datepicker('show');
})
Here's a codepen: http://codepen.io/cavanflynn/pen/RWxmdK
Unless I am misreading the documentation, this should make it appear. Any help would be appreciated. Thanks
You are including the items in the wrong order, include jQuery first and then the library as it depends on jQuery (also as mentioned used a stable version of jQuery).
http://codepen.io/anon/pen/avEgOz
[first] https://code.jquery.com/jquery-2.1.4.min.js
[second] https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js

CSS is not applying on first click

I have two calendars implemented in one page, but in two different popup boxes. These two calendars have two different CSS applied (e.g. 1.css, 2.css). I used jQuery to enable and disable a calendar in one of the popup boxes. Currently, I am getting new CSS applied when the calendar is open, and removed when the calendar is closed.
My issue is, on first click, it is first applying the old CSS, and after I close the calendar and click it again, then it's applying the new CSS.
Here is the code I used:
$('#inputField').datepicker({
beforeShow: function(input, inst) {
$('div#div1').append($('#ui-datepicker-div'));
$('link[title=2-css]')[0].disabled=false;
},
onClose: function() {
$('div#div2').append($('#ui-datepicker-div'));
$('link[title=2-css]')[0].disabled=true;
}
});
How can I fix this?
This issue has been resolved. Like I mentioned in my question, I have two calendars on same page with different css. Since, the both calendar has same component, there was namespace conflict. The reason I append datepicker to an empty div was to isolate one calendar with another. Aparently it did work but was not the 100% accurate. So, I changed the namespace of one calendar that is being used as class for css. This solved my problem.

Jquery datetimepicker opening first time at different position

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());
});

Twitter Typeahead not working with Bootstrap CSS

I can't manage to make this bootply work.
It consists of a bootstrap modal with a form containing two input fields in which I'd like to use typeahead. the second input field is also based on bootstrap-tagsinput which means the typeahead should aid in finding tags.
http://www.bootply.com/QdjImYdrJY
I forked your bootply and made it to work : http://www.bootply.com/5tVniXhbBg
You had two issues :
First one, your scripts load asynchronously, so you have to wait for them to be loaded to use their functions (i.e tagsinput and typeahead)
$.getScript(
'myscript' ,
function () {
// Callback function,
// Here you can use what the script you loaded provides.
}
);
Second one, you don't have to put the data-role="tagsinput" manually, it will be added by the plugin. If you specify it, the plugin won't process it as it thinks it already processed it!
Hope this helps,

jquery selectize error: issue with adding new select fields and combox-ifying them

I am trying to the Selectize library so I can have a comboboxes on my form.
So my form has a way to dynamically add more dropdowns (that i want to be comboboxes), so whenever the user adds a new dropdown, I want to apply Selectize combobox to it. So within my function that adds the new dropdown, after I have appended it, I use the following code:
$('select').each(function() {
if (!$(this).is('selectized')) {
$(this).selectize({
create: true,
sortField: 'text'
});
}
});
I thought that this would only apply it to dropdowns that do not already have Selectized combo box applied to it, but something is going wrong. Basically it is applying it to new comboboxes but something strange is going on with the existing ones. It's adding some kind of blank dropdown each time.
I tried to look around but I cannot find an "official" solution for combobox-ifying a newly added select fields. I don't know if it's an issue with how I am applying it, or if it's some kind of weird conflict with twitter bootstrap or jquery-ui or jquery itself (I included all of those in the fiddle)
Anyways, here is a link where you can see this issue in action:
http://jsfiddle.net/Qz7Ar/2/
Does anybody have experience with this or know what's going on here?
edit:
I also made a fork removing jquery-ui and bootstrap, so it's just jquery (required for Selectize) and Serialze, and the issue is still happening:
http://jsfiddle.net/Wxxub/1/
Okay well I figured out how to fix it..
If I add an id attrib to the new element and target by that instead, it works. Here is another fork demonstrating it:
http://jsfiddle.net/Wg7J6/1/
I can't find anywhere in the Selectize doc that it's necessary (I could be blind though!) that the select field must have an id or if it would work without one but i'm just doing it wrong or what, though.

Categories