jquery-ui datetimepicker autoclose in onclick event
In the below example, i can close the date picket by clicking on "Done" button
http://jsfiddle.net/8xjhjssm/4/
But when i add feww css code to remove done button, and expecting to close the datepicker when the date is selected, it does not work, below is the example
http://jsfiddle.net/8xjhjssm/5/
In the onSelect function
you can use the function $.datepicker._hideDatepicker() to hide all pickers or $.datepicker._hideDatepicker(inputElm) to hide specific picker.
onSelect: function (date, obj) {
$.datepicker._hideDatepicker(obj.input[0]);
}
Related
Problem:
Using "TextInput" in react native shows keyboard, and on pressing return, cursor moves to new line, however at this i do not have "done" button to hide the keyboard.
Again, there is props called "returnKeyType={done}, which adds "done" button but now "return" button is gone. I believe user could tap to new line inside "TextInput" box, but it seems to highlight the words typed.
Solution attempt:
Like in numeric keyboard, i thought there should be some props to add "done" button on top of keyboard so that we will have both "return" and "done" botton visible at the same time, but i could not find it.
... another option is i could create my own component with done button, and wrap keyboard as child, but i could not figure out how i do it.
This is basic component, i believe there must be some elegant way to do it. any help is appreciated.
You cannot have done and newline button at the same time.
There should only be one submitting button in keyboard.
But you can make a similar work around.
Custom Button
First option is making custom button like you mentioned.
Make a "Done" button next to your textfield or above the keyboard.
onSubmitEdit
Second option is using onSubmitEdit
Make a custom function that controls what return button should do.
e.g.)
const [textInputValue, setTextInputValue] = useState("");
const returnPressed = () => {
if(need_new_line){
setTextInputValue(textInputValue+"\n");
} else {
returnFunction();
}
};
return (
<TextInput
value={textInputValue}
onChangeText={(text)=> setTextInputValue(text)}
onSubmitEditing={()=> returnPressed()}
/>
);
I have a v-combobox component in my app. I have it to where I can type something in the input then #blur a check happens to see if the typed Item exists in the list or not. If it does not exist a modal opens up asking the user if they want to add it to the list.
I have it if the user clicks yes it is added to the list the problem I am having is if they click cancel and the dialog is closed focus should go back to the combobx input
When I try and set the focus I get the blue animation bar but no input cursor in the input of the combo box
I have set up a codesandbox example of my issue
CodeSandbox Example of Issue
I was wondering If i could get some help or pointers on why Im not getting the full focus to be able to type after clicking cancel on the dialog .
You can try to use $nextTick like this:
closeConfirmationDialog() {
// const comboBox = this.$refs[this.forInput];
// comboBox.$el.querySelector("input").focus();
this.showDialog = false;
this.cancelDialog = true;
this.$nextTick(() => {
this.$refs.categories.focus();
});
}
I want to open a dialog box when clicking on a cell.I am using dgrid/editor.
editor({field: "column1",label: "col1",editor: "text",editOn: "click"})
I am getting text box when using the above code.I want a dialog box.Please tell me how to get a dialog box.I am using OndemandGrid with JSONReststore to display the grid.
You don't need use editor to trigger a dialog, use click event on a cell is ok:
var grid = new declare([OnDemandGrid,Keyboard, Selection])({
store: Observable(new Memory({data: []}))
}, yourGridConatiner);
grid.on(".dgrid-content .dgrid-cell:click", function (evt) {
var cell = grid.cell(evt);
var data = cell.row.data;
/* your dialog creation at here, for example like below */
var dlg = new Dialog({
title: "Dialog",
className:"dialogclass",
content: dlgDiv //you need create this div using dojo.create or put-selector
});
dlg.show();
});
If you want show a pointer while mouse over that cell, you can style it at renderCell method with "cursor:pointer"
From the wiki:
editor - The type of component to use for editors in this column; either a string specifying a type of standard HTML input to create, or a Dijit widget constructor to instantiate.
You could provide (to editor) a button that pops up a dialog when clicked, but that would probably mean two clicks to edit a cell: one to focus or enter edit mode or otherwise get the button to appear and one to actually click the button.
You could also not bother with the editor plugin and attach a click event handler to the cell and pop up a dialog from there. You would have to manually save the changes back to your store if you went that route.
If I understand you right - you could try something like this:
function cellFormatter1(value) {
//output html-code to open your popup - ie. using value (of cell)
}
......
{field: "column1",label: "col1", formatter: cellFormatter1 }
When a page has a search box with multiple tabs, one of the tabs is always selected; either the default tab is selected or the user has changed the tab. In either case the search input box of the selected tab should always have the keyboard focus so the user can just start typing their keywords.
Example: search box on http://www.lib.umd.edu/
Do you know how I could get the focus to be in the input box when a different tab is clicked? I got it to work on the first tab, but when I click another tab, the focus is lost.
The script I am using:
<script type="text/javascript" language="JavaScript">
document.forms[''].elements[''].focus();
</script>
$(document).ready(function () {
setTimeout(function () {
// focus on the txtenclude text area first visible and enabled input field or textarea
$(":input:visible:enabled").each(function () {
if ($(this).is('textarea')) {
$(this).focus();
return false;
}
});
}, 1000);
Your code snippet
To set the focus on a certain element you have to specify which element should receive the focus. In your snippet this specification is missing:
document.forms[''].elements[''].focus();
If you want to you can use this line: document.getElementById("DuringSearch").focus();
DuringSearch is the id of the input element that should receive the focus <input id="DuringSearch" type="text">
The problem that needs to be solved is to change the id based on the tab that was clicked.
There are several ways to achieve this. In a previous post is used an attribte named data-tab.
Example to wire up tabs and focus to input
To attach an event handler to a click on a tab you can do the follwing (using jQuery) on document.ready:
// add event handler for click on tab
$("#tabs li").click(function () {
loadTabs(this);
setFocusOnInput(this);
return false;
});
If you click on a tab the attached event fires and executes the 2 functions: loadTabs and setFocusOnInput.
To set the focus you need to know the id of that input-box. In my exmaple i am using an attribute data-tab
<li data-tab="Before">
Before
</li>
In my example i use the following function:
function setFocusOnInput(_this){
var tab = $(_this).attr("data-tab");
var searchId = tab + "Search"
console.log("_this:", _this);
document.getElementById(searchId).focus();
}
See more explanations on my previous post.
Could you elaborate what you want to know. Do you want to know how to wire it up in general or how to do it in a specific case?
First, I have an TextField. When user click on it, DatePicker will appear (in the same textfield's view). After user choose date, DatePicker should be disappear, and textfield should show selected date.
I have tried this code in ViewDidLoad:
txtTime.TouchDown += (sender, e) => {
UIDatePicker picker = new UIDatePicker (new RectangleF (0, 20, this.View.Bounds.Width, 10));
picker.Date = DateTime.Now;
picker.Mode = UIDatePickerMode.Time;
this.Add(picker);
txtTime.ResignFirstResponder();
};
But I have some problem:
Can't disable keyboard (ResignFirstResponder() doesn't work)
I don't know how to handle select date even of DatePicker to set for Textbox
The DatePicker appear without 'close' or 'done' button, so can't return to textfield view (could I use Datepicker without actionsheet?).
How can I solve that?
In the book "Developing CSharp Apps for iPhone and iPad using MonoTouch - 2011", chapter 7 "Standard Controls" you could see example of how to implement picking date.
Basic idea is to:
Put DatePicker on a UIActionSheet (create custom class, which controls DatePicker and UIActionSheet actually);
Add label "Choose date, then press OK" and buttons "OK"/"Cancel" to the top side of UIActionSheet's View;
Show UIActionSheet on textField.EditingDidBegin event.
Screenshot:
Sorry for Russian locale settigs.
this.txtTime.shouldreturn += (txtTime) => {
txtTime.resignfirstresponder ();
return true;
}