jQuery UI datepicker display without action - javascript

Is it possible to display jQuery UI datepicker without having to click on anything?
I want the datepicker to be visible when the window loads. Or is this not possible? If not is there another plugin for this or is it best to create a new on my own?

one thing you could do is give focus to the input so that the datepicker shows:
$('#datepicker').focus()
look here http://jsbin.com/agazes/edit#preview
or show it after creating it:
$('#datepicker').datepicker('show')
http://jsbin.com/agazes/2/edit#preview

This does not seem to be possible by passing an option. However, you can call the show method after creating your datepicker:
$(document).ready(function() {
$("#yourElement").datepicker({
// your options...
}).datepicker("show");
});

http://jqueryui.com/demos/datepicker/#method-show
You could call the show method when you want it to open.

In Some jQuery versions show is not available, in that case use:
window.addEventListener('load', function () {
document.getElementById('datepicker').click();
});
jQuery(document).ready(function() {
$('#datepicker').bind('touchstart click', function(){
$(this).focus();
});
});

Related

Change function on datetimepicker not working properly

I have used datetimepicker in my project. But when I am using the change event to call the ajax function it is being called multiple times.
Also when running the script on browser with an alert on change function it goes into infinite state where the alert doesn't seems to remove even after close button.
Version of Datetimepicker used: 3.1.12
$("#timepickerstartt").change(function(){
alert();
});
Snippet used for datetimepicker
Note: I have tried the onselect event but no luck.
$('#cashing_start_time').datetimepicker({
datepicker:false,
theme:'dark',
format:'H:i',
onChange: function(selectedDate) {
alert();
}
});
you are too close...
you can use this function
$('#timepickerstartt').on('dp.change', function(e){ console.log(e.date); })
see this link for more details
see jsfiddle

How to blur Selectize.js input after selection has been made in Bootstrap 3?

I am using the Selectize.js. From the docs it says I can set up a 'onDropdownClose' callback here: Selectize docs. I can't seem to get it to work.
How do I blur (defocus) the input after a selection has been made using Selectize.js? All the blurs in the below code do not work.
$(document).ready(function() {
$("#myinput").selectize({
onDropdownClose : function ($dropdown) {
$($dropdown).prev().find('input').blur();
}
});
});
EDIT:
I am using Bootstrap 3.1.1. I just noticed that the default behavior for Bootstrap 2 is to blur the input after a selection has been made while Bootstrap 3+ leaves the input in focus after a selection has been made. My question still stands for Bootstrap 3+
Edit:
I got it to work with the above code.
Adding this just to have an actual answer. Your solution works.
$("#myinput").selectize({
onDropdownClose: function(dropdown) {
$(dropdown).prev().find('input').blur();
});
});
I had a similar issue and solved it using:
$('#myinput').selectize({
onItemAdd: function () {
this.blur();
}
}
Also, you can access input field like this:
$("#myinput").selectize({
onDropdownClose: function(dropdown) {
this.$control_input.blur();
}
});
closeAfterSelect option has been added since 0.12.0.
https://github.com/brianreavis/selectize.js/blob/v0.12.0/docs/usage.md#options
Accepted (deadwards) answer was fine, but in situation like this:
you open the menu, and close it by clicking back on the input element. In this situation, the dropdownmenu gets opened again.
I used this variant. I know, it is an ugly solution, but it worked better in this situation. You could change timout delay to fit your situation bettter, this was fine for me.
onDropdownClose: function (dropdown) {
var self = this;
setTimeout(function() {
self.$control_input.blur();
}, 250);
}

JQuery: dialog doesn't fire autocomplete

I'm using the http://docs.jquery.com/UI/Dialog and http://docs.jquery.com/UI/Autocomplete with JQuery 1.7.2 and JQuery-UI 1.8.18.
There is a form with a text box, which will fire the autocomplete fine when loaded in the page as normal. It's nice and simple!
(function() {
jQuery(function($) {
return $("#type").autocomplete({
source: "/auto-suggest/supplies",
minLength: 2
});
});
}).call(this);
However, if the form is rendered via a dialog the autocomplete does not fire (no UI changes, and the server shows no access to the source url). I'm assuming this is because the input field has not been rendered at document load. So, I tried to use dialog's create event to assign the autocomplete, by passing the function to it as a callback. Again, the autocomplete does not fire.
I'm mystified as to how to get this to work. I would be tempted to get the dialog to create and then hide on document load, but in this instance there could be several instances of the dialog as it's related to table data.
Any help with this will be much appreciated.
Try using open event - this will ensure that the DOM elements are ready
$( ".selector" ).bind( "dialogopen", function(event, ui) {
$("#type").autocomplete({
source: "/auto-suggest/supplies",
minLength: 2
});
});
You can even get the values and then in the success call dialog
$.get('/auto-suggest/supplies', function(data) {
//call dialog here
});
Try delegate
Delegate autocomplete
BEST SOLUTION IS WROTE BY: ManseUK

How to disable closing of datepicker on jQuery UI Datepicker

When I open a datepicker like that:
$("#checkindate,#checkoutdate").datepicker({
onClose: {
//I'd like to disable the closing
}
);
I'd like to prevent the closing of the datepicker dialog depending on a condition. The ideal would be that return false would stop this event.
I tried modifying the source code and there is no trivial solution.
What I want to do is to be able to select the checkout date without reopening another dialog.
Any idea?
I don't think it's possible to pick multiple dates from one datepicker. You probably will need to do something like their date range demo:
http://jqueryui.com/demos/datepicker/#date-range
$('#datepicker').blur(function(){
$(this).datepicker('show')
})
open up http://jqueryui.com/demos/datepicker/ and copy the code on the javascript console and see what happens
var selectTask = function(selectedDate, calendar) { // pretends to remain open
setTimeout(function() {
$(selector).datepicker('show'); // don't go away ...
}, 0);
};
// datepicker instance
$(selector).datepicker({ onSelect:selectTask, duration:0 });
It's an illusion of prevent closing; might reach the goal.
After spending around a day finally got it,
$( "#selector" ).datepicker({
onSelect: function ( dateText, inst ) {
this._updateDatepicker(inst);
}
});
For all code, click here.
In this question: jQuery UI Datepicker - Multiple Date Selections the accepted answer explains how to implement the multiple date selection in one datepicker.
To prevent the datepicker closing after the selection of a date, you can put this in the onClose option:
$(this).data('datepicker').inline = false;
And add this in onSelect option:
$(this).data('datepicker').inline = true;

Preventing select menu from opening

Possibly a silly question, but how do I prevent a select element in a form from showing its drop down menu when it's clicked on? I tried the following:
$('select').click (function (e) {
console.log (e);
return false;
});
and
$('select').click (function (e) {
e.preventDefault ();
console.log (e);
});
But neither worked.
What am I doing wrong?
EDIT: The reason I need to know is for a jquery enhanced select element that needs to degrade gracefully. The idea is the select, when clicked, opens a jquery UI dialog with a nicely maked up list that the user makes their selection from (clicking a list item causes the select's value to update). If JS is disabled then the select should just operate as normally.
The problem is that as well as the dialog opening, the dropdown also appears, which is not what I want. I can't just disable the control, as its value needs to be submitted along with the rest of the form.
This should work:-
$('#select').on('mousedown', function(e) {
e.preventDefault();
this.blur();
window.focus();
});
The problem is that you're using the wrong event.
<select onmousedown="(function(e){ e.preventDefault(); })(event, this)">
<option>Some Option</option>
</select>
JsFiddle
From my experience, if i need to disable something, the easiest way to have another invisible element on it (use absolute positioning). When you want to allow default behavior again, you just hide absolute element.
I believe the best solution would be to replace the select element with something else to click on (a button or a link).
BTW, you may want to look into the CSS 3 property appearance, which theoretically allows you to let that replacement element look like a dropdown. Support is however currently very limited:
http://css-infos.net/property/-webkit-appearance
https://developer.mozilla.org/en/CSS/-moz-appearance
You can, the trick is to cancel the mousedown event, not the click. The event chain is made in such a way that click and mouseup cannot occur if mousedown was cancelled:
function cancelDropDown(ev) {
ev.preventDefault();
}
document.getElementById("selectElement").addEventListener("mousedown", cancelDropDown, false);
Hide the select options on page load (if Javascript enabled). They will not display when the select box is clicked, but the text of the first option ("Select an option", or whatever) will still appear in the select field.
$(document).ready(function() {
$('#idOfSelect option').css('display', 'none');
});
Updated Solution:
$(document).ready(function() {
$('#idOfSelect').focusin(function() {
$(this).css('display', 'none');
$('body').click(function(event) {
$(this).unbind(event);
$('#idOfSelect').css('display', 'block');
});
});
});
I just solved this exact problem, by manipulating the 'size' attribute of select. Not very elegant, but worked. Hope its of some help to you.
<!-- Example select dropdown -->
<select id="select" onclick="tackleDropdown()">
</select>
<!-- The JS function -->
<script>
function tackleDropdown(){
document.getElementById('select').setAttribute('size', 0);
// your code for displaying the jQuery UI dialog (is it colorbox???)
// re-enabling the drop down
document.getElementById('select').setAttribute('size', document.getElementById('select').options.length);
}
</script>
Use disabled
$(this).attr("disabled","disabled");
Some good answers here. But still I had to make some additions.
$(document).on('keydown mousedown touchstart', 'select.disabled', function (e) {
e.preventDefault();
})
A simple solution based on CSS is this small fragment:
select:read-only * {
display: none;
}
This will make the options not available when the select is selected. This action mimics the behavior of the "readonly" attribute of the input.

Categories