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
Related
I am trying to disable some action buttons using jquery with css classes. It's working in normal pages, but it's not working for datatables.
I don't know why, I got really stuck. I am showing my code below.
If anybody knows, please help me
$(document).ready(function(){
$("a.button").addClass('btn disabled');
$("a.remove").addClass('ui-state-disabled'); // this is my datatable remove button with class remove
$("a.button").css("margin-top", "-5px");
$("a.button").css("pointer-events", "none");
$('[type=file]').attr('disabled', 'disabled');
})
Have you, by any chance, examined this article?
Because, $('{myButtonSelector}').prop('disabled', true) works perfectly on my DataTables
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());
});
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.
Good day, How can I properly close a select2 dropdown via jquery or javascript??
for now Im using select2-dropdown.toggle() to close it,
but I noticed that It will simply hide the list and the select2 box is still being highlighted
I want to lost focus it or something like that just to close it properly and be able to come up with a result like this one .
by the way the screen shots are dark because those select2 boxes are under a bootstrap modal that would come up whenever I press enter.
Any advice would really be appreciated! Thanks in advance
I know this is an old question but in order to do this using the API you would simply do the following:
Select2 API
$("#select2-drop-mask").select2("close");
The question also mentions bootstraps modal dialog which tends to be a reason why people want to close it programmatically.
For anyone's info this is how you do that:
Bootstrap 3
$('#myModal').on('hidden.bs.modal', function () {
$('#select2-drop-mask').select2("close");
})
Bootstrap 2
$('#myModal').on('hidden', function () {
$('#select2-drop-mask').select2("close");
})
In v4.0, none of the other answers worked for me. Using jQuery to select just the mask had no effect. I had to use the id of the select box itself:
$("#mySelectElement").select2("close")
This also worked, but may not be preferred:
$("#mySelectElement").select2().trigger("select2:close");
Documentation
Also, for Bootstrap 3, the hidden.bs.modal event was too late and the select2 mask would linger for a second during the animation. The hide.bs.modal worked a little smoother for us:
$('#modalYourModal').on('hide.bs.modal', function () {
//close select2 in case its open
$("#mySelectElement").select2("close");
});
this one works for me $("#select2-drop-mask").click();
The select2-dropdown-*mask* didn't work for me, but the below did.
$('#select2-drop').select2('close');
To close all in Bootstrap version 4 and above. Try:
$('body').trigger('mousedown');
All select2 elements has class select2-hidden-accessible. So we can use this class in selector and close all of them
$('.select2.select2-hidden-accessible').select2('close');
or try to close only one of them with id selector.
select2-dropdown.blur();
I think this is what you're looking for.
Here you have an example in JSFiddle created by me just now.
I'm working on a Wordpress website with the theme based on Bootstrap 3.
In a form I need to include calendar date pickers. I added a js library from eyecon (Demo Website for Datepicker Library). I made it work with date selectors, but I'm having trouble disabling choosing the past times for arrival field, when the departure time is set.
For example, if the Departure time is set to be 1 March, when the user clicks on the Arrival field in the calendar that pops up, all the dates before 2nd March should be disabled.
I tried multiple versions of code given on demo website, but they didn't work. I think the problem might be that I have jQuery in noConflict mode.
My current script is located in footer.php of my theme. The calendar pop up works, and it disables past dates, but it doesn't disable dates before the Arrival field once the Departure date is set.
This was the most successful attempt, as at least the calendar popups were working on this attempt: http://jsfiddle.net/j5ZKc/
And this is my current script:
<script type="text/javascript">
jQuery(function() {
jQuery('#dp1, #dp2'
).datepicker({startDate: '-0m'}).on('changeDate', function(){
jQuery( '#dp1, #dp2'
).datepicker('hide');
})
});
</script>
Any suggestions please?
So after some trouble I finally got something working for you:
jsFiddle Bootstrap-datepicker
What did I do:
I used forked Bootstrap-datepicker. It is in my opinion way better documented and easier to use. I got it working so that should count for something.
For example I got the date of the respective datepicker by invoking getDate() on a datepicker:
checkout.datepicker("getDate").valueOf()
If you have any questions about my code, let me know!
EDIT:
I updated the former jsFiddle (see the link above). It automatically sets the value of #dp2 to the selected date of #dp1 + one day. Therefore you should always be in the correct month.
If you don't want the code to put the focus on #dp2 after a date is selected just remove the following line in the jsFiddle:
$('#dp2')[0].focus();
Try this code snippet:
$('#changestartdate').datetimepicker({
minDate:new Date()
});