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();
}
);
Related
I'm looking to have a small cal icon (or the one embedded in input box) when clicked has the standard behavior of "popup calendar" and upon selection fires onClick event or function.
The basic calendar is:
<input name="mydate" id="mydate" type="date" data-role="date box" data-options='{"mode": "calbox"}'>
I would like it to only be an icon in the right side of the header. Here is my existing header code that has a "+" as a link to OnClick event.
<div data-role="header" class="tb">
<h1>MyDate</h1>
<a class="ui-btn-right" id="myplus" onclick="openPickDate();">+</a>
</div>
Here is a jsFiddle: http://jsfiddle.net/ezanker/LS3g6/1/
The HTML markup to include a hidden datebox in the header with a button at top right is as follows:
<div data-role="header">
<h1>My page</h1>
<a data-role="button" id="myplus" class="ui-btn-right" >+</a>
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox", "hideInput": "true", "centerHoriz": "true", "closeCallback":"onCLoseMyDate();"}' />
</div>
Setting hideInput to true hides the calendar input box, centerHoriz centers the popup on the screen and the closeCallback is called when you select a date and close the popup.
To launch the popup, handle the click event on the myplus button:
$('#myplus').on('click', function() {
$('#mydate').datebox('open');
});
Then supply the callback function:
function onCLoseMyDate(){
var dateObject = $('#mydate').datebox('getTheDate');
alert(dateObject);
}
I have an accordion that displays items I have entered values from some input items - e.g., if I select a date, the accordion displays the selected date etc.
sample screen - top portion is the accordion with selected values and the bottom portion is where I enter the values
Date: Sep 20 2013 | Customer: MLJJ
Date : ______
Customer : _________
I have a div that pops up when a user clicks on the input field for date. I wanted to do the same for the read-only text in the accordion. But the top portion of my date slider is hidden by the accordion. I have tried setting the z-index to some very high values, but to no avail. Is there a way to accomplish what I am trying to do. Thanks in advance.
Code Snippets
function positionMe(myTextBox) {
var mybox = myTextBox;
$("#popup").show();
$( "#popup" ).position({
of: $( mybox ),
my: "left top",
at: "left bottom"
});
}
popup is a div
<div id="popup">
<div class="input">
<div>
<input type="text" id="timeslice" size="5" />
</div>
</div>
</div>
I solved it myself -
I appended the popup div to the accordion element and then positioned it. That seems to show the popup.
$("div#top-criteria").append($("div#popup"));
positionRight('div#top-criteria');
Thanks
I apologize if the question was a bit vague.
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.
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);
}
In a gsp page, the default way of shifting focus in fields is vertical. like i have 10 textboxes, 5 in a column, in my create.gsp page and my focus is on first textbox, then by pressing tab, focus shifts vertically down to the next textbox. My requirement is to shift focus horizontally from left to right, row by row. can anyone help me how to do this. thnks
You can control this with the tabindex attribute. In the example below the focus moves from f1 to f3 to f2 according to the ascending order of the tabindex.
<input type="text" name="f1" tabindex="1" />
<input type="text" name="f2" tabindex="3" />
<input type="text" name="f3" tabindex="2" />