I am looking for a way to use the datepicker with a button rather than a input box. When I click the button the date picker will appear as a dropdown to the button and on click some events will fire. Somethign like the following image
Any help?
If you are using an input field and an icon (like this example):
<input name="Date" id="Date" type="text" readonly />
<a href="#" id="Date_icono" ></a>
You can attach the datepicker to your icon (in my case inside the A tag via CSS) like this:
$("#Date").datepicker();
$("#Date_icono").click(function() {
$("#Date").datepicker( "show" );
});
OR
Turns out that a simple hidden input field does the job:
<input type="hidden" id="dp" />
And then use the buttonImage attribute for your image, like normal:
$("#dp").datepicker({
buttonImage: '../images/icon_star.gif',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
showOn: 'both',
});
Initially I tried a text input field and then set a display:none style on it, but that caused the calendar to emerge from the top of the browser, rather than from where the user clicked. But the hidden field works as desired.
Related
I am having a difficult time getting this to work. I have a link that opens a jQuery UI Dialog which contains links. Those links open a Bootstrap popover which contain an input field. For some reason, the input field is not editable.
See: http://www.bootply.com/Z46ZXA133U
Markup :
<div id="dialog">
<a data-placement="bottom" data-toggle="popover" data-title="Login" data-container=".ui-front" type="button" data-html="true" href="#" id="login">Login</a>
</div>
<form id="popover-content" style="display:none">
<input type="text" value="try changing me">
</form>
Script :
$( "#dialog" ).dialog({
height: 300,
width: 350,
modal: true,
});
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
This is because you have
data-container="body"
on your popover. At the same time, ui-widget-overlay and ui-front covers the body area entirely, preventing clicks and keyboard events from being "sent" from body to the popover.
Change to
data-container=".ui-front"
and you are good. Forked bootply -> http://www.bootply.com/AXpc6PKuSO
in my case change data-container="body" to .ui-front did not help!
But the direction is right
I get modal body container selector and use them!
container: '#myModal-2 > section > div.modal-dialog > div',
Try to explain: if you use container='body' and use modal then modal overlay is blocking focus on body elements
I'm having a little trouble dynamically changing a button's theme dynamically. From a different post I learned to use:
<input type="button" data-inline="true" data-mini="true" data-theme="c" id="my-button" value="Save">
<script>
$("#my-button").buttonMarkup({ theme: 'a' }).button('refresh');
</script>
Technically this works, until I mouse over - then the button falls back to data-theme "c". Is there a better way to dynamically change theme?
if you use a button as below
Save2
You can change the theme as below
$('#my-button2').attr("data-theme", "c").removeClass("ui-btn-up-e").addClass("ui-btn-up-c");
check out a live fiddle here http://jsfiddle.net/mayooresan/jfDLU/
I tried to find the answer for this one, but came up with this solution after looking into the DOM structure. I created the below function for toggling the theme on click the button. the hover class needs to be addressed only when changing the theme of the same button you are clicking.
These seems to work for input type button element. (jqm version 1.3.2)
function changeButtonTheme(buttonSelector,toTheme){
var currentTheme = $(buttonSelector).attr('data-theme');
var parent = $(buttonSelector).parent();
$(buttonSelector).attr("data-theme", toTheme).removeClass("ui-btn-up-"+currentTheme).addClass("ui-btn-up-"+toTheme);
parent.attr("data-theme", toTheme).removeClass("ui-btn-up-"+currentTheme).addClass("ui-btn-up-"+toTheme);
//parent.removeClass("ui-btn-hover-"+currentTheme).addClass("ui-btn-hover-"+toTheme);
}
I am noticing that jQuery datepicker is neither activating the current element nor the next element in the tab index after tabbing into a field spawns a datepicker instance and the mouse is used to click on a day.
<input type="text" id="no1" />
<input type="text" id="no2" />
<input type="text" id="no3" />
$('#no2').datepicker();
$('#no1').focus();
If you check out http://jsfiddle.net/DgkJZ/1/
and tab to the second field, click a date, you'll see what I mean about the tab focus going nowhere. Is there some way around this that doesn't involve editing jQuery UI source?
Try to catch the onSelect and set focus accordingly
$('#no2').datepicker( {
onSelect: function() {
$('#no3').focus();
}
);
I'm using Jquery Ui to make a dialog using the following options:
$("#locations-dialog").dialog({
autoOpen: false,
title: '<input type="text" id="location-name" value="New Location">',
draggable: false,
modal: false,
closeOnEscape: true,
width: 660,
height: 515,
});
As it is visible I'm using an input field as a title.
The issue I'm having is that when I click on top of it nothing happens meaning I can't edit the text.
Don't know if I'm doing anything wrong...but in the jquery ui says:
Any valid HTML may be set as the title
As others have said, that's because the dialog widget disables selection for all the elements in its title bar, even if the draggable option is set to false.
You can add the text box to the title bar after the dialog widget is created, as the answer to the duplicate question suggests, or you can call enableSelection() to re-enable selection on the title bar elements:
$("#locations-dialog").dialog("widget")
.find(".ui-dialog-titlebar")
.find("*").andSelf()
.enableSelection();
The binding of the dialog box is what is causing issue. See this URL for full explanation and a work around example.
jQuery UI Dialog - Input textbox in the titlebar is disabled?
I create modal dialog with form inside it (with some text input).
And I just can't enter the text inside the textbox. Dialog blocks keyboard input.
Here is my simplified example:
<div id="modal-dialog">
<label for="my-text">TRY to input text...</label>
<textarea id="my-text" style="position:relative; z-index:1"></textarea>
</div>
<script type="text/javascript">
var dialog = $('#modal-dialog').dialog({ modal: true });
</script>
Note: You may ask - why did I mentioned about "position:relative; z-index:1"? Because it works fine without it. But I can't remove it because of design.
Note: not modal dialog works fine too.
I'm using jQuery 1.6.2 + jQuery UI 1.8.14
The z-index is the problem. Here is an exemple ( http://jsfiddle.net/c3BPP/ ) of your code with a bigger z-index and it works.
You can also lower the z-index of the JQuery dialog:
var dialog = $('#modal-dialog').dialog({
modal: true,
zIndex: 500
});
By default, it is 1000. Of course your relative or absolute positioned elements needing text input need to be greater than the z-index of the dialog still.
I found that the <form> tag in my dialog was getting a z-index of 1, preventing any of the controls from working. Instead of changing the z-index for each control, simply changing the z-index of the <form> tag to 1010 (a value higher than the default of the dialog) worked for me.
Adding tabindex="-1" helped me resolve this problem.
Here's an example:
<div class="modal fade" tabindex="-1" id="error" role="dialog">