I have one input field whose type is date and placeholder is "Enter your date". But what happened was placeholder does not show up in the mobile app. (we are building the mobile app using html, css, bootstrap and react.js and porting via cordova"). So I am following this link, to get the label appeared and when clicked date pop should appear. But this seems to be not working, when inspected the element in chrome, onfocus and onblur seem to be disappearing. Is there anyway to make it work in react.
<ElementsBasket name='nextActionDate'
data={this.props.newLead.get('actions').get('nextActionDate')}>
<div className="form-group">
<input type="text" className="form-control" onfocus="(this.type='date')" onblur="(this.type='date')"
placeholder="Type your date here.."
value={this.props.newLead.get('actions').get('nextActionDate')}
onChange={onFieldChanged.bind(this, 'actions.nextActionDate')}
/>
</div>
</ElementsBasket>
ps: I am following this link
Not showing placeholder for input type="date" field
In React your events should be called onFocus and onBlur (note capitalisation)
https://facebook.github.io/react/docs/events.html
edit:
The other issue is that you are setting the handlers to a string - onFocus="(this.type='date')" and they should be a function. So set them like you set your onChange event -
<input type="text" onFocus = {this._onFocus} onBlur={this._onBlur}
Now this refers to the object that contains your render function so you need to implement the appropriate function in that object.
eg.
_onFocus: function(e){
e.currentTarget.type = "date";
},
_onBlur: function(e){
e.currentTarget.type = "text";
e.currentTarget.placeholder = "Enter a Date";
},
this is simpler
<input
type="text"
onFocus={
(e)=> {
e.currentTarget.type = "date";
e.currentTarget.focus();
}
}
placeholder="dd/mm/yyyy"
/>
Basically the date type appears with default placeholder i.e. mm/dd/yyyy, that's why our placeholder attribute is not displayed as it is in text type.
So we can use event handlers onFocus and onBlur to make it work.
We can add these handlers in arrow function structure like this -
<input
type="text"
onFocus={(e) => (e.currentTarget.type = "date")}
onBlur={(e) => (e.currentTarget.type = "text")}
placeholder="No date found"
/>
output will be like this
ReactDOM.render(
<input
type="text"
className="form-control"
onFocus={(e) => (e.currentTarget.type = "date")}
onBlur={(e) => (e.currentTarget.type = "text")}
placeholder="No date found"
/>,
document.getElementById("react")
);
.form-control {
padding: 10px;
font-size: 18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>
Hope it helps you, thanks
Obviously you can't bring in the place holder when the input type is Date , one way to solve this issue is dynamically changing the input type on-focus , but that is not a good practice , my suggestion is not to go with the default date pickers instead you can use the drop downs
You can also refer this question .Hope this helps you :)
<input
type="text"
className="form-control"
onFocus={(e) => (e.currentTarget.type = "date")}
onBlur={(e) => (e.currentTarget.type = "text")}
placeholder="plz select your date"
/>
Related
I need to make a datepicker
<input type="text" name="Birth" id="calendarInput" required class="inputField" placeholder="31.12.2001">
<input type="date" name="Birth" id="calendarHiddenInput" pattern="\d{4}-\d{2}-\d{2}" style="display: none">
<img id="calendarImg" src="images/calendarIcon.png">
When you write usual input[type=date], there is a clickable calendar icon, where you can pick a date. I want to make an event listener like this:
$('#calendarImg').click(function () {
$('#calendarHiddenInput').click();
});
But this function doesn't work. I want a usual input[type=text] but with small calendar icon, that shows a calendar like input[type=date] when you click on it.
P.S. When I do it, I'll pick value from calendarHiddenInput and paste it in calendarInput
Something like this. Replace "icon" with your image or text.
document.forms.form01.hiddendate.addEventListener('change', e => {
e.target.form.date.value = e.target.value;
});
input[type="date"] {
display: none;
}
<form name="form01">
<input type="text" name="date" />
<label>icon<input type="date" name="hiddendate"/></label>
</form>
The <label> element can be used for focusing on an input element even if it is hidden. The date picker (if there is one) will still show up.
I am using React date-picker for my form. Currently it's working well, but the user can delete the date and enter whatever values. How do I restrict it?
This is my code:
import DatePicker from "react-datepicker";
<DatePicker
name="invoiceDate"
className="form-control form-control-sm"
type="text"
size="sm"
placeholder=""
selected={date}
minDate={new Date()}
value={values.setDate}
onChange={datePickerChange}
dateFormat="dd/MM/yyyy"
/>
Just add this line of code to DatePicker :
onKeyDown={(e) => {
e.preventDefault();
}}
After adding this event, your component's code will be like the below code :
<DatePicker
name="invoiceDate"
className="form-control form-control-sm"
type="text"
size="sm"
placeholder=""
selected={date}
minDate={new Date()}
value={values.setDate}
onChange={datePickerChange}
dateFormat="dd/MM/yyyy"
onKeyDown={(e) => {
e.preventDefault();
}}
/>
I think onBeforeInput should be used in this case, as opposed to onKeyDown.
So just simply:
onBeforeInput={(e) => {
e.preventDefault();
}}
The reason being, that onKeyDown prevents a lot of 'normal' functionality from working when the input is focused. E.g.:
Page reload with CTRL + R
Opening devtools with F12
Going to the next input with Tab
And in case of ReactDatePicker, the customInput property has to be used to pass in an input that has onBeforeInput overridden as explained.
I have bunch of inputs like:
<input />
<input />
<input />
and a button which ads extra input
<button>Add Input</button>
The issue is that when a user put the text in the input(s) and add
additional input afterwards (i.e. press Add Input) the entered text in old inputs disappears.
JSFiddle:
<div id="inputs"></div>
<button onclick="document.getElementById('inputs').innerHTML += '<input /><br>'">Add Input</button>
So I decided to update <input> value attribute. I have tried with onchange but had no luck.
The code with errors and trials is super simple and looks like:
function change_value(el) {
document.getElementById('some-id').value = el.value
}
<input id="some-id" value="${this.value}" onchange="change_value(this)" />
Will be grateful for any suggestions about how to keep <input value up-to-date with user text.
It depends on what content you want to update. You can find a snippet below, that works oninput and updates the textContent of a span.
const input = document.getElementById('some-id')
const display = document.getElementById('updated')
input.addEventListener('input', function(e) {
display.textContent = this.value
})
<input id="some-id" value="" /><br /><br />
<div>Updated value: <span id="updated"></span></div>
EDIT
A new snippet may clear things up a bit.
const btnAdd = document.getElementById('add')
btnAdd.addEventListener('click', function(e) {
var input = document.createElement('input');
input.type = "text";
document.getElementById('inputs').appendChild(input)
})
<div id="inputs"></div>
<button id="add">Add Input</button>
Use createElement() instead of innerHTML.
Try using innerHtml like this
document.getElementById('some-id').innerHtml instead of value
https://www.w3schools.com/js/js_htmldom_html.asp
Actually, it is not possible this way, maybe with some tricks like with any change store the value and create new input with the new value or change the innerHtml, maybe it works.
I have a react component which has a input field with disable attribute. On click of the component, the input gets enabled and user can type on the field. I'm able to achieve till there, but I need to focus on input field on getting enabled.
Attributes.js
basicAmenitiesList.map(function(item, index){
return <Attribute key={index}
name={item.amenity_id}
type={item.title}
icon={item.icon}
selected={item.isSelected}
value={item.value}
onClick={_this.handleClick.bind(this)}
onChange={_this.handleChange.bind(this)}/>
})
The Attribute file :
<div onClick={this.handleClick.bind(this)}>
...
<input type="text" name={this.props.name}
ref={this.props.name}
placeholder="NO INFO FOUND"
value={this.props.value}
disabled={!this.props.selected}
onChange={this.props.onChange}
/>
</div>
handleClick(e) {
// I need to focus on enabling., that is when **this.props.selected** is true.
return this.props.onClick(this.props.name);
}
UPDATE
I tried onFocus for input,
onFocus(){
this.refs.pets.focus();
}
Right now I'm hard coding the refs name as pets, but is there any way to make it dynamic by sending the name with the onFocus?
you can use autoFocus as property for input
<input type="text" name={this.props.name}
ref={this.props.name}
placeholder="NO INFO FOUND"
value={this.props.value}
disabled={!this.props.selected}
onChange={this.props.onChange}
autoFocus
/>
i have some html code like this
<form name="first"><input name="firstText" type="text" value="General" />
<input name="secondText" type="text" value="General" />
<input name="ThirdText" type="text" value="General" />
<input name="FourthText" type="text" value="General" />
<input name="FifthText" type="text" value="General" />
</form>
<form name="second"><input name="firstText" type="text" value="General" />
<input name="secondText" type="text" value="General" />
<input name="ThirdText" type="text" value="General" />
<input name="FourthText" type="text" value="General" />
<input name="FifthText" type="text" value="General" />
</form>
i want to select "secondText" of form "second" using jquery or javascript and i want to change value of it using jquery.
Using jQuery:
var element = $("form[name='second'] input[name='secondText']");
Using vanilla JS:
var element = document.querySelector("form[name='second'] input[name='secondText']");
Changing the value: element.val(value) or element.value = value, depending of what you are using.
To the point with pure JS:
document.querySelector('form[name=particular-form] input[name=particular-input]')
Update:
This selector will return the input named "particular-input" inside form named "particular-form" if exists, otherwise returns null.
The selector filter "form[name=particular-form]" will look for all forms with name equals "particular-form":
<form name="particular-form">
The selector filter "input[name=particular-input]" will look for all input elements with name equals "particular-input":
<input name="particular-input">
Combining both filters with a white space, I mean:
"form[name=particular-name] input[name=particular-input]"
We are asking for querySelector(): Hey, find all inputs with name equals "particular-input" nested in all forms with name equals "particular-form".
Consider:
<form name="particular-form">
<input name="generic-input">
<input name="particular-input">
</form>
<form name="another-form">
<input name="particular-input">
</form>
<script>
document.querySelector('form[name=particular-form] input[name=particular-input]').style.background = "#f00"
</script>
This code will change the background color only of the second input, no matter the third input have same name. It is because we are selecting only inputs named "particular-input" nested in form named "particular form"
I hope it's more clear now.
;)
By the way, unfortunately I didn't found good/simple documentation about querySelector filters, if you know any reference, please post here.
// Define the target element
elem = jQuery( 'form[name="second"] input[name="secondText"]' );
// Set the new value
elem.val( 'test' );
Try
$("form[name='second'] input[name='secondText']").val("ENTER-YOUR-VALUE");
You can do it like this:
jQuery
$("form[name='second'] input[name='secondText']").val("yourNewValue");
Demo: http://jsfiddle.net/YLgcC/
Or:
Native Javascript
Old browsers:
var myInput = [];
myInput = document.getElementsByTagName("input");
for (var i = 0; i < myInput.length; i++) {
if (myInput[i].parentNode.name === "second" &&
myInput[i].name === "secondText") {
myInput[i].value = "yourNewValue";
}
}
Demo: http://jsfiddle.net/YLgcC/1/
New browsers:
document.querySelector("form[name='second'] input[name='secondText']").value = "yourNewValue";
Demo: http://jsfiddle.net/YLgcC/2/
You can try this line too:
$('input[name="elements[174ec04d-a9e1-406a-8b17-36fadf79afdf][0][value]"').mask("999.999.999-99",{placeholder:" "});
Add button in both forms. On Button click find nearest form using closest() function of jquery. then using find()(jquery function) get all input values. closest() goes in upward direction in dom tree for search and find() goes in downward direction in dom tree for search. Read here
Another way is to use sibling() (jquery function). On button click get sibling input field values.